小三ツ星インターフェイス

グリッドレイアウトのCSS

Bootstrapのグリッドが細かすぎて使いにくい&ファイルが肥大化するので自分で作ることにした。基本的な構造はBootstrapの真似。
レスポンシブで表示幅が狭くなった時の段組はBootstrapとは異なるものになる。

CSS

/* css grid rayout */
body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: 960px;
    width: 100%;
}

.row {
    display: block;
    box-sizing: border-box;
    margin: auto 0 auto 0;
    width: 100%;
    background-color: #EEF;
}

.row::after {
    display: block;
    visibility: hidden;
    clear: both;
    content: " ";
    line-height: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-3-fix, .col-4-fix, .col-5-fix, .col-7-fix, .col-8-fix, .col-9-fix, .col-10-fix {
    float: left;
    box-sizing: border-box;
}

.col-12 {
    margin: 0 0.5%;
    width: 99%;
}

.col-11, col-11-fix {
    margin: 0 0.5%;
    width: 90.66666%;
}

.col-10, col-10-fix {
    margin: 0 0.5%;
    width: 82.33333%;
}

.col-9, .col-9-fix {
    margin: 0 0.5%;
    width: 73.99999%;
}

.col-8, .col-8-fix {
    margin: 0 0.5%;
    width: 65.66666%;
}

.col-7, .col-7-fix {
    margin: 0 0.5%;
    width: 57.33333%;
}

.col-6 {
    margin: 0 0.5%;
    width: 48.99999%;
}

.col-5, .col-5-fix {
    margin: 0 0.5%;
    width: 40.66666%;
}

.col-4, .col-4-fix {
    margin: 0 0.5%;
    width: 32.33333%;
}

.col-3, .col-3-fix {
    margin: 0 0.5%;
    width: 24%;
}

.col-2 {
    margin: 0 0.5%;
    width: 15.66666%;
}

.col-1 {
    margin: 0 0.5%;
    width: 7.33333%;
}

@media screen and (max-width: 640px) {
    .col-1 {
        width: 32.3333%;
    }
    .col-2 {
        width: 49%;
    }
    .col-3 {
        width: 49%;
    }
    
    .col-4 {
        width: 49%;
    }
    
    .col-5 {
        width: 99%;
    }
    
    .col-7 {
        width: 99%;
    }
    
    .col-8 {
        width: 99%;
    }
    
    .col-9 {
        width: 99%;
    }
    
    .col-10 {
        width: 99%;
    }
    
    .col-11 {
        width: 99%;
    }
}

備考

.container の position: relative; はこのグリッドレイアウト自体には意味を持たない。内部にpositionプロパティを使う要素がある場合、そのベースとなるために指定しているだけ。

解説

Bootstrapのつくりをまねて作成。
12グリッドレイアウト。
構築の際はクラスrowでcol-*の一群をラップする。
rowについてはBootstrapでも使っているものであるため、Bootstrapとの共用は不可。(たぶん使っても平気だけど。)
640pxを下回ると、col-の数にかかわらず、1~3カラムにカラム数を減らす仕様。
-fixがついているものは、640pxを下回っても比率を変えないもの。2段組の比率を保持することを目的としている。

横並びグローバルメニューのCSSをどのように実現するか

はじめに

ウェブサイトを制作する上で、頻繁に使うテクニックが要素の横並びです。

グローバルナビゲーションや、メールフォーム、画像の回り込みやカラムの配置と、ウェブサイトのデザインに横並びは欠かせません。

一方、横並びはデザイン崩れを発生させやすいポイントでもあります。その目的に合致した横並びのテクニックを使う必要があります。ここでは、どのような場面でどういう技術を使うべきかについてまとめます。

ボックスモデルの再確認

横並びのテクニックを覚える前に、横並びのベースとなるHTML要素のボックスモデルについて改めて確認しておく必要があります。

ボックスモデルの基本

HTML要素のボックスモデル content width(content-box) height 相殺あり 相殺なし width(border-box) padding border margin

HTMLの全ての要素は、内側から順にcontent, padding, border, margin の4つの領域を持っています。

content

contentは、要素内のコンテンツがぴったり収まる領域です。
ボックス要素では幅はいっぱいまで占有しますが、インライン要素ではコンテンツが収まる最小限に収まります。
高さは、インライン要素では文字、あるいは画像の高さで、ブロック要素ではline-heigtが基本になります。

padding

paddingは洋服の肩パッドと同じように、contentからボックスを膨らませる役割を持っています。

デフォルトでは、widthで指定した値はcontentのもので、padding,border,marginを設定すると、要素の占有領域はwidthよりも広がります。要素を横並びする際、最初に引っかかるのがこれで、カラムが落ちる原因の一つです。

もっとも基本的な対策の一つは、box-sizing: border-box;を要素指定することでwidthの値をborderまでを含めたものに変更することです。

border

borderは、枠線をコントロールするプロパティです。box-sizingがデフォルトのcontent-boxの場合は外側に、border-boxの場合はwidthの内側に広がります。

IEでは、画像にリンクを設定すると、勝手にこのborderを設定し、青い枠線を表示するようになります。この問題を解消するためには、cssの最初に a img {border: none;}を指定します。

margin

marginは余白をコントロールするプロパティです。

このプロパティには独特の癖がいくつかあります。

左右に並ぶ要素に関しては、marginはpadding同様、左側の要素のmargin(margin-right)+右側の要素のmargin(margin-left)で余白を作ります。

ところが、上下に並ぶ要素に対しては相殺が発生します。
上または下の要素に対して、最低限どれだけ余白を作るかを決めるプロパティとして振る舞い、並んでいる要素の、大きいほうのmarginが余白として適用されます。

そのほか、隣接する要素に回り込み(float)が設定されている場合、marginは回り込みの設定されている要素に重複してしまい、余白を作れなくなります。

回り込み要素

width: 200px; height: 200px; float: left;

pタグにmargin: 40px;を設定。
上下と右側には40pxの余白があるが、左には余白が無い。

div 要素(height: 150px; margin: 40px;)

この問題を避けるため、原則として回り込みを指定している要素にmarginを指定しましょう。

回り込み要素

width: 200px; height: 200px; float: left;
margin-right: 40px;を設定

pタグにmargin: 40px;を設定。
上下と右側には40pxの余白があるが、左には余白が無い。

div要素 ( height: 180px; margin: 40px;)
要素自体は回り込み要素に重複しているが、コンテンツと回り込み要素の間には余白ができている。

どうしてもそれができない場合は、以下の対策を行います。

前の要素に回り込んだ上で、marginを効かせたい場合は、回り込む要素にもfloatを指定します。

前の要素に回り込ませない場合は、clearを指定します。

回り込み要素

width: 200px; height: 200px; float: left; margin-right: 40px;

pタグ margin: 40px;を設定。
float: left;も設定。
幅が100%から最小限に縮められている

div要素 (height: 180px; margin: 40px;)にclear: both;を適用。

なお、floatを適用した場合、適用した要素は、それがブロック要素であったとしても、幅はコンテンツを収める最小限まで縮みます。floatを適用する一方、後続の要素を回り込ませないようにするには、幅いっぱいまで占有するようにwidthの値を指定するか、floatした要素にclearfixを適用するか、後続の要素にclearを指定します。

ブロック要素とインライン要素

ブロック要素とインライン要素の違いは、デフォルトで幅をいっぱいに取るか、中のコンテンツの幅でとどめるかの違いになります。役割としては、ブロック要素が箱、インライン要素は文字となります。

HTMLの要素は全てデフォルトでこれら2つのいずれかとなっています。インライン要素は、a, span, img, strong, q など、文字列の中で用いられることが前提の要素です。ブロック要素はそれら以外のほぼ全て。h1~h6の見出し要素、div, p, hr, ul, ol, li などが頻繁に使われます。ブロック要素は幅や高さを任意に設定できます。

CSSで、display: inline-block; を指定すると、少しユニークな性質を持たせることができます。inline-block を指定された要素は、インライン要素のように行内に収まりますが、改行の際はその要素が一かたまりで改行され、中の文字列が途中で改行される動き方はしません。また、幅や高さをブロック要素のように指定することができます。グローバルナビやフッターのリンク、タグクラウドなどに用いると、リンクの文字列が途中で折り返されることが無くなり、キーワードが読みやすくなります。

横並びのマークアップ

グローバルナビなどのリンク、メニューなどをマークアップする際は、文書構造を明確にするため、通常はリスト要素を用います。

<ul>
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu4</a></li>
</ul>

これをブラウザで表示させるとこうなります。

各要素のコンテンツエリアを確認するため、背景色をつけます。ulにピンク色を、liに水色を、リンクには緑をつけるとこうなります。

li要素のmargin,paddingはいずれも0です。
ulにはデフォルトでpadding-leftがあるため、li要素の左側にulの領域が見えています。
また、liはブロック要素なので幅いっぱいまで領域を占有しています。a要素はインライン要素のため、文字の幅分しか幅を占有しません。
a要素の上下にある隙間は、1行の高さを1.6にしているために発生しています。

リストの行頭の黒丸は横並びの際の邪魔になるので、ul {list-style: none;}で消してしまいましょう。

ulのpadding-leftはulの高さが見えるように、このままにしておきます。これで横並びの下準備ができました。いよいよ、横並びの実践を行います。

横並びを実現するCSS

liが縦に並ぶのは、それがブロック要素で回り込みも設定されていないからです。後ろのli要素を横に回りこませるには、li要素をブロック要素からインライン要素に変更する、ul,liをテーブル要素に変更する、回り込みを設定する、のいずれかで実現できます。

それぞれの特徴を確認しましょう。

li要素をinlineにする

ブロック要素であるliに対してdisplay: inline;を指定します。

liがインライン要素になったことから、中の文字列をぴったり収める範囲にサイズが縮みました。line-heigtによる余白はliにはなく、その親のブロック要素であるulに対して利いています。

ちなみにulもインライン要素にしてしまうとこうなります。

line-heigt: 1.6;がまったく無くなってしまいました。line-heightはブロック要素において有効であることが分かります。

さて、他に気になるのはli要素の間に中途半端な余白が発生していることです。li要素にはmarginもpaddingもtext-indentも0なので、CSSではコントロールできません。

この余白は、</li>の後で改行していることで生じています。つまり、全く見えませんが、ここには「改行コード」という見えない文字が1文字入っています。そのため余白が生じています。

何だ面倒臭いな、と思うかもしれませんが、ブラウザはpタグなどでマークアップしていない、裸のテキストも表示するようにできています。一方でHTMLの仕様では改行はbrやpタグを用いることになっており、テキスト内の改行コードでは改行を実行しないことになっています。それが、改行コードという不可視の文字をわずかな空白として扱わせている原因です。

これはdisplay:inline;に限らず、pタグ内でも同じ現象が生じます。

●この1行には改行コードはありませんが、




1



1












上の2行を比べると、下の方が文字間隔が広いのがわかります。間に改行コードが入っているせいです。

これが、liをインライン要素にして横並びにしたときに生じる隙間となっています。

次のようにHTMLコード側で改行をなくす対応をとることである程度解消はできます。

<ul>
  <li><a href="#">menu1
  </a></li><li><a href="#">menu2
  </a></li><li><a href="#">menu3
  </a></li><li><a href="#">menu4</a></li>
</ul>

リンクの隙間は無くなりますが、やはり改行コード分、文字に隙間が発生しています。完全に無くすためには全て1行で表示しなければならず、コードがかなり読みにくくなります。

<ul>
  <li><a href="#">menu1</a></li><li><a href="#">menu2</a></li><li><a href="#">menu3</a></li><li><a href="#">menu4</a></li>
</ul>

多少トリッキーではありますが、CSS側での対処も不可能ではありません。liを囲んでいるulの文字サイズを0にして、liのほうで文字サイズを復活させる、という方法です。

ul {
  font-size: 0;
}
ul>li {
  font-size: 16px;
}

最後に、これをグローバルナビっぽく均等に割り付けるため、liに幅を設定してみます。

<ul class="inline-menu">
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu4</a></li>
</ul>
.inline-menu {
    background-color: #FCF;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}
.inline-menu li {
    background-color: #CFF;
    display: inline;
    font-size: 16px;
    width: 25%;
}
.inline-menu li a {
    background-color: #0F0;
}

見ての通りうまくいきません。

インラインに置きつつ、幅や高さを付けたい場合は、inline-blockを使います。

inline-block

まずは、liにinline-blockを指定しただけの状態を確認します。

inlineにしたときとは異なり、li要素に高さが残っていることが分かります。この高さはline-height:1.6;によって生じています。

また、inlineのとき同様、改行コード分の隙間があります。これらを解消し、均等に分割してみます。

<ul class="inline-block-menu">
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu4</a></li>
</ul>
.inline-block-menu {
    background-color: #FCF;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}
.inline-block-menu li {
    background-color: #CFF;
    display: inline-block;
    font-size: 16px;
    width: 25%;
}
.inline-block-menu li a {
    background-color: #0F0;
}

liの幅を4分割となる25%で設定したところ、きれいに収まりました。

リンクの領域が狭いので、これをLi要素いっぱいまで広げます。高さ、幅を指定できるようにaタグをブロック要素にして、幅を100%にするとli内がすべてクリック可能になります。

.inline-block-menu li a {
    background-color: #0F0;
    display: block;
    width: 100%;
}

なお、li要素を、例えば40pxなどと指定した場合、a要素の高さが不足します。

この場合は、a要素に高さ100%を指定すると解決します。

なお、親要素に高さが指定されていない場合にheight:100%;を指定してしまうと、表示領域に対する高さとなるので気をつけましょう。

liに枠線を設定する場合は、box-sizing: border-box;を指定しないとカラム落ちします。

li {
    background-color: #CFF;
    display: inline-block;
    font-size: 16px;
    width: 25%;
    height: 40px;
    border: 1px solid #666; ←枠線だけ追加
}

これはデフォルトのcontent-boxでは枠線の分、liの占有幅が25%をわずかに超えるためです。liのbox-sizingにborder-boxを適用するときれいに収まります。

さて、中の文字をliのボックスの中心に配置したいところです。

左右の関してはtext-align: center;で良いのですが、上下の位置の調整は困難です。文字が1行で収まるのであれば、line-heigt を高さと同じ値にする、という方法があります。

display: table 及び table-cell

display: table; と display: table-cell; は、要素を表組みにするCSSです。

<ul class="table-menu">
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu4</a></li>
</ul>
.table-menu {
    background-color: #FCF;
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
}
.table-menu li {
    background-color: #CFF;
    display: table-cell;
    height: 40px;
    border: 1px solid #666;
}
.table-menu li a {
    background-color: #0F0;
    display: block;
    width: 100%;
    height: 100%;
}

横幅をいっぱいにして均等割りにするには、display:table;を指定している要素に width: 100%; と、 table-layout: fixed; を指定します。

table要素では、box-sizing: border-box; を指定しなくてもカラム落ちする心配がありません。

一方、liの領域全体をクリックできるようにするため、a要素をブロック要素すると、vertical-align: middle;が機能しません。文字列を中心に配置する手間はinline-blockを用いる方法と変わらないといえます。

また、レスポンシブに対応する(一定の画面幅以下では横並びを解除する)には、table指定を解除する必要があります。li要素にmin-widthを設定すれば勝手に横並びを壊してカラム落ちしてくれるinline-blockより少しコーディングの量が増えます。

float: left;

もっとも古くから用いられ、関連テクニックが熟成されているプロパティです。

li要素にfloat: left; を指定すると以下のようになります。

<ul class="float">
  <li><a href="#1">menu1</a></li>
  <li><a href="#2">menu2</a></li>
  <li><a href="#3">menu3</a></li>
  <li><a href="#4">menu4</a></li>
</ul>
.float {
    background-color: #FCF;
    list-style: none;
}
.float li {
    background-color: #CFF;
    float: left;
}
.float li a {
    background-color: #0F0;
}

 floatを用いる場合に注意すべきところは、何もしないと親要素のulから高さが消えることです。親要素から高さが消えることで、floatを設定したliの後の要素が、横に回りこめるようになります。(この文もまた、liに回り込んでいます。)

このままだと結構面倒なことが頻出するので、このメニューの後の要素は回り込まないようにしたいところです。

方法は何種類かあります。

1. ulに高さを設ける

ul要素は、100%の幅を持っているため、高さを指定すると後続の要素が回りこむ余地が無くなります。以下はulに40pxのheightを設定したばあいの表示です。

メニューの高さが可変でない限り、この方法を用いることができるでしょう。

2. ulにclearfixを適用する

ul:afterの擬似要素で回り込みを解除しています。

この方法の利点は、liの高さが変化してもそれにulの高さが追従してくれることです。

後続の要素にclearを適用する

ulやliではなく、後続の要素で clear: left; や clear: both; を適用することで回り込みを解除します。ulの高さも無くなったままです。

この方法はfloatが設定された要素の後にあるというだけで、内容的には関係のない要素に変更を加えなければならないという点であまり合理的ではありません。ulの後に続くものが何であれ回り込ませない、というのであれば、その処理は根本原因であるul側で行うべきです。

特定の機能を持ったパーツの中で処理は完結すべきであり、周辺に後処理を押し付けるべきではありません。そうしないとメンテナンスがどんどん複雑になってしまうでしょう。


さて、メニューを幅いっぱいに均等割して文字列を中心にそろえてみましょう。

ulのpaddingを0にして、liの幅を25%にすると共に、box-sizingをborder-boxにします。これで幅の均等ぞろえができます。

また、liにdisplay: table; を、aにdisplay: table-cell;を設定し、aにtext-align: center; とvertical-align: middle; を適用すると、中央揃えが簡単にできます。

また、回り込みの解除のためにulにclearfixを適用しています。これを省くと、ulに高さがないため、後続の要素のmargin-topがメニューに重複してしまい思い通りに行きません。

(下の例ではliにheigt:40px;も設定しています。)

WordPress CSS Coding Standards仮訳

この記事は2015年3月30日時点のWordPressのCSSコーディング基準(CSS Coding Standards)を仮訳したものです。

元々自分で使うために訳したため、翻訳が正確である保証が全くありません。確認を容易にするために原文を左側に、仮訳を右側に配置しています。全く自信がない役については(?)_ _(?)で囲んでいます。

CSS Coding Standards

Like any coding standard, the purpose of the WordPress CSS Coding Standards is to create a baseline for collaboration and review within various aspects of the WordPress open source project and community, from core code to themes to plugins.

いずれのコーディング規約と同様、WordPressのCSSコーディング規約の目的は、コアコードからテーマやプラグインまで、WordPressオープンソースのプロジェクトとコミュニティの様々な場面における共同作業とレビューのベースラインを作ることにあります。

Files within a project should appear as though created by a single entity. Above all else, create code that is readable, meaningful, consistent, and beautiful.

単一のプロジェクトのファイルは、一体的に見えなければなりません。何より、制作されたコードは読みやすく、分かりやすく、一貫性があり、そして美しくあるべきです。

Within core stylesheets, inconsistencies will often be found.

コアスタイルシートでは、時々矛盾が見られます。

We are working on addressing these and make every effort to have patches and commits from this point forward follow the CSS coding standards.

私たちはこれらの問題に取り組んでおり、CSSコーディング規約に沿った修正と関与に全力を尽くしています。

More information on the above and contributing to UI/front-end development will be forthcoming in a separate set of guidelines.

更なる情報を踏まえて、UI・フロントエンドの開発の独立したガイドラインに役立てる予定です。

Structure

There are plenty of different methods for structuring a stylesheet.

スタイルシートを構造化する方法はいくつもあります。

With the CSS in core, it is important to retain a high degree of legibility.

コアのCSSは、高い可読性を維持することが重要です。

This enables subsequent contributors to have a clear understanding of the flow of the document.

これは、後に続く貢献者に対して文書の流れを明解にすることにつながります。

  • Use tabs, not spaces, to indent each property. 
  • 個々のプロパティのインデントにはスペースではなくタブを使用してください。
  • Add two blank lines between sections and one blank line between blocks in a section.
  • 各セクションの間には2行の空白を、セクション内のブロックには1行の空白を入れてください。
  • Each selector should be on its own line, ending in either a comma or an opening curly brace. Property-value pairs should be on their own line, with one tab of indentation and an ending semicolon. The closing brace should be flush left, using the same level of indentation as the opening selector.
  • それぞれのセレクターはコンマまたは開いた中カッコで終わらせます。一組のプロパティと値は1つのタブでインデントされ、セミコロンで終了します。閉じカッコはセレクタの開始と同じインデントレベルで、左揃えにします。

Correct:

#selector-1,
#selector-2,
#selector-3 {
    background: #fff;
    color: #000;
}

Incorrect:

#selector-1, #selector-2, #selector-3 {
    background: #fff;
    color: #000;
    }

Selectors

With specificity, comes great responsibility.

特異なものには、大きな責任が伴います。

Broad selectors allow us to be efficient, yet can have adverse consequences if not tested.

ブロードセレクタは、大きな効果をもたらす一方、テストされていない場合は悪い結果をもたらすことがあります。

Location-specific selectors can save us time, but will quickly lead to a cluttered stylesheet.

場所に特有のセレクタは時間の節約になるが、すぐに散らかったスタイルシートにしてしまうでしょう。

Exercise your best judgement to create selectors that find the right balance between contributing to the overall style and layout of the DOM.

全体のスタイルとDOMのレイアウトのバランスの取れたセレクタの制作に対し、最善の判断を行うための訓練を積んでください。

  • Similar to the WordPress Coding Standards for file names, use lowercase and separate words with hyphens when naming selectors.
  • ファイル名は WordPress Coding Standards に従い、セレクタの命名には小文字でハイフンで区切られた単語を用いてください。
  • Avoid camelcase and underscores.
  • キャメルケースとアンダースコアは避けてください。
  • Use human readable selectors that describe what element(s) they style.
  • 要素とそれらのスタイルは人が読めるセレクタを用いてください。
  • Attribute selectors should use double quotes around values
  • 属性セレクタは、値を二重引用符で囲んでください。
  • Refrain from using over-qualified selectors, div.container can simply be stated as .container
  • 過剰な修飾セレクタの使用は控えてください。div.containerは.containerのようにシンプルにできます。

Correct:

#comment-form {
    margin: 1em 0;
}
 
