CSSフレームワーク Bulmaのコンテンツ Content

Bulma ロゴ トップ バナー

Bulmaには、テキストを記述する際のコンテナとなるクラスが用意されています。

Bulmaを適用(参照)したページでは、ヘッディング要素の<h1><h6>や、リスト要素の<ul><ol><dl>、段落要素の<p>などの要素を配置してもスタイルは適用されません。

Bulmaでテキストを記述する場合には、コンテナとなる要素に子要素のスタイルを適用するためのクラスを指定します。

今回は、テキストコンテンツのコンテナとして配置するcontentクラスについて紹介します。

WYSIWYGで生成されたコンテンツを処理するcontentクラス

contentクラスは、ドキュメントのデザインを整えるために指定するコンテナ要素用のクラスになります。
contentクラスを指定したdivなどの要素でヘッディング要素や段落要素をラップする(囲む)と、子孫要素に最適なスタイルが適用されます。

contentクラスは、文章を記述する際に使用する主要なHTMLタグ(要素)である
h1h2h3h4h5h6
apsupsub
blockquotepre
ulollidldtdd
tabletrthtd
figurefigcaption
をサポートしています。

contentクラスでサポートされているすべてのHTMLタグを含むBulma要素の例は、Bulma Contentのページで紹介されています。

上記のページでcontentクラスが適用されている要素の子孫要素に適用されるスタイルのサンプルを見ることができます。

順序付き(番号付き)リストの選択肢

順序付きリストの表現する際に使用するolは、様々なリストアイテムのマーカーをサポートしています。
Bulmaでは、olのマーカーをタイプ(type)、またはクラス(class)を用いて変更することができるようになっています。

Bulmaで指定可能なリストアイテムのマーカーは、以下の4種類になります。

  • アラビア数字
  • 小文字のアルファベット
  • 大文字のアルファベット
  • 小文字のローマ数字
  • 大文字のローマ数字

Bulmaのcontentクラス内で順序付きリストのアイテムマーカーを設定するサンプルのブラウザーでの実行結果

リストマーカーをtype属性で指定する場合

type属性を使用してマーカーを指定する場合は、以下のようになります。

HTML

アラビア数字の場合は、「1」
小文字のアルファベットの場合は、「a」
大文字のアルファベットの場合は、「A」
小文字のローマ数字の場合は、「i」
大文字のローマ数字の場合は、「I」
をそれぞれ指定します。

リストマーカーをクラス属性で指定する場合

class属性を使用してマーカーを指定する場合は、以下のようになります。

HTML

アラビア数字の場合は、対応クラスがありません。クラスを指定しないことでアラビア数字になります。
小文字のアルファベットの場合は、「is-lower-alpha」
大文字のアルファベットの場合は、「is-upper-alpha」
小文字のローマ数字の場合は、「is-lower-roman」
大文字のローマ数字の場合は、「is-upper-roman」
をそれぞれ指定します。

フォントサイズの設定

contentクラスの子孫要素のフォントサイズは、contentクラスを指定した要素にサイズを示すクラスを指定することで設定することができます。
フォントサイズには
小さいサイズ、通常サイズ、中くらいのサイズ、大きいサイズの4種類があります。
小さいサイズにしたい場合は、「is-small」
通常サイズにしたい場合は、「is-normal」
中くらいのサイズにしたい場合は、「is-medium」
大きいサイズにしたい場合は、「is-large」
を指定します。
フォントサイズのクラスを指定しない場合(省略した場合)のデフォルトは通常サイズ(is-normalを指定した場合と同じ)になります。

Bulmaのcontentクラス内でフォントサイズを設定するサンプルのブラウザーでの実行結果

HTML

Bulma 入門 Tips 一覧