basic css introduction
TRANSCRIPT
コーディング研修CSSについて
コーディング研修
早川 稔
アジェンダ• CSSとは
• CSSの記述方法
• セレクタの指定
• CSSの適用方法
• ボックスモデル
• CSS使うことのメリット
• CSSでできること
• レスポンシブWebデザイン
• CSS設計
CSSとは
CSSとは
HTMLやXMLで記述された文書の体裁や見栄えを 表現するために用いられるスタイルシート言語
文書構造と体裁を分離させるという理念 を実現するために提唱された仕様
<div><center> <font size="2">CSS</font></center>
<p><font color="red">CSS</font>は、HTMLやXMLで記述された文書の体裁や見栄えを表現するために用いられるスタイルシート言語</p></div>
HTML要素には見栄えを指定するための要素が存在していた
CSSの概念
CSSの概念
HTML HTML HTML
閲覧用 印刷用 他のデバイス用
閲覧用、印刷用、他のデバイス向けのデザインに合わせたHTMLをそれぞれ用意しなければならない
デザイン部分をHTMLに記述していると..
以前
HTML
文章構造
デザイン
標準
HTML
文章構造
CSS
デザイン+
CSSの概念
「文章構造」と「デザイン」を切り離す考え
CSSの概念
HTML
CSS CSS CSS
閲覧用 印刷用 他のデバイス用
デザイン部分をCSSに任せることでメンテナンス性は大きく向上する
※：スマホ用、タブレット用のそれぞれのHTMLを用意することが良い場合があるため、この概念が適用できない場合もあります。
• CSS level 1(CSS 1.0) 1996年12月
• CSS level 2(CSS 2.0) 1998年5月
• CSS level 2 revision 1 (CSS 2.1) 2011年6月
• CSS level 3 (CSS 3) • 全体がモジュール化されたため、統合された仕様は存在せず
• CSS Color Module Level 3 2011年6月 • Selectors Level 3 2011年9月 • Media Queries Level 3 2012年6月
• CSS Level 4 (CSS4) • Selectors Level 4 草案 • Media Queries Level 4 草案
CSSとは
CSSのバージョン
CSSの記述方法
CSSの記述方法
p { margin: 0; }
セレクタ (selector)
プロパティ (property)
値 (value)
{ }(中括弧)の部分を宣言ブロック、もしくはブロックという
CSSの記述方法
p { margin: 0; padding: 0; color: red; }
複数のスタイル指定
セミコロンで区切って記述
セレクタの指定
セレクタの指定
セレクタとは
スタイルを適用する対象を指定するもの
p { ・・・・ }
この部分
CSSの記述方法
セレクタの種類
Selectors Level 3 http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/
CSSの適用方法
CSSの適用方法
1. style属性を用いて、各要素に直接指定する
2. head要素の範囲内に、style要素によって指定する
3. head要素の範囲内で、link要素によって外部ファイルとして読み込む
CSSの適用方法
1. style属性を用いて、各要素に直接指定
CSSの適用方法
<div style="margin: 0;">要素</div>
※：構造と体制が分離されないため推奨されない
2. head要素の範囲内に、style要素によって指定
CSSの適用方法
...<head> <style> div {
margin: 0; } </style></head><body>...
※：HTML内に書くため、メンテナンスを考慮するとなるべく避けた方がよいが、パフォーマンス(#1)の点で有効な場合もある。 参考(#1)：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
CSSの適用方法
3. head要素の範囲内で、link要素によって外部ファイルとして読み込む
■HTMLファイル ...<head> <link rel="stylesheet" href="style.css"></head><body>...
■CSSファイル div {
margin: 0;}
※：CSSを外部ファイル化するのが一般的
ボックスモデル
• 内容領域（Content Area ）
• マージン領域（Margin Area）
• パディング領域（Padding Area）
• ボーダー領域（Border Area）
ボックスモデルとは
ボックスモデルの概念
ボックスモデルの概念
内容領域 （Content Area）
パディング領域（Padding Area）
ボーダー領域（Border Area）
マージン領域（Margin Area）
すべての要素は、ボックスと呼ばれる四角形の領域を生成します
ボックスモデルの概念
内容領域（Content Area）
• テキストや画像などが表示される領域
• 幅はwidthプロパティ、高さはheightプロパティを指定する事で任意の幅と高さにする事ができる
• 背景画像や背景色の指定がある場合、内容領域とパディング領域に背景が適用される
パディング領域（Padding Area）
• 内容領域とボーダー領域の間にある余白
• パディングの指定は、paddingプロパティでサイズ指定する
• 背景画像や背景色の指定がある場合、この領域にも背景が適用される
ボックスモデルの概念
ボーダー領域（border Area）
• パディング領域の外側にある領域
• 「線」のための領域
• 各borderプロパティによって線の種類（border-style）、サイズ（border-width）、色（border-color）を指定できる
ボックスモデルの概念
マージン領域（margin Area）
• ボックスの最も外側にある余白部分
• マージンの指定は、marginプロパティでサイズ指定を行う
• マージン領域には背景が適用されない
ボックスモデルの概念
CSSを使うことのメリット
1.メンテナンスの向上
2.パフォーマンスの向上
3.Retina向けの対応を気にしなくてよい（スマートフォンサイトの場合）
CSSを使うことのメリット
メンテナンスの向上 パフォーマンスの向上
CSSを使うことのメリット
角丸 透過
グラデーション ドロップシャドウ
CSSを使うことのメリット
よく採用されるデザイン要素
IE6が主流の時代
CSSを使うことのメリット
• 角丸
• ドロップシャドウ
• グラデーション
• 透過
画像を使うしかなかった} CSSを使うことのメリット
• 角丸やドロップシャドウのあるブロックを表現するために画像パーツが必要
• 修正が入ると、画像修正と画像差し替えのタスクが発生する ⇒ デザイナー、エンジニアのタスク増
• 画像パーツが増えるとページ容量が増え、表示速度に影響がでる ⇒ HTTPリクエストが増加する
• 画像の場合、可変幅に対応することが大変 ⇒ 幅がスクリーンサイズによって異なるリキッドレイアウトには 不向きな場合がある
CSSを使うことのメリット
• 通信プロトコルの一つ
• インターネット上でWebサーバーとクライアントが、相互に通信するために使用される仕組み
HTTPリクエスト
CSSを使うことのメリット
HTTPリクエスト数（画像ファイルやCSSファイルなどのリソースの数）が多いとサイト表示に影響がでる
CSSを使うことのメリット
39リクエスト 表示に1.15秒
405リクエスト
某サイトA
某サイトB
表示に8.66秒
• CSSスプライト
• CSSファイルやJSファイルをまとめる
• CSS、JS、画像を圧縮する
余談
HTTPリクエスト数を抑える手法
モバイル時代のWebパフォーマンス http://www.slideshare.net/yoshikawa_t/web-38508917
CSSでできること
CSS3の登場
• 角丸
• ドロップシャドウ
• グラデーション
• 透過
CSSでできること
CSSでできるようになった}
• 角丸やドロップシャドウのあるブロックを表現するために画像パーツが必要 不要
• 修正が入ると、画像修正と画像差し替えのタスクが発生する ⇒ デザイナー、エンジニアのタスク増 減
• 画像パーツが増えるとページ容量が増え、表示速度に影響がでる ⇒ HTTPリクエストが増加する
• 画像の場合、可変幅に対応することが難しい ⇒ 幅がスクリーンサイズによって異なるリキッドレイアウトには不向き
CSSを使うことのメリット
HTTPリクエストが減り、サイト表示速度が向上する
CSSを使ってブラウザで描画できる要素はCSSに任せる
CSSのみ修正
減ると 減り
難しくない
対応しやすい
でない
CSSでできること
• 文字サイズ、要素サイズの指定
• 文字色、背景色の指定
• 文字のスタイル（太字、斜体）の指定
• 罫線、点線の描画と色、サイズ指定
CSSでできること
• 行間、文字間の指定
• フォントの指定
• リストの行頭文字の指定
• 要素の配置
CSS2.1以前から表現できる要素
• 角丸
• ドロップシャドウ
• グラデーション
• 透過
• 枠線（画像）
• マスク
CSSでできること
• テキストシャドウ
• Webフォント
• トランスフォーム
• アニメーション
• 背景画像（複数）
• メディアクエリ
CSS3の登場によりCSSでできるようになった要素
角丸 ドロップシャドウ テキストシャドウ グラデーション
CSSでできること
• CSS 2.1以前では画像を使うしかありませんでしたが、CSS3の登場により画像無しで描画ができるようなった
• そのため、修正が入ってもその手間は以前ほど大きくない
CSSでできること
角丸、ドロップシャドウ、テキストシャドウ、グラデーション
※：テキストシャドウについてはCSS2の仕様に盛り込まれていましたが、ブラウザの実装がバラバラだったため、CSS2.1で削除され、CSS3で再定義されました。
• CSS 2.1以前では、ひとつのセレクタに対して、背景画像は一つしか指定することができなかった ➡重ねて表示するためのHTMLを追加していた
• CSS3よりひとつのセレクタに複数の背景画像を指定することが可能となった ➡重ねて表示するためのHTMLを書かなくよくなった
CSSでできること
背景画像（複数）
ボーダーイメージ
CSSでできること
• CSS 2.1以前では直線、破線、二重線などの罫線の種類、色やサイズの指定のみ • デザイン性の高い罫線を使う場合は、背景画像として指定 • 可変するブロックに対応することが難しい場合がある
• CSS3より、背景画像としてではなく、ボーダー領域のみに画像を指定できるようになった
• 可変するブロックにも対応可
ボーダーに画像を使う（ボーダーイメージ）
CSSでできること
マスク
CSSでできること
CSS Masking http://www.html5rocks.com/en/tutorials/masking/adobe/
アニメーション
CSSでできること
• 要素に動きを付けるためには、JavaScriptで実装するしかなかった
• CSS3よりCSSアニメーションがサポートされ、CSSのみで動きを付けることが可能となった
CSSでできること
アニメーション
http://daneden.github.io/animate.css/
CSSでできること
様々なアニメーションが確認できます
アニメーションの実例
要素に変化を付けれる
トランスフォーム（変形処理）
CSSでできること
• 画像やボックスなどの要素に拡大・縮小、移動、傾き、回転といった変形処理を指定できる
トランスフォーム（変形処理）
CSSでできること
トランスフォームの例
http://desandro.github.io/3dtransforms/参考
3D
CSSアニメーションとともに使うとflipの動きもできる
CSSでできること
※：3D Transformsは現時点でAndroid2.3は未対応、IE11でも完全ではありません
メディアごとにスタイルシートを適用
CSSでできること
• CSS2.1以前ではメディアタイプと呼ばれる機能
• PCのスクリーン、印刷、テレビなどのメディアごとにスタイルシートを指定する機能
メディアタイプ
CSSでできること
<!-- スクリーン向けのCSS --><link rel="stylesheet" type="text/css" media="screen" href="style.css"><!-- 印刷向けのCSS --><link rel="stylesheet" type="text/css" media="print" href="print.css">
メディアタイプの例
• CSS3よりメディア依存のサポートが強化され、メディアクエリという仕様になった
• 画面サイズや解像度などに応じて適用するスタイルを切り替える機能
• レスポンシブWebデザインを実現する手法の1つ
CSSでできること
メディアクエリ
➡ 現在、Media Queries Level 4で策定中
CSSでできること
メディアクエリの将来
Media Queries Level 4の仕様書（英語） http://www.w3.org/TR/mediaqueries-4/
将来的には
• JavaScript有効無効環境
• マウスなどのポインターデバイスが有効なデバイス
Webフォント
CSSでできること
• CSSでは文字周りは貧弱
• 閲覧環境にインストールされたフォントのみ
• デザイン性のあるフォントを使う場合、画像化文字を使うしかなかった
Webの文字周り
CSSでできること
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ＰGothic", sans-serif;
これまでのフォントの指定の例
CSSでできること
• フォントファイルさえあれば、好きなフォントでテキストデータとして表示が可能
Webフォント
CSSでできること
小田原市
AOI Pro. Inc.
BA(ビジネス・アーキテクツ)
• フォントデーターは著作物なので著作権がある
• ライセンス的に問題ないか確認する必要がある
• 日本語フォントの容量の多さ
• フォントフォーマットの対応度の差異
Webフォントの注意点
CSSでできること
WOFF TrueType OpenType EOT SVG
iOS5～ ○ ○ ○ × ○
Android2.2～ × ○ ○ × ×
Android3～ × ○ ○ × ○
Chrome ○ ○ ○ × ○
Firefox ○ ○ ○ × ×
IE9～ ○ ○ ○ ○ ×
IE8 × × × ○ ×
CSSでできること
これらのWebフォントの手間を軽減する方法
CSSでできること
CSSでできること
クラウドフォントサービス
Google Web Fonts （欧文フォントのみ）
http://www.google.com/fonts/
Adobe Edge Web Fonts （欧文フォントのみ）
http://html.adobe.com/jp/edge/webfonts/
CSSでできること
他のWebフォントの活用事例
CSSでできること
Webアイコンフォント
まとめ• CSSは「文章構造」と「デザイン」を 分離させるという理念で誕生した
• CSS3の登場でCSSだけで表現できることが増えた
• CSSで表現が難しい場合は画像を使うことでより表現の幅が広がる
• とはいえ画像の多用はサイト表示に影響をすることを忘れずに
CSSでできないこと
運用におけるCSS
• CSSは簡単に書ける
CSS設計
CSSのメリット
CSSのデメリット• コードが肥大化しやすい
• メンテナンス性の低下
• 技術取得は容易
• 表示させるだけだとなんとかなる
• CSSは簡単に書ける
• このファイル何？？ • Nobody knows......一番困るのは後任者
• 同じようなスタイルが増えていく • もはや管理不能なレベルに陥る • HTMLの保守にも影響がでる
• 他のページでレイアウト崩れが発生 • 修正しても修正しても....... • 修正作業よりも確認作業のほうに時間が取られる
CSS設計
メンテナンス性が不足しているCSSの末路
• 設計をしっかりとする
• 単にコードを書くだけではなくプロジェクトの開始時から関与していく
• IA、デザイナー、エンジニアの相互コミュニケーションは必要不可欠
CSS設計
それを回避するためには....
要件定義
設計
実装
検証
デザイン
ここから関わる
ある程度、コードやファイルが増えていくのは仕方ないこと 多少のメンテナンス性が低下するのも起こりうる
CSS設計
その度合いを減らように保守していくことが大事
そのためには、プロジェクトに関わる人全員がそのサイトに対する共通ルールと共通認識が必要
とはいえ運用フェーズだと....
スタイルガイド
CSS設計
スタイルガイドとは
• サイト全体に関する決めごとをまとめたもの
• コーディングの仕様
• デザインの決めごと
これを無視すると破綻の道を辿っていく
詳しくは次回！！
