Webページでは、ページ内の一定の範囲を見出し（h1～h6）ごとや、何らかの区切り、かたまりなどで分けます。
これをセクションと言います。
Bulmaでは、このセクションのスタイルを設定するためのクラスが用意されています。
今回は、セクションを追加するsectionクラスを紹介します。
ページをセクションに分割するsectionクラス
sectionクラスを指定したセクション（コンポーネント）は、レスポンシブパディングを備えたシンプルなレイアウト要素です。
sectionクラスは、ページをセクション（章・節・項など）に分割するためのシンプルなコンテナです。
※ ここでは、わかりやすくするために枠線を表示していますが、以下のHTMLでは枠線部分の記述は省略しています。
HTML
|
1 2 3 4 5 6 7 8 |
<section class="section"> <h1 class="title"> セクション タイトル </h1> <h2 class="subtitle"> セクション サブタイトル </h2> </section> |
セクションのサイズ
セクションには通常サイズの他に、Medium（中）とLarge（大）の2つのサイズを指定することができます。
サイズを指定することで、任意の高さに設定することができます。
Medium
HTML
|
1 2 3 4 5 6 7 8 |
<section class="section is-medium"> <h1 class="title"> Medium </h1> <h2 class="subtitle"> ミディアム </h2> </section> |
Large
HTML
|
1 2 3 4 5 6 7 8 |
<section class="section is-large"> <h1 class="title"> Large </h1> <h2 class="subtitle"> ラージ </h2> </section> |
sectionクラスとis-mediumクラス、またはis-largeクラスを指定した要素のパディングが変わるのは、画面のサイズが1024px以上の場合のみになります。
参考CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.section{ padding:3rem 1.5rem } @media screen and (min-width:1024px){ .section{ padding:3rem 3rem } .section.is-medium{ padding:9rem 4.5rem } .section.is-large{ padding:18rem 6rem } } |
