Basic CSS Introduction
•
1 j'aime•513 vues
This is Basic CSS Introduction for Designers, Coders.
Recommandé
Contenu connexe
Similaire à Basic CSS Introduction
Similaire à Basic CSS Introduction (20)
Basic CSS Introduction
- 2. アジェンダ • CSSとは • CSSの記述方法 • セレクタの指定 • CSSの適用方法 • ボックスモデル • CSS使うことのメリット • CSSでできること • レスポンシブWebデザイン • CSS設計
- 3. CSSとは
- 6. CSSの概念 HTML HTML HTML 閲覧用 印刷用 他のデバイス用 閲覧用、印刷用、他のデバイス向けのデザインに合わせた HTMLをそれぞれ用意しなければならない デザイン部分をHTMLに記述していると..
- 8. CSSの概念 HTML CSS CSS CSS 閲覧用 印刷用 他のデバイス用 デザイン部分をCSSに任せることでメンテナンス性は 大きく向上する ※：スマホ用、タブレット用のそれぞれのHTMLを用意することが良い場合があるため、この概念が適用できない場合もあります。
- 9. • 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のバージョン
- 10. CSSの記述方法
- 11. CSSの記述方法 p { margin: 0; } セレクタ (selector) プロパティ (property) 値 (value) { }(中括弧)の部分を宣言ブロック、もしくはブロックという
- 12. CSSの記述方法 p { margin: 0; padding: 0; color: red; } 複数のスタイル指定 セミコロンで 区切って記述
- 13. セレクタの指定
- 15. CSSの記述方法 セレクタの種類 Selectors Level 3 http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/
- 16. CSSの適用方法
- 17. CSSの適用方法 1. style属性を用いて、各要素に直接指定する 2. head要素の範囲内に、style要素によって指定する 3. head要素の範囲内で、link要素によって外部ファイ ルとして読み込む CSSの適用方法
- 18. 1. style属性を用いて、各要素に直接指定 CSSの適用方法 <div style="margin: 0;">要素</div> ※：構造と体制が分離されないため推奨されない
- 19. 2. head要素の範囲内に、style要素によって指定 CSSの適用方法 ... <head> <style> div { margin: 0; } </style> </head> <body> ... ※：HTML内に書くため、メンテナンスを考慮するとなるべく避けた方がよいが、パフォー マンス(#1)の点で有効な場合もある。 参考(#1)：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
- 20. CSSの適用方法 3. head要素の範囲内で、link要素によって外部 ファイルとして読み込む ■HTMLファイル ... <head> <link rel="stylesheet" href="style.css"> </head> <body> ... ■CSSファイル div { margin: 0; } ※：CSSを外部ファイル化するのが一般的
- 21. ボックスモデル
- 22. • 内容領域（Content Area ） • マージン領域（Margin Area） • パディング領域（Padding Area） • ボーダー領域（Border Area） ボックスモデルとは ボックスモデルの概念
- 23. ボックスモデルの概念 内容領域 （Content Area） パディング領域（Padding Area） ボーダー領域（Border Area） マージン領域（Margin Area） すべての要素は、ボックスと呼ばれる四角形の領域を 生成します
- 24. ボックスモデルの概念 内容領域（Content Area） • テキストや画像などが表示される領域 • 幅はwidthプロパティ、高さはheightプロパティを 指定する事で任意の幅と高さにする事ができる • 背景画像や背景色の指定がある場合、内容領域と パディング領域に背景が適用される
- 25. パディング領域（Padding Area） • 内容領域とボーダー領域の間にある余白 • パディングの指定は、paddingプロパティで サイズ指定する • 背景画像や背景色の指定がある場合、この領域にも 背景が適用される ボックスモデルの概念
- 26. ボーダー領域（border Area） • パディング領域の外側にある領域 • 「線」のための領域 • 各borderプロパティによって 線の種類（border-style）、サイズ（border-width）、 色（border-color）を指定できる ボックスモデルの概念
- 27. マージン領域（margin Area） • ボックスの最も外側にある余白部分 • マージンの指定は、marginプロパティで サイズ指定を行う • マージン領域には背景が適用されない ボックスモデルの概念
- 28. CSSを使うことのメリット
- 33. • 角丸 • ドロップシャドウ • グラデーション • 透過 画像を使うしかなかった } CSSを使うことのメリット
- 34. • 角丸やドロップシャドウのあるブロックを表現するために画像 パーツが必要 • 修正が入ると、画像修正と画像差し替えのタスクが発生する デザイナー、エンジニアのタスク増 • 画像パーツが増えるとページ容量が増え、 表示速度に影響がでる HTTPリクエストが増加する • 画像の場合、可変幅に対応することが大変 幅がスクリーンサイズによって異なるリキッドレイアウトには 不向きな場合がある CSSを使うことのメリット
- 37. • CSSスプライト • CSSファイルやJSファイルをまとめる • CSS、JS、画像を圧縮する 余談 HTTPリクエスト数を抑える手法 モバイル時代のWebパフォーマンス http://www.slideshare.net/yoshikawa_t/web-38508917
- 39. • 角丸 • ドロップシャドウ • グラデーション • 透過 CSSでできること CSSでできるようになった }
- 40. • 角丸やドロップシャドウのあるブロックを表現するために画 像パーツが必要 不要 • 修正が入ると、画像修正と画像差し替えのタスクが発生す る デザイナー、エンジニアのタスク増 減 • 画像パーツが増えるとページ容量が増え、表示速度に影響が でる HTTPリクエストが増加する • 画像の場合、可変幅に対応することが難しい 幅がスク リーンサイズによって異なるリキッドレイアウトには不向き CSSを使うことのメリット HTTPリクエストが減り、サイト表示速度が向上する CSSを使ってブラウザで描画できる要素はCSSに任せる CSSのみ修正 減ると 減り 難しくない 対応しやすい でない
- 41. CSSでできること
- 42. • 文字サイズ、要素サイズ の指定 • 文字色、背景色の指定 • 文字のスタイル（太字、 斜体）の指定 • 罫線、点線の描画と色、 サイズ指定 CSSでできること • 行間、文字間の指定 • フォントの指定 • リストの行頭文字の指定 • 要素の配置 CSS2.1以前から表現できる要素
- 43. • 角丸 • ドロップシャドウ • グラデーション • 透過 • 枠線（画像） • マスク CSSでできること • テキストシャドウ • Webフォント • トランスフォーム • アニメーション • 背景画像（複数） • メディアクエリ CSS3の登場によりCSSでできるようになった要素
- 45. • CSS 2.1以前では画像を使うしかありませんでした が、CSS3の登場により画像無しで描画ができるよ うなった • そのため、修正が入ってもその手間は以前ほど大き くない CSSでできること 角丸、ドロップシャドウ、テキストシャドウ、 グラデーション ※：テキストシャドウについてはCSS2の仕様に盛り込まれていましたが、ブラウザ の実装がバラバラだったため、CSS2.1で削除され、CSS3で再定義されました。
- 46. • CSS 2.1以前では、ひとつのセレクタに対して、背 景画像は一つしか指定することができなかった ➡ 重ねて表示するためのHTMLを追加していた • CSS3よりひとつのセレクタに複数の背景画像を指 定することが可能となった ➡ 重ねて表示するためのHTMLを書かなくよくなっ た CSSでできること 背景画像（複数）
- 48. • CSS 2.1以前では直線、破線、二重線などの罫線の 種類、色やサイズの指定のみ • デザイン性の高い罫線を使う場合は、背景画像として指定 • 可変するブロックに対応することが難しい場合がある • CSS3より、背景画像としてではなく、ボーダー領 域のみに画像を指定できるようになった • 可変するブロックにも対応可 ボーダーに画像を使う（ボーダーイメージ） CSSでできること
- 49. マスク CSSでできること
- 58. • 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"> メディアタイプの例
- 59. • CSS3よりメディア依存のサポートが強化され、 メディアクエリという仕様になった • 画面サイズや解像度などに応じて 適用するスタイルを切り替える機能 • レスポンシブWebデザインを実現する手法の1つ CSSでできること メディアクエリ
- 60. ➡ 現在、Media Queries Level 4で策定中 CSSでできること メディアクエリの将来 Media Queries Level 4の仕様書（英語） http://www.w3.org/TR/mediaqueries-4/ 将来的には • JavaScript有効無効環境 • マウスなどのポインターデバイスが有効なデバイス
- 62. • CSSでは文字周りは貧弱 • 閲覧環境にインストールされたフォントのみ • デザイン性のあるフォントを使う場合、 画像化文字を使うしかなかった Webの文字周り CSSでできること
- 63. font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ＰGothic", sans-serif; これまでのフォントの指定の例 CSSでできること
- 65. 小田原市
- 66. AOI Pro. Inc.
- 67. BA(ビジネス・アーキテクツ)
- 68. • フォントデーターは著作物なので著作権がある • ライセンス的に問題ないか確認する必要がある • 日本語フォントの容量の多さ • フォントフォーマットの対応度の差異 Webフォントの注意点 CSSでできること
- 69. WOFF TrueType OpenType EOT SVG iOS5∼ ○ ○ ○ ○ Android2.2∼ ○ ○ Android3∼ ○ ○ ○ Chrome ○ ○ ○ ○ Firefox ○ ○ ○ IE9∼ ○ ○ ○ ○ IE8 ○ CSSでできること
- 74. Google Web Fonts （欧文フォントのみ） http://www.google.com/fonts/ Adobe Edge Web Fonts （欧文フォントのみ） http://html.adobe.com/jp/edge/webfonts/
- 79. まとめ • CSSは「文章構造」と「デザイン」を 分離させるという理念で誕生した • CSS3の登場でCSSだけで表現できることが増えた • CSSで表現が難しい場合は画像を使うことで より表現の幅が広がる • とはいえ画像の多用はサイト表示に影響をすることを 忘れずに CSSでできないこと
- 80. 運用におけるCSS
- 81. • CSSは簡単に書ける CSS設計 CSSのメリット CSSのデメリット • コードが肥大化しやすい • メンテナンス性の低下 • 技術取得は容易 • 表示させるだけだと なんとかなる • CSSは簡単に書ける
- 82. • このファイル何？？ • Nobody knows......一番困るのは後任者 • 同じようなスタイルが増えていく • もはや管理不能なレベルに陥る • HTMLの保守にも影響がでる • 他のページでレイアウト崩れが発生 • 修正しても修正しても....... • 修正作業よりも確認作業のほうに時間が取られる CSS設計 メンテナンス性が不足しているCSSの末路
- 83. • 設計をしっかりとする • 単にコードを書くだけではなく プロジェクトの開始時から 関与していく • IA、デザイナー、エンジニアの 相互コミュニケーションは必要不可欠 CSS設計 それを回避するためには.... 要件定義 設計 実装 検証 デザイン ここから関わる
- 85. スタイルガイド
- 86. CSS設計 スタイルガイドとは • サイト全体に関する決めごとをまとめたもの • コーディングの仕様 • デザインの決めごと これを無視すると破綻の道を っていく
- 87. 詳しくは次回！！