input[type="text"] {
    line-height: 1.1;
}

Incorrect:

#commentForm { /* Avoid camelcase. キャメルケースは避ける */
    margin: 0;
}
 
#comment_form { /* Avoid underscores. アンダースコアは避ける */
    margin: 0;
}
 
div#comment_form { /* Avoid over-qualification. 過剰装飾は避ける */
    margin: 0;
}
 
#c1-xr { /* What is a c1-xr?! Use a better name. c1-xrとはなんでしょうか?より良い名前を使ってください */
    margin: 0;
}
 
input[type=text] { /* Should be [type="text"] と書くべきです。 */
    line-height: 110% /* Also doubly incorrect 2重に間違っています */
}

Properties

Similar to selectors, properties that are too specific will hinder the flexibility of the design.

セレクタ同様、特別すぎるプロパティはデザインの柔軟性を損ないます。

Less is more. Make sure you are not repeating styling or introducing fixed dimensions (when a fluid solution is more acceptable).

余計な物は無いほうがいい。スタイルの繰り返しや固定幅を引き起こすようなものはやめましょう(フルードの手法がよりやりやすいように)。

  • Properties should be followed by a colon and a space.
  • プロパティの後には一つのスペースとコロンを続けましょう。
  • All properties and values should be lowercase, except for font names and vendor-specific properties.
  • 全てのプロパティと値は、ベンダープレフィクスとフォント名を除いて小文字を用いなければなりません。
  • Use hex code for colors, or rgba() if opacity is needed. Avoid RGB format and uppercase, and shorten values when possible: #fff instead of #FFFFFF.
  • 色は16進コードか、半透明が必要な場合はrgba()を用います。RGBフォーマットと大文字は避け、可能ならば短くします。例えば、#FFFFFFのかわりに#fffというように。
  • Use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values as much as possible. (For a shorthand reference, see CSS Shorthand.)
  • background, border, font, list-stile, margin, padding の値には可能な限りショートハンド(まとめて指定する)を使用します。(ショートハンドのリファレンスは CSS Shorthandを確認してください。)

