IT坊やだからさ。

ウェブディレクター/プログララマーの現役フリーランスが送るガンダム話

ソフトウェア

ウェブデザイナー必見!Bootstrapをオススメする理由!

投稿日:

ウェブデザイナー必見!Bootstrapをオススメする理由!

ウェブデザインの案件で最近増えてきたのはBootstrapを用いたもの。

わたし自身もBootstrapには非常にお世話になっている。

というのもウェブサイト構築のパッケージとして品質が高いのだ。

特に「html」が触れる人であればそれだけで十分立派なウェブサイトを構築できる。

「css」の知識もあったらなお良いが、Bootstrapを導入することで「css」の知識はそこまで必要ない。

当然Javascriptの知識も必要ない。

そこでBootstrapの基本導入と概念を共有しようと思う。

Bootstrapでウェブサイト分割概念

Bootstrapの概念は画面を12分割して構築することにある。

具体的なイメージとしてはこのような感じになる。

Bootstrapによる画面12分割のイメージ

実際は細かい隙間すらなく完全に12分割、イメージはわかりやすくするために意図的に隙間を書いている。

更にBootstrapを用いることでウェブサイトを横に分割設定できる。

Bootstrapによる画面横分割のイメージ

こちらも意図的に隙間を書いているが、実際は隙間なくウェブサイトを構築できる。

これら分割概念は縦を「col」、横を「row」でクラス定義させてウェブサイトを表示させる。

これまで手書きでhtmlとcssで配置していた画面のコンポーネントをBootstrapを用いることでより簡易的に、そして保守性も持たせて構築できるようになったわけだ。

Bootstrap標準で用意されているクラスが豊富

Bootstrapの基本概念は画面分割だが、それだけではない。

豊富なカスタマイズが可能なのもBootstrapの良さだと思う。

Bootstrapの標準モジュールは公式サイトからダウンロードが可能。

Bootstrap標準モジュール一覧bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

Bootstrap公式ページ

ダウンロードせずとも「head」タグに「link」タグでURLをベタ打ちしてBootstrapの定義を使用する事もできる。

link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”

script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”

Bootstrapでレイアウト定義

Bootstrapを用いて全体のレイアウトを定義するクラスは基本的に用意されている。

「container」もしくは「container-fluid」でウェブサイト全体のレイアウトを構築する。

「container」は幅が固定長でレイアウトできる。

「container-fluid」はフルサイズの可変長でレイアウトできる。

Bootstrapでは画面の横幅に合わせて特定のサイズ感を持っている。

最大であれば「xl」、最小であれば「xs」のような感じ。

洋服のサイズと同じような感覚と思ってもらえれば良いかと。

これらサイズ感をブレークポイントで設定することが可能。

———— Bootstrap標準で用意されているブレークポイント ————–

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { … }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { … }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }

—————————————————————————————————–

ナビやメインカラムに適用する抜粋。

@include media-breakpoint-only(xs) { … }
@include media-breakpoint-only(sm) { … }
@include media-breakpoint-only(md) { … }
@include media-breakpoint-only(lg) { … }
@include media-breakpoint-only(xl) { … }

ブレイクポイントをサイズで指定できる。

Bootstrapのグリッドシステム

Bootstrapのグリッドシステムは「row」と「col」とブレークポイントを複合して使っていく。

例えば画面幅が768pxの2番目のカラム指定をする場合。

col-md-2

この様に表現できる。

Bootstrapの概念は12分割なので考え方としては次の様に表示できる。

HTML/
├── container/
│ ├── col-md-2 ├────────── col-md-10
│ ├── col-md-6 ├── col-md-6 ├── col-md-4 ├── col-md-8

「container」クラスを「col-md-2」と「col-md-10」に12分割。

「col-md-2」クラスを「col-md-6」と「col-md-6」に12分割。

「col-md-10」クラスを「col-md-4」と「col-md-8」に12分割。

この様にクラスを階層別に12分割する方式を取る。

