CSS設計

このページでは、WordPressテーマ「Arkhe（アルケー）」のCSS設計について解説していきます。

クラスの命名規則について

FLOCSSを参考にしつつ、独自ルールな部分も多数あります。

• 基本的にはなにかしらのプレフィックスがつきます。
  • サイト全体のレイアウトに関する要素 : .l-xxx
    • .l-container & .l-article は コンテンツ幅を決めるためのレイアウトクラス。
  • 小さい単位でのコンポーネント要素 : .c-xxx
  • いくつかのコンポーネントが集まったような要素 : .p-xxx
  • ユーティリティ系クラス : u-xxx
• プレフィックスの後ろは、BEM記法を参考にしつつ独自ルールで運用しています。
  • 各区間の単語をつなげる時はハイフンで繋ぐのではなく、キャメルケース。
    • 例 : .c-blockNameや.p-block__elementName
  • Modifier 部分は別クラスとして付与。
    • 例 : .c-block--modifierではなく、.c-block.-modifier
  • Element は基本的に２つ以上続けない。
    • 例 : .c-block__element__element は使わない。
  • すごく細かい部分に入ってきた時のみ、Element 単独になることも。
    • 例 : .__element

メディアクエリのブレイクポイントについて

Arkheで採用しているメディアクエリのブレイクポイントと、各サイズの呼び方は以下のようになっています。

• 1000px <= size : PCサイズ
• size < 1000px : SPサイズ
  • 600px <= size < 1000px : Tabletサイズ
  • size < 600px未満 : Mobileサイズ

ユーティリティクラスについて

• u-only-pcというクラスをつけるとPCサイズでのみ表示されるようになったり
• u-fz-lを付けるとフォントサイズが大きくなったり
• u-mt-0を付けると上部マージンが 0 になったり

します。

こういった汎用的に使いまわせるクラスも、Arkheではいくつか用意しています。

Arkheで定義しているCSS変数

Arkheで追加しているCSS変数は、基本的に--ark-で始まるようにしています。

カスタマイザーの設定と紐づいているCSS変数

// カラー
--ark-color--main
--ark-color--text
--ark-color--link
--ark-color--bg

// サイト幅
--ark-width--container

// スリム幅
--ark-width--article--slim

// ページ内のコンテンツ幅
--ark-width--article

// サムネイル比率
--ark-thumb_ratio_card
--ark-thumb_ratio_list

// ロゴサイズ
--ark-logo_size--sp
--ark-logo_size--pc

// ブロック幅（エディター上でのみ有効）
--ark-block_width

// alignwideなコンテンツの拡張幅
--ark-alignwide_ex_width

特に設定とは紐づいていないCSS変数

// マージン量
--ark-mt
--ark-mt--s
--ark-mt--h

// フォント関連
--ark-font_family
--ark-font_size
--ark-line_height
--ark-letter_spacing

// l-containerのサイドのpadding量
--ark-padding--container

// カラー系
--ark-color--border
--ark-color--gray
--ark-color--border--table
--ark-color--gray--hover

// 薄いカラーで表示する部分の opacity
--ark-opacity--thin

// 管理バーの高さ
--ark-adminbar_height


//ヘッダーの高さ (数値はJSでセット)
--ark-header_height
--ark-header_height--fixed

// スクロールバーの横幅 (数値はJSでセット)
--ark-scrollbar_width

// 画面高さ
--ark-100vh

// フォントサイズリスト
--ark-fz--xs
--ark-fz--s
--ark-fz--n
--ark-fz--m
--ark-fz--l
--ark-fz--xl
--ark-fz--xxl
--ark-fz--huge

// 固定コンテンツを考慮したオフセット値
--ark-offset--y

// 全高コンテンツの高さ
--ark-height--full

本文エリアの余白について

Arkheでは、本文エリア（the_content()の部分）は基本的にmargin-topで余白をとっています。

• デフォルトのブロック間のマージン量は、--ark-mtです。
• 見出しの上部は--ark-mt--hです。
• 「インナーブロック間」のマージン量については、以下の通りです。（見出し上部の余白も以下の値に上書きされます。）
  • 「カラム」「 メディアと文章」ブロック のインナーブロック : --ark-mt--s
  • 通常幅の「グループ」「カバー」ブロック のインナーブロック : --ark-mt--s
  • 幅広な「グループ」・「カバー」ブロック のインナーブロック : --ark-mt
• 「全幅」と「全幅」のブロック間は0になります。

「幅広」サイズについて

• フロント側では、「コンテンツ幅 + 左右にそれぞれ--ark-alignwide_ex_width(100px)」広がります。
  • このサイズがブラウザ幅が超えてしまうようになると、通常幅に収まります。
• 2カラム（サイドバーあり）のページでは、広がりません。

「全幅」について

• 「全幅」を連続で使用したときブロック間の余白が0になります。
• 「全幅」の「グループ」ブロックについて
  • 基本的には、普通に内部も全幅表示されます。
  • ただし、背景色の設定がある場合、グループのインナーコンテンツ部分はページのコンテンツ幅に収まるようになります。
• 「全幅」の「カバー」ブロックについて
  • 内部コンテンツがページのコンテンツ幅に収まるようになります。
• 「背景色ありのグループ」と「カバー」ブロックの上下paddingが広く(4emに)なり、左右paddingは--ark-padding--container（サイトコンテンツの左右の余白量とおあんじ）になります。

「幅広」・「全幅」が入れ子になった時の仕様について

• 基本的に、コンテンツエリアの中のdivの内部にある場合は親のサイズに収まります。
• ただし、
  • 全幅のカバーブロック
  • 全幅の背景色グループブロック
• のような、「全幅だけどインナーコンテンツは通常幅になっているようなエリア」で使用された「幅広」・「全幅」は、サイズがしっかり広がるようになっています。

是非、以下のページもあわせてご覧ください。