Property Ordering

“Group like properties together, especially if you have a lot of them.”
— Nacin

プロパティがたくさんある場合は特に、まとめてグループ化を-Nacin

Above all else, choose something that is meaningful to you and semantic in some way.

何よりも、意味が明確で構造的なものを選んでください。

Random ordering is chaos, not poetry.

ランダムな順序はカオスでありポエムではありません。

In WordPress Core, our choice is logical or grouped ordering, wherein properties are grouped by meaning and ordered specifically within those groups.

ワードプレスコアにおいて、私たちは論理的またはまとまった順序を選択します。具体的には、プロパティは意味とそれらのグループによって決められています。

The properties within groups are also strategically ordered to create transitions between sections, such as background directly before color.

プロパティはまた、colorの直前にbackgroundを配置する、というように戦略的にグループを決めています。

The baseline for ordering is:

順序のベースは以下のようです。

  • Display
  • Positioning
  • Box model
  • Colors and Typography
  • Other

Things that are not yet used in core itself, such as CSS3 animations, may not have a prescribed place above but likely would fit into one of the above in a logical manner.

CSS3のアニメーションのようにコアにまだ使われていないものは、定められた場所がまだありまりませんが、論理的なマナーに則って上記の一つに収まるでしょう。

Just as CSS is evolving, so our standards will evolve with it.

