CSS3

CSSガイドライン

2015年12月1日

CSS設計の基本

明瞭性、再利用性、保守性を意識したCSS設計を行ってください。

明瞭性
読みやすく、理解しやすい記述、構成を心がけます。
再利用性
既存のパーツから新しいコンポーネントを簡単に作成できるように心がけます。
保守性
新しいコンポーネントや機能の追加・更新が簡単に行える設計になっているように心がけます。

CSSバリデーション

設計後はCSSが適切に記述されているか必ずバリデーションチェックをしましょう。

基本書式

セレクタセットは要素セレクタを省略した以下の書式が基本です。

.クラスセレクタ {
プロパティ: 値;
}
サンプル
#main {
width: 500px; height: 800px;
line-height: 1.5;
}
  • セレクタ名の後はスペースなどの空白文字を挟まずにブレース( { )を続ける。
  • 各プロパティはタブでインデントする。
  • プロパティ名に続けてコロン( : )を入力し、コロン( : )と値の間にスペースを1つ挟む。
  • 各プロパティを改行で区切る。
    marginpaddingwidthheightのようなセットとして設定することが多いプロパティは並べても良い。
  • 値の後は、必ずセミコロン( ; )で明示的に終了を宣言する。
  • インデントとして、タブ文字を使います。

色の単位

シャープ( # )に続けて、RGB値の各値を6桁の16進数(0~f)で指定します。

body {
color: #000000;
}

フォントの単位

フォントの単位は rem を推奨します。

html { font-size: 62.5%; }
body { font-size: 1.0rem; }
h1 { font-size: 2rem; }

上記では、基準になるフォントサイズを 10px (62.5%)に設定しています。
BODY要素は 10px、H1要素は 20px になります。

ここで、基準になるフォントサイズをパーセントで指定するための方法を紹介します。
ブラウザのデフォルトのフォントサイズは 16px なので、フォントサイズを 10px に設定したい場合は 10÷16=0.625 、つまり FONT-SIZE の値として 62.5% を指定すればよいことになります。

※わざわざ px ではなくパーセントにする理由ですが、px などの絶対値での指定だと一部のブラウザで拡大・縮小が効かなかったり、フォントサイズの変更をブラウザ側で行えないといったことがあったためです。

要素の親子関係

セレクタを定義していく際、1つの要素の中に複数の要素が含まれることがよくあり、それを要素の親子関係と呼びます。例えばDIV要素はブロック要素ですので、その中にさらにDIV要素や、インライン要素のSTRONGIMGが含まれることがあります。

サンプル
#main{
width: 500px; height: 800px;
line-height: 1.5;
}
#main .box-info{ ... }
.box-info .box-in{ ... }

要素が親子関係にある場合は、親に続いて子となる要素を定義し、親よりも1段インデントをつけるようにします。

また、子要素を定義する際に親要素の名称を明記しても良いですが、パフォーマンスに影響がないように2階層以上の親は記載しないようにしましょう。たとえば下記のように親の親まで書く必要はありません。

#main .box-info .box-in { ... }

ID/CLASSの命名規則

意味が分かる程度に短いID/CLASS名にする

ID/CLASS名に指定する単語は意味が分かる程度まで短縮しても良いです。
他の人が見てわかりにくい短縮は避けましょう。
ただし、単語1文字のクラス名は予期せぬ重複設定になりやすいので避けてください。

#global-navigation {
...
}
↓
#g-nav {
...
}

小文字表記

セレクタ、プロパティ、値等全て、小文字で表記します。

ID/CLASSの区別

1ページの中で明確に1つしか使わないコンテンツブロックに限り、ID属性を利用します。複数使う場合、使う可能性がある場合はCLASS属性を利用します。

IDやCLASSの名称に使える文字

IDCLASSの名称に使える文字は、英数字、ハイフン(-)、アンダースコア( _ )に限ります。ハイフンとアンダースコアに関しては、単語の区切りとして使います。
特に理由がなければハイフンを使ってください。

.main-contents{
}

状態を示すクラス名

状態を示すクラス名には is- プレフィックスを付けます。

.is-enable {
...
}

ID/CLASSの名前リスト

ID/CLASSの名前にはなるべくレイアウトやUI上の意味があるような名前をつけるようにしてください。
また、色を示す red、フォントの太さを示すboldなどの視覚情報はなるべく避けましょう。

