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~ : PCサイズ
• ~999px : SPサイズ
  • 600px ~ 999px : Tabletサイズ
  • ~599px : 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-container_width

// スリム幅
--ark-slim_width

// 記事コンテンツ幅 テンプレート種別によって、--ark-container_width または --ark-slim_width と同じ値になります。
--ark-article_width

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

// ロゴサイズ
--ark-logo_size_sp
--ark-logo_size_pc

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

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

// マージン量
--ark-mt: 2rem;
--ark-mt--s: 1rem;
--ark-mt--h: 2.5em; // 見出しタグ用


// フォントサイズ
--ark-font_size: 16px;
--ark-font_size_sp: 3.8vw;

// フォントファミリー
--ark-font_family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;


// カラー系
--ark-color_border: rgba(200,200,200,.5);
--ark-color_gray: rgba(200,200,200,.15);
--ark-color_table_border: #ededed;


// l-containerのサイドのpadding量
--ark-pad--container: 48px;
@include sp {
  --ark-pad--container: 4vw;
}


// ウィジェットなどのナビ・メニュー用変数
--ark-nav-padding: .75rem .5rem; //rem: 子メニューになっても余白感変わらないように
--ark-hover_gray: rgba(150, 150, 150, .05);


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

// ヘッダーの高さ（JSからセットされる）
--ark-header_height

// 画面上部に固定されているコンテンツの高さを考慮した値（JSからセットされる）
--ark-offset_y

// スクロールバーの横幅（JSからセットされる）
--ark-scrollbar_width

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

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

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

「幅広」サイズのブロックについて

• フロント側では、「コンテンツ幅 + 左右100px」に広がります。（ブラウザ幅が「コンテンツ幅 + 200px」以上の時のみ）
• 2カラム（サイドバーあり）のページでは、広がりません。

「全幅」のブロックについて

• 「グループ（背景色あり）」と「カバー」ブロックのpaddingが広くなります。 ( 上下 4rem)
• 「全幅」を連続で使用したときブロック間の余白が0になります。
• 「グループ」ブロックで全幅を使った時、基本的には内部コンテンツも全幅で表示されます。
  • しかし、背景色の設定がある場合はページのコンテンツ幅に収まるようになります。
• 「カバー」ブロックでも、内部コンテンツはページのコンテンツ幅に収まるようになっています

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