CSSは進化し続けており、私たちの基準もそれに伴い進化していきます。

Top/Right/Bottom/Left (TRBL/trouble) should be the order for any relevant properties (e.g. margin), much as the order goes in values.

関係するプロパティ(marginのような)に合わせて、Top/Right/Bottom/Left (TRBL/trouble)の順で値を記録します。

Corner specifiers (e.g. border-radius-*-*) should be top-left, top-right, bottom-right, bottom-left. This is derived from how shorthand values would be ordered.

border-radiusのような角の指定は、top-left, top-right, bottom-right, bottom-left(左上、右上、右下、左下)の順で行います。これはショートハンドの順番と同じです。

Example:

#overlay {
    position: absolute;
    z-index: 1;
    padding: 10px;
    background: #fff;
    color: #777;
}

Another method that is often used, including by the Automattic/WordPress.com Themes Team, is to order properties alphabetically, with or without certain exceptions.

自動整形やWordPress.comも含め、よく使われるほかの方法は、アルファベット順にすることです。

Example:

#overlay {
    background: #fff;
    color: #777;
    padding: 10px;
    position: absolute;
    z-index: 1;
}

Vendor Prefixes

Updated on 2/13/2014, after [27174]:

We use grunt-autoprefixer as a pre-commit tool to easily manage necessary browser prefixes, thus making the majority of this section moot.

