ちゃんと
CSSするための
スタイルガイド講座
Taichi Kaminogoya
about
•
かみのごうや たいち•
大阪府出身 東京都在中•
28歳 うお座 O型•
ゾウと写真が好き•
2xup.org を管理photo by timlovesbrian.
http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/
継承
•
DOM ツリー構造に沿って•
一定のルールで値を子要素に渡す•
子要素に特に指定の無い場合は継承された値に•
なんでもかんでも継承しません•
継承しないプロパティの値は初期値にDOM
html head body div.section title h1 div.section h2 div.section h3 p strong a div.section h3 p<p>やっぱり<span>ゾウ</span>が好き</p>
継承
やっぱりゾウが好き
p {
color: yellow;
}
やっぱりゾウが好き
<p>やっぱり<span>ゾウ</span>が好き</p>
継承
やっぱりゾウが好き
p {
color: yellow;
}
p span {
color: green;
}
やっぱりゾウが好き
やっぱり
ゾウ
が好き
継承
•
一定のルールで値を子要素に渡す•
子要素に特に指定の無い場合は継承された値に•
なんでもかんでも継承しませんカスケード
•
スタイルの競合を順位付けで解決•
3つのポイントで順位付け 1 重要度（複数のスタイルシート） 2 特定度（セレクタ） 3 順序（参照・記述）•
CSS の分割管理のキモ重要度
制作者スタイルシート（Web制作者） ユーザースタイルシート（ユーザー） デフォルトスタイルシート（ウェブブラウザ） 高 低重要度（
! important）
ユーザースタイルシート（! imporatnt） 制作者スタイルシート（! important） 制作者スタイルシート（Web制作者） ユーザースタイルシート（ユーザー） デフォルトスタイルシート（ウェブブラウザ） 高 低特定度
•
かみのごうや たいち•
大阪府出身 東京都在中•
28歳 うお座 O型•
ゾウと写真が好き•
2xup.org を管理 特定度が高い photo by taro-sanゾウラヴ
<p class=”hoge” id=”fuga”>ゾウラブ</p>
特定度
p { color: orange; }ゾウラヴ
ゾウラヴ
<p class=”hoge” id=”fuga”>ゾウラブ</p>
特定度
p { color: orange; } p#fuga { color: green; }ゾウラヴ
ゾウラヴ
ゾウラヴ
<p class=”hoge” id=”fuga”>ゾウラブ</p>
特定度
p { color: orange; } p#fuga { color: green; } p.hoge { color: red; } p[id=hoge] { color: blue; }ゾウラヴ
ゾウラヴ
ゾウラヴ
<p class=”hoge” id=”fuga”>ゾウラブ</p>
特定度
p { color: orange; } p#fuga { color: green; } p.hoge { color: red; } p[id=hoge] { color: blue; }ゾウラヴ
ゾウラヴ
特定度が高い 無効}
特定度
得点 0 1 10 100 1 10 10 合計点 セレクタ 全称 要素 class id 疑似要素 疑似クラス 属性 * ○ 0 p ○ 1 .fuga ○ 10 #hoge ○ 100 :after ○ 1 :hover ○ 10 [id=hoge] ○ 10ゾウラヴ
<p class=”hoge” id=”fuga”>ゾウラブ</p>
特定度
p { color: orange; } p#fuga { color: green; } p.hoge { color: red; } p[id=hoge] { color: blue; } 特定度が高い １点 101点 11点 11点カスケード
•
スタイルの競合を順位付けで解決•
3つのポイントで順位付け 1 重要度（複数のスタイルシート） 2 特定度（セレクタ） 3 順序（参照・記述）•
CSS の分割管理のキモphoto by Elsie esq.
http://flickr.com/photos/elsie/5136801/ http://creativecommons.org/licenses/by/3.0/
ボックスモデル
•
width, height•
margin•
padding•
border•
レンダリング領域ボックスモデル
コンテント
width
コンテント
ボックスモデル
マージン ボーダー パディングボックスモデル
マージン辺（外辺） ボーダー辺 パディング辺 コンテント辺（内辺）background
マージン辺（外辺） ボーダー辺 パディング辺 コンテント辺（内辺）背景（
background）
background
背景（
background）
背景（
background）
background（IE）
ボックスモデル（誤）
width height マージン ボーダー パディング コンテント問題
A の位置にあるボックスを B の位置に移動するには？
A
<div id="container"> <div id="content"> </div> <div id="navigation"> </div> </div>
div#container { width: 300px; height: 300px; padding‐top: 100px; background‐color: #ccc; } div#content { height: 200px; background‐color: #ddd; } div#navigation { height: 50px; width: 100px; background‐color: black; }
解答：絶対配置
•
position: absolute; top: 0; right: 0; で配置•
包含ブロックの左上を基準に指定された位置に配置される包含ブロック
•
CSS レイアウトのキモ•
基本的には配置する要素に最も近い祖先要素•
通常フロー, float, position: relative;, position: static;•
ルート要素（body, html）, position: fixed; の包含ブロックはブラウザの表示域
•
position: absolute; の時はこのあと解説包含ブロック
position: absolute; の場合
•
position プロパティの値が static 以外の要素のパディング辺•
該当するボックスが無い場合は初期包含ブロック (body）パディング辺
マージン辺（外辺） ボーダー辺 パディング辺 コンテント辺（内辺）包含ブロック
•
CSS レイアウトのキモ•
基本的には配置する要素に最も近い祖先要素•
通常フロー, float, position: relative;, position: static;•
ルート要素（body, html）, position: fixed; の包含ブロックはブラウザの表示域
•
position: absolute; の時はこのあと解説div#container { width: 300px; height: 300px; padding‐top: 100px; background‐color: #ccc; } div#content { height: 200px; background‐color: #ddd; } div#navigation { height: 50px; width: 100px; background‐color: black; } position: relative; position: absolute; top: 0; right: 0;
伝えたかった事
•
包含ブロック•
基本・ルールは大事。ずっと大事。•
トライ & エラーも大事•
一度は仕様書に目を通す（プロ意識）•
『うまくいかない = バグ』ではない•
ちなみにこれはハックでもないCSS Hack
•
表示の違いと整えるものではない•
うまくいかない部分を整える為に編み出された必殺技ではない•
特定のブラウザに対してスタイルを定義・継承させるものHack する前に
•
ミスが無いかチェック•
Validator 通しましょうHack する前に
•
ミスが無いかチェック•
Validator 通しましょうHack するなら
•
できるだけ少なく•
アップデートされない環境にむけて•
Valid な解決策を•
非対応セレクタの利用•
条件コメント•
やっぱり試して納得したものを（公開中）•
http://xrl.us/uzad•
仕組みを理解するために基本を学ぶ次はハックしたくなるポイント の話
Hack なポイント
•
IEの DOCTYPE スイッチあたりのバグ•
IE の float した方向にマージンを与えると倍（書籍88ページ）DOCTYPE スイッチ
•
ボックスモデルの解釈をスイッチ•
標準モード•
互換モード
ボックスモデル（標準モード）
マージン ボーダー パディング コンテント
ボックスモデル（互換モード）
マージン ボーダー パディング コンテントレイアウトのポイント
•
どうやら padding•
HTML に工夫（書籍74ページ）•
ボックスモデルをしっかり理解•
DOCTYPE スイッチを理解•
標準・互換モードが環境によって混在する環境を意識考え方を変える
•
混在する可能性がある•
ボーダー辺の内側に余白が欲しい
ボックスモデル（標準モード）
マージン ボーダー パディング コンテント
ボックスモデル（互換モード）
マージン ボーダー パディング コンテント
考え方を変える
ブロックボックス ブロックボックスのマージン
考え方を変える
<p> <h1> <div>h1, p { margin: 1em 13px; }
レイアウトのポイント
•
どうやら padding•
HTML に工夫（書籍74ページ）•
ボックスモデルをしっかり理解•
DOCTYPE スイッチを理解•
標準・互換モードが環境によって混在する環境を意識柔軟な骨組み
•
現在は構造を示す要素は無い•
見出しを div でコンテナ•
見出しにあわせて入れ子に•
分類する為に class=”section” <div class=”section”> <h1>heading 1</h1> <p>description</p> <div class=”section”> <h2>heading 2</h2> <p>description</p> </div> </div>div.section
•
XHTML 2.0 の section, hn 構造を意識したものではない•
文書内の構造を示す為に利用•
class 名はとりあえず考えなくて良い•
必要があれば属性を追加•
分類したい場合は class を追加（複数指定可能）•
識別したい場合は id を追加考え方を変える
•
カラム落ち•
余計なハック•
あきらめる <div class=”section”> <h2>heading 2</h2> <p>description</p> </div>
考え方を変える
<p> <h2> <div class=”section”>h2, p { margin: 1em 13px; }
ボックスモデル問題の解決
•
シンプルな構造•
ほとんどのブロック要素に•
common.css などで定義しておく•
公開するものにも適用しています•
必要に応じて上書き•
ボックスモデルに関する CSS ハックはこれで軽減できそう•
さまざまなレイアウトサンプルは書籍 79 ページから common.css を見せるCSS の分割管理
•
書籍 96 ページ•
管理効率の向上管理効率の向上
•
修正箇所へのアクセススピードアップ合体ロボットのように
•
目的別に用意されたスタイルシートファイルを合体•
様々な環境向けスタイル基礎づくりの省力化•
サンプルサイトの構築スピードアップ合体ロボットのように
•
目的別に用意されたスタイルシートファイルを合体•
様々な環境向けスタイル基礎づくりの省力化•
サンプルサイトの構築スピードアップデバッグツールとしても
•
要素の枠を表示•
id や class の名前を表示common.css
•
通称: ぬかみそ•
ブラウザのデフォルトスタイルに上書き•
基本的に要素タイプセレクタのみ•
どこでも使える•
色情報は無しlayout.css
•
フレームワークにあわせたレイアウトの枠組み•
様々なレイアウト用に複数用意するtheme.css
•
デザイン情報担当component.css
•
良く利用するスタイル定義をまとめて管理•
複数のセレクタに同じ指定を行う場合に便利•
clearfix と呼ばれているものclearfix ってなによ？
•
float するオブジェクトの包含ブロックが縮むのを解決•
該当する包含ブロックの後に要素が無い時に•
包含ブロックの後に疑似要素を設けてそれで解決•
<div class=”clear”></div> とか <br clear=”both” /> の代わりdiv.content { width: 100px; float: left; } div.menu { width: 100px; float: right; } div.footer { clear: both; } div.content div.menu div.section div.footer
float するオブジェクトの包含ブロックは縮む
解決
その１（後に要素がある）
float するオブジェクトの包含ブロックは縮む
解決
その2（後に要素がない）
div.content div.menu div.section div.section { } div.content { width: 100px; float: left; } div.menu { width: 100px; float: right; } overflow: auto; IEは効果無しdiv.section { ... } div.content { ... } div.section:after { content: '.'; visibility: hidden; clear: both; display: block; height: 0; } div.content div.menu div.section div.section:after IEは非対応
float するオブジェクトの包含ブロックは縮む
解決
その3（後に要素がない）
div.section { } div.content { ... } div.section:after { content: '.'; visibility: hidden; clear: both; display: block; height: 0; } zoom: 1; IE独自実装 div.content div.menu div.section div.section:after
float するオブジェクトの包含ブロックは縮む
解決
その3（後に要素がない・解決案）
IE以外clearfix ってなによ？
•
float するオブジェクトのある•
overflow: auto; で解決できない場合に利用する•
float で移動したブロックに回り込むのを解除する•
clear: left; , clear: right; , clear: both;•
<div class=”clear”></div> の代わりclearfix ってなによ？
•
float するオブジェクトの包含ブロックが縮むのを解決•
該当する包含ブロックの後に要素が無い時に•
包含ブロックの後に疑似要素を設けてそれで解決•
<div class=”clear”></div> とか <br clear=”both” /> の代わりoutline.css
•
要素の枠を表示する CSS ファイル•
ボックスモデルに影響を与えないで要素領域を確認CSS って読みやすい
•
書籍 102 ページ•
CSS を知らない人でも何となく意味がわかる•
例えば background-color: black;柔軟なフォーマット
•
だれでも書き方に癖がある•
案件によって書き方がちがう•
書き方が違うとチョットキモチワルイ•
スパゲッティになっちゃう•
ルールが必要やねルールがあれば
•
作業効率が上がる•
書き整える必要なし•
修正箇所へのアクセスピンとこないかもしれないので
例を用意してみました
あんたー
部屋散らかってたから
片付けといたでー
えええっ
なんでそんなことすんねん！
アレはアレで
そんなもんしらんわ！
マンガは片付けてないし
足の踏み場もなかったわ！
オキャン
…。最バク…。
うぉお。
めっさ片付いてる
…。
まあキレーになったから
ええか。
さて。
昨日途中まで読んだ
ボクの
キテレツ大百科
2 巻
どこいったんやー！
専用の箱に
オキャン！
ボクの
キテレツ大百科
2 巻
あ、それやったら
本棚の『マンガ日本の歴史』の
裏に並べたわ
せやかて
どこに直すか知らんねんもん
あたし。なんしか。
お。あったわ
…。
しかしショック！
個人的にキテレツの横は
『魔太郎がくる』やのに
•
オカンは迷わず片付けできる•
整理しなおす必要がなくなる•
どこにあるか探す時間が減る•
ちうかそもそも散らからない•
作業効率が上がる•
書き整える必要なし•
修正箇所へのアクセス•
ちうかそもそもミスが減るルールがあれば
セットフォーマットルール
•
複数のセレクタ指定の際はカンマのあと改行する•
セレクタの後は一文字分の半角スペースのあと『 { 』•
プロパティのは各々一行にまとめる•
行頭には2も自分の半角スペースでインデント•
プロパティの後はスペース無しに『 : 』•
『 : 』と値の間には一文字分の半角スペース•
値の最後は『 ; 』で終了•
『 } 』はインデントしない•
セットごとに空白行を設けるセットフォーマットルール
selector,
selector {
property: value;
}
selector {
property: value;
}
セレクタに関するルール
•
どこの誰かわかりやすくプロパティに関するルール
•
仕様上の分類を基準に並べる•
書く分類ごとのプロパティは仕様書通り•
編集する可能性の高いものほど後に•
簡略化プロパティは省略値がリセットされるので 使うプロパティをきめておく値に関するルール
•
0 には単位をつけない•
line-height にも単位をつけない（書籍117ページ）•
外部ファイルの参照方法•
パスの指定法•
URI を引用符で囲まないソースコードは
共有しませんか？
•
みなさんが気をつけている事•
個人•
チーム•
後ろ前の席の人と共有•
なにか小さな事ひとつでも決めてみましょう•
時間があれば後ほど発表最後に
•
今日決めた事をブログに書いてみませんか？•
アウトプット = インプットのチャンス•
Wiki を用意しています•
今日紹介した CSS ファイル•
サイトの URL•
みなさんも追加してみてくださいhttp://xrl.us/vfsm
elephantism
photo by Orin Optiglot.
http://flickr.com/photos/orinrobertjohn/239595034/ http://creativecommons.org/licenses/by/3.0/
