クルーデザイン

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 上下中央・上寄せ・下寄せ(d-flex)

上下中央や上寄せ、下寄せに配置するためのクラスも用意されています。 flexboxを利用するため、それぞれ2つのクラスを指定すればOKです。   1. 上下中央寄せ 「d-flex」と「al …

Bootstrap4 YouTubeをレスポンシブで貼り付ける(普通の動画でもOK)

Bootstrap4を使えば、レスポンシブなYouTubeリンクを貼り付けることができます。 レスポンシブというのがミソです。 普通にYouTubeリンクを貼ると、固定サイズになってしまいますからね。 …

Bootstrap4 マージン用クラス(margin)

Bootstrap4にはマージン用クラスが用意されています。 クラスに追加するだけでマージンが取られるので、とても便利ですよ。 サンプルも作ってますので一緒に見てくださいね。 次のように指定できます。 …

Bootstrap4 ブレークポイントを変更したい(ソースファイルをコンパイルする)

Bootstrap4のブレークポイントはあらかじめ設定されていますが、案件によってはブレークポイントを変更したい場合があります。 ブレークポイントを変更する場合、bootstrap.cssを直接編集す …

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

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


comment

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