レイアウト枠・範囲
コンテナid/class名
全体コンテナcontainer / wrapper
ヘッダーheader
フッターfooter
コンテンツcontents
メインコンテンツmain
区分division
レイアウト用枠area / box / unit
内側(入れ子構造)inner
サイドバーsidebar
カラムcol
レイアウトlayout
グリッドgrid
パーツ
グローバルナビglobal-nav
ローカルナビlocal-nav
ロゴlogo
パンくずナビtopicpath
カテゴリcategory
検索search
メニューmenu
項目item
リストlist
次へnext
前へprev
区切り線sep
エントリーentry
タブtab
オプションoption
ページトップpagetop
アップロードupload
ボタンbtn
バナーbnr
詳細へmore
必須require
エラーerror
モジュールmodule
情報
キャッチコピーcatch
コピーライトcopyright
メインビジュアルmv
イントロダクションinstruction
案内guide
概要outline
要約summary
リード文lead
コメントcomment
説明description
話題topic
ピックアップpickup
注目情報spotlight
お知らせinfo
ニュースnews
更新情報update
履歴、沿革history
プロフィールprofile
質問faq
お問い合わせcontact / inquiry
ご注意attention
警告alert
日付date
キャプションcaption
図版fig
注釈notes
現在位置current

ルール

限定セレクタ

IDCLASSを定義する際にセレクタ指定をすると見つけやすくなりますが、反面、パフォーマンスを低下させてます。
どの要素で使っているのかわかりやすくしたい場合、限定セレクタを使う代わりに、要素名をコメントにすると良いでしょう。

/*div*/#examples{ … }
/*ul*/.entry{ … }

ショートハンドプロパティ

bordermargin等のプロパティはtop/bottom/left/right等に分割して書くことができますが、まとめて定義します。
/* OK */
.box {
border-top: 0;
margin: 10px auto;
font: 100%/1.5 serif;
}
/* NG */
.box {
border-top-style: none;
margin-top: 10px;
margin-left: auto;
margin-bottom: 10px;
margin-right: auto;
font-family: serif;
font-size: 100%;
line-height: 1.5;
}

ゼロ以下の小数は接頭の0を省略

ゼロ以下の小数を指定する場合、接頭の0は省略します。

font-size: .6em;

数値ゼロは単位を省略

プロパティの値として0を指定する場合は、単位は省略します。

.box {
margin: 0;
}

プロパティの順番

一番上になるのが、displaypositionfloatなどレイアウトに関係するプロパティを含むビュジュアルフォーマット。次に、marginpaddingといった余白の調整、ボックスの幅と高さを指定するwidthheightという順番になります。

  1. display/position/float類
  2. margin/padding類
  3. width/height類
  4. ボックスモデル類
  5. 背景/前景類
  6. テキスト類
  7. フォント類
  8. その他
div#main{
margin: 0; padding: 0;
width: 100px; height: 100px;
border: 1px solid #000;
background: url("bg.gif") repeat;
color: #00ff00;
text-align: right;
font-size: 80%; font-weight: bold;
}

※プロパティの順番は可読性を高めるためのもので、コーディング作業に影響するほど厳密に守る必要はありません。

コメントの記入方法

セクション毎に区切り線を入れて見やすくしてください。

/*###############################################
コンテナ領域
###############################################*/
div#container { ... }

上記以下の部位は下記のように宣言の前にコメントでID、もしくはCLASS名を記述します。

/* rss_list */
div.rss_list { ... }

CSSハック

CSSハックは、下記のみ使用可能とします。

Win IE 6以前用ハック
* html セレクタ { ... }
Win IE 7用ハック
*:first?child+html セレクタ { ... }

宣言の重複を避ける

例えば背景画像だけが違うセレクタを下記のように宣言するのは冗長です。

.box01 {
margin: 20px auto;
width: 80%;
background: url("bg01.gif") repeat-y left top #fff;
}
.box02 {
margin: 20px auto;
width: 80%;
background: url("bg02.gif") repeat-y left top #fff;
}

下記のようにまとめるべきです。

.box01, box02 {
margin: 20px auto;
width: 80%;
background: url("bg01.gif") repeat-y left top #fff;
}
.box02{
background-image: url("bg02.gif");
}
そのほかのガイドライン
  • CSSファイルは可能な限り1つにまとめる。
  • POSITIONプロパティのabsoluterelativeは可能な限り使わない。
  • 画像は可能な限りCSSスプライトを使って1つにまとめる。
  • ブロック間のマージンはmargin-bottomで表現する。なるべく、margin-topmargin-bottomを混在させない。
  • 文章構造上意味のないDIV要素はなるべく使わない。
  • line-heightの値には1.5など実数を指定する。
  • @importはパフォーマンス低下の原因になるので、可能な限り使わない。
  • ユニバーサルセレクター(*{})はパフォーマンスの低下になるので使いません。
  • !importantでトラブルを解決するのは避け、リファクタリング(コードの整理)で解決するようにします。

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!