クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

Bootstrap4

Bootstrap4 レイアウトの基本

投稿日:2017年11月16日 更新日:

Bootstrapについて

レスポンシブサイトを制作する時の心強い味方がCSSフレームワークです。
CSSフレームワークがあると短時間で簡単にレスポンシブサイトが制作できます。
その代表格と言えばTwitter社が提供してくれている「Bootstrap」です。
Bootstrapは慣れてしまえば簡単に使いこなす事ができますが、初めて使う方には少し難しいかもしれません。
そんな方のために「Bootstrap」のレイアウトの基本を解説したいと思います。

 

Bootstrapを読み込んでみよう

まずはBootstrapのCSSを読み込んでみましょう。
CSSを読み込む事で、Bootstrapで定義されているCSSクラスを利用する事ができるようになります。
CDNが用意されていますので、勉強やお試しで利用するにはこれが便利です。

上記を追加する事によりBootstrapのクラスが利用可能になります。
これで準備はOKです。
今回利用するBootstrapのバージョンは「4.0.0-beta.2」です。

 

レイアウトの基本クラス

Bootstrapのレイアウトには次の3つのクラスを使います。

  • container
  • row
  • col-xx(xxには1〜12までの数字が入ります)

3つのクラスの関係は次の図の通りです。

containerクラスについて

レイアウトの一番外側のクラスです。
このクラスの中にレイアウトを設定していく事になります。
初期時では、最大幅は1140pxに設定されています。

 

rowクラスについて

containerクラスの中で設定します。
横にエリアをガバッと確保するイメージですね。
このエリアはcontainerクラス内にいくつでも作る事ができます。
row=行と考えると覚えやすいと思います。

 

col-xxクラスについて

rowクラスの中で設定します。
rowの中で列を確保していくイメージです。
col=列と考えてください。

実際には「xx」には1〜12までの数字を入れます。
入れた数字によって確保される領域の大きさが変わります。
1つのrowの中には合計で12までの大きさを確保する事が可能です。

 

サンプル

上記3つのクラスが分かれば、基本的なレスポンシブレイアウトを作ることができます。
最後にサンプルを作成しました。
分かりやすくするためにCSSに色々と記述していますが、これらが無くても問題ありません。
サンプルを開いたらブラウザの幅も変えてみてください。
これだけでレスポンシブになっていますよね!

Bootstrapレイアウトサンプル

以上がBootstrapの基本中の基本になります。
簡単に使えますのでどんどん使ってくださいね!

-Bootstrap4

執筆者:

関連記事

Bootstrap4 インライン要素の左寄せ・右寄せ・中央寄せ(センタリング)

Bootstrap4では、インライン要素の左寄せ・右寄せ・中央寄せができるクラスがあらかじめ用意されています。 CSSをその都度書く必要はありません。クラスを追加することで、インライン要素を寄せること …

Bootstrap4 divに影(シャドウ)を付ける(影付きのdiv・ボックス)

Bootstrap4では、影(シャドウ)を付けるクラスが初めから用意されています。 クラスを追加するだけで簡単に影(シャドウ)を付けることができます。 Bootstrap4 divに影(シャドウ)を付 …

Bootstrap4 colの隙間(padding、margin)を削除する(サンプル付き)

Bootstrap4でデザインを忠実に再現したい時に、colの隙間(padding)が邪魔なときがあります。 この邪魔な隙間を無くしてしまおう!というのが今回の趣旨です。 サンプルも作りました。 CS …

Bootstrap4 画面幅100%で制作したい場合(サンプル付き)

Bootstrap4のcontainerクラスは最大幅が1140pxに設定されています。 サイトのよっては、画面幅100%を使って制作したい場合があります。 オシャレなサイトなどで多いですよね。 こん …

Bootstrap4 PCとスマホで画像を切り替える方法

レスポンシブサイトでPC用画像とスマホ用画像を切り替えたい場合が多々あります。 Bootstrap4ではクラスを指定するだけで実現可能です。 便利ですね! 例えば画面サイズが「md〜xl」の時はPC用 …


comment

メールアドレスが公開されることはありません。