私たちはこのセクションの議論の大部分を形作るものとして、 grunt-autoprefixer をブラウザのプレフィクスの管理に使用することを前提としています。

For those interested in following that output without using Grunt, vendor prefixes should go longest (-webkit-) to shortest (unprefixed).

以下にGrountを使わない場合の出力を示します。ベンダープレフィクスはもっとも長いもの (-webkit-) から短いものへ (unprefixed)の順とします。

All other spacing remains as per the rest of standards.

他のスペースは規格のほかの部分として残ります。

.sample-output {
    -webkit-box-shadow: inset 0 0 1px 1px #eee;
    -moz-box-shadow: inset 0 0 1px 1px #eee;
    box-shadow: inset 0 0 1px 1px #eee;
}

Values

There are numerous ways to input values for properties. Follow the guidelines below to help us retain a high degree of consistency.

プロパティの値の入力方法は数種類あります。高い一貫性を維持するために、次のガイドラインに従ってください。

  • Space before the value, after the colon
  • 値の直前、コロンの後にスペースを設ける。
  • Do not pad parentheses with spaces
  • スペースで()を埋めないでください。
  • Always end in a semicolon
  • 常にセミコロンで終了してください。
  • Use double quotes rather than single quotes, and only when needed, such as when a font name has a space.
  • スペースを持つフォント名のような必要性が無い限り、単一引用符よりも二重引用符を用いてください。
  • 0 values should not have units unless necessary, such as with transition-duration.
  • 0の値はtransition-durationのように、必要が無い限り、単位をつけないでください。
  • Line height should also be unit-less, unless necessary to be defined as a specific pixel value. This is more than just a style convention, but is worth mentioning here. More information:http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
  • line heightは特別なピクセル値が必要でない限り、単位をつけないでください。これは単なるスタイルの慣習を超えており、詳しくはhttp://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/を参照してください。
  • Use a leading zero for decimal values, including in rgba().
  • 小数点以下の値はrgba()も含め、0を付けてください。
  • Multiple comma-separated values for one property should be separated by either a space or a newline, including within rgba(). Newlines should be used for lengthier multi-part values such as those for shorthand properties like box-shadow and text-shadow. Each subsequent value after the first should then be on a new line, indented to the same level as the selector and then spaced over to left-align with the previous value.
  • 複数のコンマで分けられた値は、rgba()も含め、スペースか新しい行で分けてください。新しい行を使うときはbox-shadowやtext-shadowのようなプロパティのショートハンドのような値に用いるべきです。

