ちゃんと CSS するためのスタイルガイド講座 taichi kaminogoya

ちゃんと CSS するためのスタイルガイド講座
taichi kaminogoya
• かみのごうやたいち
• 現在は Six Apart に勤務
• はてなの本（2004）
• ちゃんと CSS するための
スタイルガイド入門（2006）
CSS の基本をおさらい
継承
<p>やっぱり<strong>ゾウ</strong>が好き</p>
p
{
color:
yellow
}
やっぱりゾウが好き
カスケード
•
•
•
制作者スタイルシート（Web制作者）
ユーザースタイルシート（ユーザー）
デフォルトスタイルシート（ウェブブラウザ）
カスケード（! important）
•
•
•
•
•
ユーザースタイルシート（!imporatnt）
制作者スタイルシート（! important）
制作者スタイルシート
ユーザースタイルシート
デフォルトスタイルシート
セレクタの特定度
得点
0
1
10
100
1
10
10
合計点
セレクタ
全称
*
○
p
.memo
#memo
:after
:hover
[id=memo]
要素
class
id
疑似要素
疑似クラス
属性
0
○
1
○
10
○
100
○
1
○
10
○
10
セレクタの特定度
得点
0
1
10
100
1
10
10
合計点
セレクタ
全称
要素
class
id
疑似要素
疑似クラス
属性
特定度のサンプル
•
•
•
•
div (1)
div#hoge (101)
div.fuga (11)
div[id=hoge] (11)
特定度のサンプル
<div
class=”fuga”
id=”hoge”>ゾウラヴは緑になる</div>
div#hoge
{
color:
green;
}
div.fuga
{
color:
red;
}
div
{
color:
orange;
}
div[id=hoge]
{
color:
blue;
}
プロパティの継承に関係なく特定度の高い
div#hoge というセレクタでの指定が有効になる
この例の結果、ゾウラヴは緑になる
特定度のポイント
•
100個以上入れ子になったの要素タイプセレクタ
が id タイプセレクタよりも優先度が高くなること
ようなことはありません
•
セレクタの書き方を統一するルールを設定する
と、同じ特定度を保てる
HTML
マイひな形をもつ
•
•
ある程度の作業効率化
全体でなくても部分的にでもよい
HTML作成のポイント
•
•
•
一般的な文書を書く感覚でまずは HTML を作成
•
•
とりあえず必要最低限の要素で作成
見せたいものから順番に書く事を意識
例えばブログなら記事よりも先にメニューがあれ
これあるのはチョットオカシイ
必要に応じて追加すればよい
*
html
head
body
title
div.section
h1
div.section
h2
div.section
h3
div.section
p
h3
p
strong
a
div.section の入れ子
•
一つの見出し (hn) に一つの div
•
•
•
見出しの範囲を構造的に明示
見出しレベルが低くなるたびに入れ子に
見た目の分離と言うけれど…
•
CSS を書きやすい HTML を意識する事も大事
<div
class=”section”>
<h1>ちゃんとCSSするためのスタイルガイド入門</h1>
<div
class=”section”>
<h2>実践編</h2>
<div
class=”section”>
<h3>柔軟な構造のHTMLのメリット</h3>
<ol>
<li>CSS
Zen
Garden
から考えるHTMLテンプレート</li>
...
</ol>
</div>
<div
class=”section”>
<h3>様々な段組みを実現するCSSライブラリ</h3>
<ol>
<li>1カラムスタイル</li>
...
</ol>
</div>
</div>
</div>
•
XHTML 2.0 の section hn 構造を意識したもの
ではない
•
•
•
文書内の構造を示す為に利用
class 名はとりあえず考えなくて良い
実際に利用する時に
そのブロックの役割を id で示す
“
•
•
よいユーザー名は
すぐに思いつかない
株式会社はてな 水野氏
”
http://itpro.nikkeibp.co.jp/article/
COLUMN/20061218/257152/
“
•
•
よい class, id の値は
すぐに思いつかない
ウェブデザイナ 上ノ郷谷太一
http://2xup.org/
”
id, class のつけかた
正直、僕もけっこう悩みます
• CSS で装飾する事を頭からはずす
• 基本的に id を使う
• 各々の役割を示す名前をつける
• 同じ役割のものが出現する場合は class を
• 規則を作っても使えない時が多かったり…
あんまり使いたくないなあ
• sidebar
• upper, middle ...
ちょっとなやむけど…
• alpha, beta ...
• first, second ...
できれば避けたいな
• できれば役割を示す名前を
• ちなみに僕は…
英辞郎のお世話になる事が多いです
• id はページにひとつ
• class は複数あってもよい
• ひとつの要素に複数指定も可能
• その要素の役割を示すという考え方を
でもそんなに堅くならなくていいと思います
CSS の分割管理
• 管理効率の向上
- 修正箇所へのアクセススピード
- 目的別に分けることでデバッグしやすい
• サンプルサイト構築のスピードアップ
- 目的にあわせて組み合わせる
- ノウハウの蓄積にも
• 環境にあわせて
- 修正箇所へのアクセススピード
- 目的別に分けることでデバッグしやすい
common.css
ぬかみそ（nukamiso）
• ブラウザごとのデフォルトスタイルをリセット
• 各要素の振る舞いを設定
• 基本、要素タイプセレクタ (特定度1点) のみ
• 汎用ブロックにpaddingを設けるより、
主要ブロックレベル要素の左右にマージンを
設けるとちょっとデザインしやすくなる
<div>
<p>
p
{
margin:
1em
13px;
}
•
3ping.org - デフォルトスタイルの差異を無くす CSS
‣ http://3ping.org/2006/04/09/0747
•
Yahoo! UI - reset.css
‣ http://developer.yahoo.com/yui
• ブラウザのデフォルトスタイルを知る
• 必要最低限の定義でリセット＆調整
layout.css
• フレームワークにあわせたレイアウトの枠組み
• common.css とあわせればひとまずレイアウト
までは完成するところまで
• レイアウトの種類にあわせていくつか用意しても
良いかも
theme.css
• デザイン情報
• 細かいレイアウトの調整
• レイアウトの種類にあわせていくつか用意しても
良いかも
component.css
• 良く利用するスタイル定義を管理
• ノウハウの蓄積
こんなふうに
組み合わせれば
様々なタイプの CSS ファイルが作れる
•
•
実際これだけで効率化は正直難しいけど…
でも数パーセントの節約は可能
クリエイティブな部分に時間を割ける！
outline.css
• 要素の枠を表示するCSSファイル
• border を利用していないのでレイアウトに影響
しない
• デバッグ、要素の振る舞いの確認
•
一元管理するために CSS は
やっぱり外部ファイルで
•
特定度の高い style 要素、属性はその属性の存在
するページのみ有効なので極力利用しないことを
オススメ
import.css
@charset
"utf‐8";
@import
url("common.css");
@import
url("modules.css");
@import
url("theme.css");
CSS のかきかた
CSS の視認性を上げるわけ
•
CSS はそもそも柔軟なフォーマット
本当は、もともと human readable
•
編集者によってかきかたが違うと、それを整える
のに無駄な時間が発生してしまう
•
•
•
だれが見てもルールに基づいていれば読みやすい
ミスが減る
分割管理とあわせてさらに効率アップ！
おかんに部屋を片付けられて
どこになにがあるかわからなくなってしもた
セットフォーマットルール
•
•
•
複数のセレクタ指定の際はカンマのあと改行する
セレクタの後は一文字分の半角スペースのあと『 { 』
プロパティのは各々一行にまとめ、行頭には2も自分
の半角スペースでインデント
•
•
•
•
•
プロパティの後はスペース無しに『 : 』
『 : 』と値の間には一文字分の半角スペース
値の最後は『 ; 』で終了
『 } 』はインデントしない
セットごとに空白行を設ける
selector,
selector
{
property:
value;
}
selector
{
property:
value;
}
セレクタに関するルール
•
•
どこの誰かわかりやすく
単語の区切り文字は『 - 』で
プロパティに関するルール
•
•
結構ひとそれぞれ十人十色
仕様上の分類を基準に並べる
•
•
•
書く分類ごとのプロパティは仕様書通り
編集する可能性の高いものほど後に
簡略化プロパティは省略値がリセットされるので
使うプロパティをきめておく
•
margin, padding, background が無難
値に関するルール
•
•
•
0 には単位をつけない
line-height にも単位をつけない
外部ファイルの参照方法
•
•
パスの指定法
URIを引用符で囲まない
スタイルシートを書く時のガイドライン
http://2xup.org/log/2006/07/11-1956
CSS ハック
•
まずミスが無いか確認
•
•
magin とかやっちゃってないか
特定度をもう一度チェック
•
•
Validator 通しましょう
•
できるだけアップデートされない環境を対象に
高機能なエディタならsyntaxなどで書き間違いは
判る・減る
•
•
•
•
Vim (*)
SkEdit (Mac)
Intype (Win)
秀丸
試して使おう！ハック！ハック！
•
試して納得しないとコワいので試したものをまと
めて公開しています
•
http://xrl.us/uzad
• できれば Valid な方がいいよね
• やっぱり少ない方がいいよね
• というのを心がけるのも大切
ソースコードは
ソースコードは
未来の自分へのメッセージ
• グループにわかれて普段、作業をすすめて
いく上で気をつけている事などを共有し、
ルールをつくってみましょう。
• 全部決める必要はナッスゥイング
• 例えば簡略化プロパティを使うプロパ
ティと使わないプロパティなどを決める
だけでもオケイ
• 後ほど発表
• 質問も受け付けます
• ブログをお持ちの方はブログに書いてみま
せんか？（output）
• この講座参加者の方々向けの Wiki を用意
しました（share）
• 僕は今日いっぱいアウトプットしたので、
今度はみなさんからフィードバックが欲し
いです（input)
http://123.writeboard.com/f636b6a307b0a883d
pass: elepahntism
ありがとうございました
質問はその場で回答できない場合もありますが
個別にどうぞ