CSS設計 | Arkhe

このページでは、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

FLOCSS的な設計にしている理由

WordPress側が用意しているクラスはプレフィックスがない（例 : .pagination）ので、.c-や.p-などが付けている部分 = テーマ側で用意しているものだと区別しやすいため。
かつ、ark-などのテーマ独自のプレフィックスだけを使うよりもそれぞれの要素の役割が理解しやすく、管理もしやすいため。

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

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

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

src/scss/foundation/mixin/_media.scssにて、メディアクエリ用のmixinが確認できます。

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

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

します。

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

詳しくは、src/scss/object/utility/**を参照してみてください…！

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になります。

コンテンツのマージンについて

.l-content__bodyの上下には基本的に全てのページでマージンがありますが、
フロントページのこの部分にはマージンがありません。（自由にコンテンツを構築しやすくするため）

「幅広」サイズについて

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

広げる幅の100という数値は、'arkhe_alignwide_plus_width'フィルターフックで上書きできます。

「全幅」について

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

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

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

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

See: https://arkhe-theme.com/ja/manual/style-guide/fullwide/