Correct:

.class { /* Correct usage of quotes */
    background-image: url(images/bg.png);
    font-family: "Helvetica Neue", sans-serif;
}
 
.class { /* Correct usage of zero values */
    font-family: Georgia, serif;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),
                       0 1px 0 #fff;
}

Incorrect:

.class { /* Avoid missing space and semicolon */
    background:#fff
}
 
.class { /* Avoid adding a unit on a zero value */
    margin: 0px 0px 20px 0px;
}

Media Queries

Media queries allow us to gracefully degrade the DOM for different screen sizes.

メディアクエリは、異なるスクリーンサイズのためのDOMをきれいに縮小化することができます。

If you are adding any, be sure to test above and below the break-point you are targeting.

何かを追加したときは、あなたがターゲットにしたブレイクポイントの上下でテストを行ってください。

  • It is generally advisable to keep media queries grouped by media at the bottom of the stylesheet.
    • An exception is made for the wp-admin.css file in core, as it is very large and each section essentially represents a stylesheet of its own. Media queries are therefore added at the bottom of sections as applicable.
  • 一般的に、スタイルシートの最下部でメディアクエリをまとめることを勧めます。
    • 一つの例外は、コアのwp-admin.cssファイル用に作られたもので、それぞれのセクションで要点を表示します。メディアクエリはそれゆえ、そのセクションの下部に追加されます。
  • Rule sets for media queries should be indented one level in.
  • メディアクエリのルールセットは一段落としてください。

