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 は基本的に2つ以上続けない。
      • 例 : .c-block__element__element は使わない。
    • すごく細かい部分に入ってきた時のみ、Element 単独になることも。
      • 例 : .__element
FLOCSS的な設計にしている理由

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

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

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

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

--ark-pad--containerのPC値を上書きする場合、'arkhe_alignwide_pad_width'フックに同じ値を渡して幅広コンテンツのメディアクエリを調節してください。

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

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

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

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

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

  • フロント側では、「コンテンツ幅 + 左右80px」に広がります。
    • ただし、1カラム(サイドバーなし)のページで、ブラウザ幅が「コンテンツ幅 + 320px」の時のみ

エディター側では特にメディアクエリでの制御は行わず、単純に、最大で「コンテンツ幅 + 左右80px」まで広がります。

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

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

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