技術業務マニュアル
当サイトの技術スタッフ向けの指針をまとめる。
CSSコーディングルール
サイトスタッフ間で書くコードを均質化させるためにまとめる。
なお、これらのルールはあくまでサイトスタッフ間でのみ適用したいものとし、ユーザーコンポーネントやテーマを査読する際は必ずしもこれに合わせてもらわなくてもよい。
- [[module css]] 直後の行頭、最後は詰める。（なにもない行にはしない）
- インデントは２つにする。
- 何もない行には半角スペースをひとつ入れる。
- 最後のスタイル指定にも ; をつける。
- , のあとは、:is の中じゃない限りは改行する。
- 小数点以下は３位まで指定する。
- 0.133333333rem みたいなのはやらない。0.134rem とかにしよう。
- 0 には単位を書かない。0rem とか 0px を使わない。
- .5rem みたいなのはやらない。0.5rem と省略せずに書く。
- できる限り rem を使う。
- 適切な場合は % や vw や vh を使ってもよい。
- @media や clamp() や minmax() の中だったら px を使ってもよい。それ以外はなるべく rem で。
- em が適切な場合はけっこう少ないので考えて使用して。
- 要素の順番
- https://br-jpwiki.github.io/files/theme/super-liminal/super-liminal.css と統一する。
- @import もその順番でやったあと、最後にGoogle Fonts 系を入れる。
- モバイル （@media only screen 系）は最後にする。
- スタイル指定の順番
- まず --background-color: みたいな変数指定系が入る。
- ::before 要素とかの場合は ここで一番最初に content が入る。
- 次に position が入る。
- 次に top, left, bottom, right, z-index が入る。
- 次に display が入る。
- justify-content とか grid-template-columns とか gap とか、display に従属するような設定が入る場合はここに入れる。ここはアルファベット順。
- 次に float を入れる。
- box-sizing を入れる。
- ここから、要素の大きさに関係するものを入れていく。 aspect-ratio, width, height, margin, padding を、この順番で入れる。
- のこりは表示にそこまで影響ないやつ。
- 次に background 系を入れる。
- 次に border 系を入れる。
- 次に color, font 系 を入れて、そのあとに letter-spacing, line-height, text-align を入れる。
- のこり原則アルファベット順。
- -webkit-とか各種ブラウザ系の、同じ効果のやつは縦に並べておこう。何もついてないやつが一番上。インデントは揃えない。
- さすがに margin-block-start のほうが margin-block-end よりも先。それ系はアルファベット順に則らない。
- カラー指定は rgb / rgba で統一。
- コメントアウトのフォーマット
- 見出しをつけて構文を区切るとき
/* コメントアウト */ .hoge { color: hogehoge; }
- ライセンス表示とかするとき
/* コメントアウトA コメントアウトB */ .hoge { color: hogehoge; }
- 構文そのものにちっちゃい注釈をつけるとき（あんまり使わないで！）
/* コメントアウトA */ .hoge { /* コメントアウトB */ color: hogehoge; }
- それ以外は使わないで。
- 見出しをつけて構文を区切るとき
ページリビジョン: 8, 最終更新: 06 Apr 2026 13:05