Example:

@media all and (max-width: 699px) and (min-width: 520px) {
 
        /* Your selectors */
}

Commenting

  • Comment, and comment liberally. If there are concerns about file size, utilize minified files and the SCRIPT_DEBUG constant. Long comments should manually break the line length at 80 characters.
  • コメントは自由です。ファイルサイズの懸念がある場合は、縮小化ファイルとSCRIPT_DEBUG定数を用います。長いコメントは手動で80字で改行する必要があります。
  • A table of contents should be utilized for longer stylesheets, especially those that are highly sectioned. Using an index number (1.0, 1.1, 2.0, etc.) aids in searching and jumping to a location.
  • 長いスタイルシートでは目次をつけましょう。それらに高いセクション性がある場合は特に。文字番号はその場所に飛ぶのに利用します。
  • Comments should be formatted much as PHPDoc is. The CSSDoc standard is not necessarily widely accepted or used but some aspects of it may be adopted over time. Section/subsection headers should have newlines before and after. Inline comments should not have empty newlines separating the comment from the item to which it relates.
  • コメントはPHPDocの形式で書きましょう。CSSDoc基準は必ずしも広く受け入れられていませんが、将来は採用されるかもしれません。セクションとサブセクションのヘッダーは、その前後に改行が必要です。インラインコメントは空白行で分離せずそれに関係するコメントを記述します。