更に「row」クラスで横幅を指定する事も可能。

bootstrapのrowとcolの概念

上段「row」には2つの「col」が。

下段「row」には3つの「col」が設定されている。

Bootstrapのネスティングの概念は「row」の中に「col」を入れていくイメージになる。

その画面サイズをブレークポイントで設定すると可変長の綺麗なレイアウトで仕上がる仕組みだ。

Bootstrapクラスは細部まで用意されている

また細かな設定もクラスで定義されている。

グリッドシステムを用いる事でレスポンス対応したウェブサイトを構築できる。

大枠は「row」や「col」で設定すれば良い。

ただ微調整したい。

こんな悩みにもBootstrapは標準で応えている。

より細かな設定が可能(標準モジュールで提供分)

  • Alerts
  • Badge
  • Breadcrumb
  • Buttons
  • Button group
  • Card
  • Carousel
  • Collapse
  • Dropdowns
  • Forms
  • Input group
  • Jumbotron
  • List group
  • Modal
  • Navs
  • Navbar
  • Pagination
  • Popovers
  • Progress
  • Scrollspy
  • Tooltips
  • Borders
  • Clearfix
  • Close icon
  • Colors
  • Display
  • Embed
  • Flex
  • Float
  • Image replacement
  • Position
  • Screenreaders
  • Shadows
  • Sizing
  • Spacing
  • Text
  • Vertical align
  • Visibility

詳しく書かないが標準モジュールでこれだけ豊富な定義を持っている。

ウェブサイト構築を検討するのであればBootstrapはオススメしておきたい。

わたしの人生も12分割してどこが悪かったのか考え直したいものだ。

今日も良い1日を。

      

-ソフトウェア

執筆者:

関連記事

【用語】今更聞けないASPの意味は?意味の混同に要注意!

【用語】今更聞けないASPの意味は?意味の混同に要注意!

IT業界には横文字が多い。 IT自体も少し前からはICTと呼ばれるようになり正式名称は「Information and Communication Technology」である。 もはや日本人であるが …

大尉はまるでFTPの様だ

【オススメのFTPツール】FTPの仕組みを徹底解説!

ウェブサイトを運用するなら必ず意識しなければならないウェブサーバーの存在。 そのウェブサーバーとのやり取りを担うのがFTPツールである。 そう、ウェブサイトを運用するなら必ず必要になるのがFTPである …

匿名性の高いTor Browzer!本当に使えるのか!?

【TorBrowzerの使い方】匿名性の高いブラウザ!【日本語対応】

匿名性の高いブラウザがあるとご存知だろうか。 今回、わたしは匿名性の高いと評判の「Tor Browzer」をインストールしてみた。 正直、ブラウザは「Google Chrome」以外使う気にならないの …

mampで使うcakephpは簡単

MacはMAMPで実行!cakePHPは超簡単に使えるのでオススメ!

cakePHPのWeb環境をMacbookの内部で構築した。 その実績をメモして残しておこう。 cakePHPという代物をご存知だろうか? PHPはWordpressをはじめとした多くのWebサイトや …

なりすましメールがウザい!メールウイルス瞬殺対応メゾット!

なりすましメールがウザい!ウイルスメール瞬殺対応メゾット!

皆さんは「なりすましメール」が送られてきたことがあるだろうか。 メールアドレスがどこかのクソ業者に買い取られたのだろう。 世の中、情報はカネになる。 これは今に始まった事ではない。 戦争では相手の情報 …

プロフィール

逆襲のジェリド

逆襲のジェリドは史実を覆すべく、復活を遂げた。時代はプログラミングを求める!俺を戦いに駆り立てたのは貴様だ!そんなこと言えるのかよ!

現役ITエンジニアフリーランス。得意分野はphp、Java、Javascript、VB.net、VBA。仕事についてはDMで。このブログではウェブかプログラミング、ガンダムについて徒然なるままに。

詳しくはこちら→ 詳細プロフィール