Bulmaのセクション Section [CSSフレームワーク]

Webページでは、ページ内の一定の範囲を見出し（h1～h6）ごとや、何らかの区切り、かたまりなどで分けます。
これをセクションと言います。

Bulmaでは、このセクションのスタイルを設定するためのクラスが用意されています。

今回は、セクションを追加するsectionクラスを紹介します。

目次 [非表示]

1 ページをセクションに分割するsectionクラス
- 1.1 セクションのサイズ
  - 1.1.1 Medium
  - 1.1.2 Large

ページをセクションに分割するsectionクラス

sectionクラスを指定したセクション（コンポーネント）は、レスポンシブパディングを備えたシンプルなレイアウト要素です。
sectionクラスは、ページをセクション（章・節・項など）に分割するためのシンプルなコンテナです。

※ ここでは、わかりやすくするために枠線を表示していますが、以下のHTMLでは枠線部分の記述は省略しています。

HTML

<section class="section">
  <h1 class="title">
    セクション タイトル
  </h1>
  <h2 class="subtitle">
    セクション サブタイトル
  </h2>
</section>

セクションタイトル

</h1>

セクションサブタイトル

</h2>

</section>

セクションのサイズ

セクションには通常サイズの他に、Medium（中）とLarge（大）の2つのサイズを指定することができます。
サイズを指定することで、任意の高さに設定することができます。

Medium

HTML

<section class="section is-medium">
  <h1 class="title">
    Medium
  </h1>
  <h2 class="subtitle">
    ミディアム
  </h2>
</section>

Medium

</h1>

ミディアム

</h2>

</section>

Large

HTML

<section class="section is-large">
  <h1 class="title">
    Large
  </h1>
  <h2 class="subtitle">
    ラージ
  </h2>
</section>

Large

</h1>

ラージ

</h2>

</section>

sectionクラスとis-mediumクラス、またはis-largeクラスを指定した要素のパディングが変わるのは、画面のサイズが1024px以上の場合のみになります。

参考CSS

.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
  }
}

.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

}

Bulma 入門 Tips 一覧