からくりブログ

前回から9か月経ちましたが、その間にカレントバージョンがv4.5になりました。最新インストールはこちらからどうぞ。
まず、サイト作りにおいて基本的なことを説明します。

ブレイクポイント

ブレイクポイントとは、表示デバイスの画面幅に合わせてcssを切り替える、そのポイントのことです。cssのメディアクエリを使用し、画面サイズ毎にスタイリングします。
PC向けサイトをスマートフォンで見るとデザインが崩れていたり、表示がつぶれて見辛い等の経験をしたことありますでしょうか・・・？
そのようなことを防ぎ、どのデバイスでもスタイリングされたサイトを表示しましょう。
Bootstrapのブレイクポイントは

• 576px(sm) 
  • 横向きスマホ、576px以上
• 768px(md) 
  • タブレット、768px以上
•  992px(lg) 
  • デスクトップ、992px以上
• 1200px(xl) 
  • 大き目デスクトップ、1200px以上
    

です。
それでは、Bootstrapで最も基本的なレイアウト要素から追加してみましょう。

コンテナ

コンテナは、Bootstrapの最も基本的なレイアウト要素であり、デフォルトのグリッドシステムを使用する場合に必要です。コンテナは、コンテンツを格納するために使用します。
コンテナを使用するとデバイス画面幅をはみ出して表示されることを防げる（あえてはみ出すレイアウトをしない限り）ので、横スクロールすることなくサイトが見やすくなります。
コンテナにはいくつかのパターンがあります

container	各ブレイクポイントの最大幅
container-fluid	全幅表示
container-{breakpoint}	Bootstrap v4.4で追加された新機能。 各ブレイクポイントの最大幅。上位ブレイクポイントは全幅で表示

コンテナの表示は以下で確認できます。https://getbootstrap.com/docs/4.5/examples/grid/#containers
上記ページをブラウザで見てみましょう。

Google Chromeの場合はF12クリック – Toggle device toolbarをクリックすると、スマホ、タブレット表示を確認できます。
Firefoxの場合はF12クリック – レスポンシブデザインモード、Edgeの場合はF12クリック – デバイスのツールバーを切り替えるで確認できます。
一つのサイトで表示デバイスに依存せずスタイリングされたサイトが表示することが確認できました！

次はグリッドレイアウトを見ていきます。ではまた！