スタイルガイド

テンプレートの設計・命名規則について

このテンプレートは以下の手法をベースに作成しています。

  • 設計:FLOCSS
  • 命名規則:BEM

パーツ一覧

見出し(h2)

h2

見出し(h3)

h3

見出し(h4)

h4

テキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像上配置+テキスト

画像のキャプションが入ります。

画像上配置+テキストです。画像上配置+テキストです。画像上配置+テキストです。画像上配置+テキストです。画像上配置+テキストです。画像上配置+テキストです。画像上配置+テキストです。画像上配置+テキストです。画像上配置+テキストです。

画像右配置+テキスト

画像のキャプションが入ります。画像のキャプションが入ります。画像のキャプションが入ります。

画像右配置+テキストです。画像右配置+テキストです。画像右配置+テキストです。画像右配置+テキストです。画像右配置+テキストです。

画像右配置+テキストです。
画像右配置+テキストです。
画像右配置+テキストです。
画像右配置+テキストです。画像右配置+テキストです。

画像左配置+テキスト

画像のキャプションが入ります。画像のキャプションが入ります。

画像左配置+テキストです。画像左配置+テキストです。
画像左配置+テキストです。画像左配置+テキストです。画像左配置+テキストです。画像左配置+テキストです。画像左配置+テキストです。
画像左配置+テキストです。画像左配置+テキストです。画像左配置+テキストです。画像左配置+テキストです。画像左配置+テキストです。画像左配置+テキストです。画像左配置+テキストです。画像左配置+テキストです。

画像下配置+テキスト

画像下配置+テキストです。画像下配置+テキストです。画像下配置+テキストです。画像下配置+テキストです。

画像のキャプションが入ります。画像のキャプションが入ります。画像のキャプションが入ります。画像のキャプションが入ります。画像のキャプションが入ります。画像のキャプションが入ります。画像のキャプションが入ります。

リスト

  • リストです。リストです。リストです。リストです。リストです。リストです。
  • リストです。リストです。リストです。リストです。リストです。リストです。
  • リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。

リスト:番号つき

  • リストです。リストです。リストです。リストです。リストです。リストです。
  • リストです。リストです。リストです。リストです。リストです。リストです。
  • リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。

リスト:(番号)つき

  • リストです。リストです。リストです。リストです。リストです。リストです。
  • リストです。リストです。リストです。リストです。リストです。リストです。
  • リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。

リスト:※つき

  • リストです。リストです。リストです。リストです。リストです。リストです。
  • リストです。リストです。リストです。リストです。リストです。リストです。
  • リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。

リスト:*つき

  • リストです。リストです。リストです。リストです。リストです。リストです。
  • リストです。リストです。リストです。リストです。リストです。リストです。
  • リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。リストです。

テキスト右寄せ

テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

テキスト中央寄せ

テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

テキスト左寄せ

テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

表(TABLE)

見出しが入ります テキストが入りますテキストが入りますテキストが入ります
見出しが入ります

テキストが入りますテキストが入りますテキストが入ります

表(DL)

見出しが入ります
テキストが入りますテキストが入りますテキストが入ります
見出しが入ります
テキストが入りますテキストが入りますテキストが入ります

表(横スクロール)

見出しその1 見出しその2 見出しその3 見出しその4
見出しが入ります テキストが入りますテキストが入ります テキストが入りますテキストが入ります テキストが入りますテキストが入ります
見出しが入ります テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります テキストが入りますテキストが入ります テキストが入りますテキストが入ります
見出しが入ります テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります テキストが入りますテキストが入ります テキストが入りますテキストが入ります