For sections and subsections:

/**
* #.# Section title セクションのタイトル
*
* Description of section, whether or not it has media queries, etc. セクションの概要、あるいはメディアクエリの有無など。
*/
 
.selector {
    float: left;
}

For inline:

/* This is a comment about this selector これは、このセレクタに関するコメントです。 */
 
.another-selector {
    position: absolute;
    top: 0 !important; /* I should explain why this is so !important !importantが必要な理由を記述します。 */
}

Best Practices

Stylesheets tend to get long in length.

スタイルシートは長くなる傾向があります。

Focus slowly gets lost whilst intended goals start repeating and overlapping.

繰り返しと上書きにより、目的とは緩やかに失われていきます。

Writing smart code from the outset helps us retain the overview whilst remaining flexible throughout change.

賢くコードを書くことは、変化の間、柔軟さを失わず概要を維持することを助けるスタートになります。

  • If you are attempting to fix an issue, attempt to remove code before adding more.
  • あなたが問題を解決しようとするならば、コードを追加する前に削除しましょう。
  • Magic Numbers are unlucky. These are numbers that are used as quick fixes on a one-off basis. Example: .box { margin-top: 37px }.
  • マジックナンバーは不遇です。それらは一度限りしか使われません。例:.box { margin-top: 37px; }
  • DOM will change over time, target the element you want to use as opposed to “finding it” through its parents. Example: Use .highlight on the element as opposed to .highlight a (where the selector is on the parent)
  • DOMは将来変更されます。ターゲットのエレメントはその親を通して見つけられるようにします。例えば、要素上の.highlightは.highlight a に対して、そのセレクターを通しています。
  • Know when to use the height property. It should be used when you are including outside elements (such as images). Otherwise use line-height for more flexibility.
  • hightプロパティを使う際には、画像のように、そのエレメントの外側を囲んでいなければならない。他方、line-heightを使うほうが柔軟です。
  • Do not restate default property & value combinations (for instance display: block; on block-level elements).
  • デフォルトのプロパティと値の組合せを書き直してはいけません。(例えば、ブロックレベル要素にdisplay: block; を指定するなど)