マークアップ講座 02 CSS

1. CSSとは
2. CSS3について
3. CSS実装
4. CSS運用の効率化
5. CSS高速化

1. CSSとは
Cascading Style Sheets
1994年 CERN
Håkon Wium Lie
（ホーコン・ウィウム・リー）
!
W3C管轄

1. CSSとは
CSSの役割
ドキュメントからデザイン要素を分離
させるために開発されたスタイルシー
ト言語の１つ

1. CSSとは
Cascading Style Sheetsの意味
「Cascading」とは、「階段上の滝」
の意味であり、
親要素のスタイルが子要素に、先に書
いた宣言が後から書いた宣言へ継承さ
れる性質をたとえた名称

1. HTMLとは
CSSの基本構造
!
.sample {color: red;}
!
selector {property: value;}
!
セレクタ {プロパティ: 値;}

1. HTMLとは
CSSの基本構造
!
セレクタ {
プロパティ: 値;
}
!
/*
コメント
*/

1. CSSとは【補足】
レイアウトとしてのHTML
（displayプロパティのデフォルト値）
• ブロックレベル要素（Block-Level Elements）
• インライン要素（Inline Elements）
• インラインブロック要素（Inline-block Elements）

ブロックレベル要素
（Block-Level Elements）
• 自身の明確な大きさを持つ
• 改行を伴わずとも縦に積み上がる
• 横幅のサイズは親要素の横幅に従う
http://codepen.io/sekiyaeiji/pen/CFdLa?editors=100

インライン要素
（Inline Elements）
• 文章の一部のように振る舞う
• 文章の１行としてだけの縦幅をもつ
• 横幅のサイズはコンテンツ内容に従う
• 自身の大きさを持たず、制御もできない
http://codepen.io/sekiyaeiji/pen/Cqbne?editors=100

インラインブロック要素
（置換インライン要素）
（Inline-block Elements）
• 文章の一部のように振る舞う
• 横幅のサイズはコンテンツ内容に従う
• 自身の大きさを持ち、縦横幅のサイズが制御
できる
http://codepen.io/sekiyaeiji/pen/HxFcu?editors=100

利用頻度の高い要素における
displayのデフォルト値
http://codepen.io/sekiyaeiji/pen/bcIie?editors=100
display値はCSSにより変更できる
http://codepen.io/sekiyaeiji/pen/Hmuxy?editors=100

li要素のレイアウトへの利用
ナビゲーションメニューやfeed項目な
どの繰り返しレイアウトに利用するli要
素においては、デフォルトスタイルを
リセットする

li要素のレイアウトへの利用
!
［ul要素に設定したセレクタ］ {
padding-left: 0;
}
!
［li要素に設定したセレクタ］ {
list-style-type: none;
}
http://codepen.io/sekiyaeiji/pen/mGBFA?editors=110

2. CSS3について
モジュールという概念の導入

2. CSS3について
モジュールとは
「すべてを一度に決めないことに決めた」
CSSの新しい仕様
!
http://www.w3.org/Style/CSS/
current-work

2. CSS3について
モジュールとは
• 完成したモジュールから勧告できる
• 新機能を追加しやすい
• ブラウザ、環境が採用の取捨選択をしやすい
!
→ 今後、CSSは五月雨式に勧告される

2. CSS3について
CSS3新仕様
1. gradient （グラデーション）
2. border-radius （角丸）
3. text-shadow、box-shadow （影）
4. animation （アニメーション）
5. transition （変移アニメーション）
6. transform （変形）
7. Web Fonts
8. Media Queries
9. セレクタ
10.ベンダープレフィックス

2-1. gradient （グラデーション）
• background:
linear-gradient([水平開始位置] [垂直開始位
置] [角度], [開始色] 0%, [色] [位置], [色] [位
置], [色] [位置], [終了色] 100%);
!
値： left/center/right、top/center/right、
角度、色値、パーセント、1以下の少数

!
/* Old browsers */
background: #ff8f38;
/* FF3.6+ */
background: -moz-linear-gradient(top, #ff8f38 0%, #ffa24d 40%, #ff7f28 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8f38), color-stop(
40%,#ffa24d), color-stop(100%,#ff7f28));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, #ff8f38 0%,#ffa24d 40%,#ff7f28 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ff8f38 0%,#ffa24d 40%,#ff7f28 100%);
/* IE10+ */
background: -ms-linear-gradient(top, #ff8f38 0%,#ffa24d 40%,#ff7f28 100%);
/* W3C */
background: linear-gradient(to bottom, #ff8f38 0%,#ffa24d 40%,#ff7f28 100%);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8f38',
endColorstr='#ff7f28',GradientType=0 );
http://codepen.io/sekiyaeiji/pen/nAlkb?editors=010

『Ultimate CSS Gradient
Generator - ColorZilla.com』
!
import from image
http://www.colorzilla.com/gradient-editor/
!
→ gradient（グラデーション） CSSの値は、
自力では書かない

gradient button
ボタンのベースデザインをCSSに書き
換えてみる
https://type.jp/mypage/scout.do
ボタンデザインを拝借します
http://codepen.io/sekiyaeiji/pen/pFcKe?editors=110

2-2. border-radius （角丸）
• border-radius:
[曲線の水平半径] / [曲線の垂直半径];
!
• border-[位置]-radius: [曲線半径];
!
値：長さ、パーセント

!
/* border-radius sample */
border-radius: 100px / 50px;
border-top-left-radius: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 60px;
http://codepen.io/sekiyaeiji/pen/gvdJj?editors=011

※ 円になる
!
/* border-radius sample */
width: 100px;
height: 100px;
border-radius: 50%;
http://codepen.io/sekiyaeiji/pen/IrKkg?editors=010

2-3. text-shadow、box-shadow （影）
• text-shadow:
[水平位置] [垂直位置] [ぼかし半径] [色];
!
• box-shadow:
[水平位置] [垂直位置] [ぼかし半径] [大きさ]
[色] [外側(省略)/内側(inset)];
!
値：長さ、(空)/inset

!
/* text-shadow sample */
text-shadow: -1px -1px 0px #444, 1px 1px
0px #eee;
text-shadow: -1px 0px 0px #c60, 1px 0px
0px #c60, 0px -1px 0px #c60, 0px 1px 0px
#c60;
http://codepen.io/sekiyaeiji/pen/dzDrg?editors=110

『CSS3 box-shadowジェネレー
ター』
!
http://www.bad-company.jp/demos/box-shadow/

2-4. animation （アニメーション）
• animation-name: [アニメーション名];
• animation-duration: [アニメーションの再生時間];
• animation-timing-function: [アニメーションの加速度演出名];
• animation-iteration-count: [アニメーションの再生回数];
• animation-direction: [アニメーションの偶数回目の再生方法];
• animation-play-state: [アニメーションの再生状態];
• animation-delay: [アニメーションの開始タイミング];
• @keyframes [アニメーション名] {
0% {[開始時の処理内容]}
[処理タイミング] {[途中の処理内容]}
100% {[終了時の処理内容]}
}

!
/* animation sample */
.sample {
-webkit-animation-name: animKey;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
}
!
@-webkit-keyframes animKey {
0% {
top: 50px;
left: 50px;
background: #c60;
}

!
50% {
top: 60px;
left: 150px;
background: #fc9;
}
100% {
top: 50px;
left: 50px;
background: #c60;
}
}
• 「@（-webkit-）keyframes」とセットでの運用
• 0～100％の細かいタイムライン設定が可能
• CSS単体でループ再生可能
http://codepen.io/sekiyaeiji/pen/CeDwt?editors=010

2-5. transition （変移アニメーション）
• transition-property:
[アニメーションさせるCSSプロパティ];
• transition-duration:
[アニメーションの再生時間];
• transition-timing-function:
[アニメーションの加速度演出名];
• transition-delay:
[アニメーションの開始タイミング];

2-5. transition （変移アニメーション）
!
/* transition sample */
-webkit-transition-property: top left
background-color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0;
http://codepen.io/sekiyaeiji/pen/qglFu?editors=010

2-6. transform （変形）
• transform: translate([水平距離], [垂直距離]);
• transform: scale([水平縮尺], [垂直縮尺]);
• transform: rotate([回転角度]);
• transform:
skew([水平傾斜角度], [垂直傾斜角度]);
• transform-origin:
[水平変形支点] [垂直変形支点];

2-6. transform （変形）
!
/* transform sample */
-webkit-transform: rotate(-60deg)
scale(0.9) skew(40deg, -10deg)
translate(-100px, 50px);
http://codepen.io/sekiyaeiji/pen/KDqvf?editors=010
• animation keyframesの値としても利用しやすい
http://codepen.io/sekiyaeiji/pen/psBEz?editors=010

2-7. Web Fonts
• フォントをオンライン側から提供する仕組み
• デバイスインストール済みフォント依存からの開放
• アイコン画像の代替にWeb Fontsを利用すると利便性があがり、
リクエスト数削減などメリットが多い
• 漢字や外字が十分に用意されていて、かつライセンスがコスト的
に見合う日本語WebFontはまだ存在しない
• フォントの複数読み込みや、日本語フォントなどファイルサイズ
が大きくなると、サイト全体のパフォーマンス低下が懸念され
る
http://test0001.s-ej.com/51/font01.html

2-7. Web Fonts
『Google Fonts』
https://www.google.com/fonts
!
『Fontello - icon fonts generator』
http://fontello.com/
!利用するアイコンだけをWebフォント化できてパフォー
マンス改善に役立つWeb Fonts提供サービス
オリジナルデザインのアイコン集も作成可能、一度つくっ
ておくと一生使えるアイコン集になるかも

2-8. Media Queries
レスポンシブWeb
!
/* media screen sample */
/* ウィンドウ横幅1000px以下で有効 */
@media screen and (max-width: 1000px) {}
!
/* ウィンドウ横幅600px以上900px以下で有効 */
@media screen and (min-width: 600px) and (max-width: 900px) {}
!
/* ウィンドウ横幅600px以下でsample.cssを適用 */
<link rel="stylesheet" media="screen and (max-width: 600px)"
href="sample.css">
http://codepen.io/sekiyaeiji/pen/wGkdg?editors=110

2-9. セレクタ
新しい擬似class
セレクタ意味
E[foo^="bar"] foo属性の値がbarで始まっているE要素
E[foo$="bar"] foo属性の値がbarで終わっているE要素
E[foo*="bar"] foo属性の値にbarを含むE要素
E:root 文章内のルート要素であるEという要素
E:nth-child(n) 親要素のn番目の子要素
E:nth-last-child(n) 親要素の後から数えてn番目の子要素
E:nth-of-type(n) n番目にあるE要素
E:nth-last-of-type(n) 最後から数えてn番目にあるE要素
E:last-child 最後にある子要素
E:first-of-type 兄弟関係にあるE要素で最初のもの
E:last-of-type 兄弟関係にあるE要素で最後のもの
http://codepen.io/sekiyaeiji/pen/jLBzH?editors=110

2-9. セレクタ
新しい擬似class
セレクタ意味
E:only-child 唯一の子要素であるE要素
E:only-of-type 子要素の中で唯一のE要素
E:empty 子要素を持たないE要素
E:target 参照URIの目標となっているE要素
E:enabled 有効になっている（:enabled）E要素
E:disabled 無効になっている（:disabled）E要素
E:checked ラジオボタンやチェックボックスがチェッ
クされた状態のときにE要素
E:not(s) sでないセレクタを持つE要素
E ~ F E要素の後にあるF要素
http://codepen.io/sekiyaeiji/pen/CsAxo?editors=110

2-10. ベンダープレフィックス
vendor prefixes 対応ブラウザ
-webkit- Chrome、Safari
-moz- Firefox
-ms- InternetExplorer
-o- Opera
『CSS3 Reference』
http://www.w3schools.com/cssref/css3_browsersupport.asp
!
ベンダープレフィックスが必要なプロパティの一覧

2. CSS3について
* ブラウザごとの
対応状況が知りたくなったら
!
http://caniuse.com/
!
http://status.modern.ie/
http://mobilehtml5.org/
!
http://css3clickchart.com/

2. CSS3について
* プログレッシブ・エンハンスメントと
フォールバック

* プログレッシブ・エンハンスメントとフォールバック
プログレッシブ・エンハンスメント
プログレッシブ・エンハンスメント（Progressive Enhancement）
あるいはグレイスフル・デグラデーション（Graceful
Degradation）
!
レガシー・低バージョン環境では可読性と機能性において"ふつうの
体験"を提供し、最新の環境でより先進的な体験を提供する
!
プログレッシブ・エンハンスメントは、レガシー環境に対しては最低
限の実装以外を"行わない"こと

* プログレッシブ・エンハンスメントとフォールバック
フォールバック
フォールバック（fall back）とは、後退する、代替するなどの意味
!
レガシーなメソッドや低バージョン対応のスクリプトなどを駆使して
代替対応をすること
!
フォールバックは、低バージョン環境に対しても代替実装を"行う"こ
と
!
フォールバックしない、またはできないと判断した場合に、プログレッ
シブ・エンハンスメント対応を選択する、という場合もある

3. CSS実装（CSS3以前の要素を含む）
擬似要素
擬似要素意味
::before、:before 要素の前に内容を追加
::after、:after 要素の後に内容を追加
::first-letter、:first-letter 最初に現れる文字
::first-line、:first-line 最初の行
::selection 選択時ハイライト状態の部分
※ IE8以下にてシングルコロンのみ対応
http://codepen.io/sekiyaeiji/pen/AsJBd?editors=110

擬似class
擬似class 意味
:link リンク
:visited 訪問済みのリンク
:active ユーザがアクティブにした要素
:hover ユーザがポイティングデバイスで指
示した要素
:focus アクティベートされてフォーカスを
受けた要素
:first-child 最初の子要素

上記以外のCSSテクニック
• media float
• multi-column grid
• position fixed
• checkbox toggle switch

media float
http://codepen.io/sekiyaeiji/pen/gGrbx?editors=110
!
/* media float sample */
.media__img {
float: left;
display: block;
}
.media__text {
overflow: hidden;
}

multi-column grid
http://codepen.io/sekiyaeiji/pen/Ibhnf?editors=110
!
/* multi-column grid layout sample */
.list-wrap {
width: 440px;
}
.list {
margin-left: -10px;
}
!

multi-column grid
!
.list__item {
display: inline-block;
/display:inline;
/zoom:1;
margin-left: 10px;
margin-bottom: 10px;
width: 80px;
vertical-align:top;
}

position fixed
http://codepen.io/sekiyaeiji/pen/qdvkz?editors=110
!
/* position fixed sample */
.header {
position: fixed;
}
.footer {
position: fixed;
bottom: 0;
}

checkbox toggle switch
http://codepen.io/sekiyaeiji/pen/bkgif?editors=110
!
.switch__inner:before,
.switch__inner:after {
float: left;
box-sizing: border-box;
}
.switch__inner:before {
content: "ON";
}
.switch__inner:after {
content: “OFF";
}

4. CSS運用の効率化
1. CSSが目指すべきゴール
2. classセレクタ
3. コンポーネント指向
4. 命名方針

4-1. CSSが目指すべきゴール
CSSが目指すべきカタチ
• 予測のしやすさ
• 再利用のしやすさ
• 保守のしやすさ
• 拡張のしやすさ
『CSS設計の教科書』谷拓樹氏（http://twitter.com/hiloki）記
http://www.amazon.co.jp/gp/product/4844336355

4-2. classセレクタ
idセレクタとclassセレクタ
HTML要素のセマンティック性が向上した影響
もあり、CSSセレクタとしてのid属性の役割が
減少した現状では、異なる詳細度により運用が複
雑になるidセレクタを使うよりも、classセレク
タ主体のスタイル定義が好ましい

要素セレクタとclassセレクタ
CSSセレクタにHTML要素を伴うセレクタを利
用している場合、デザイン要件以外の事情でも発
生し得る要素のマークアップ変更に対して、セレ
クタの書き換えの工数が加わる状況は好ましくな
い
スタイル定義はclassセレクタ主体で運用すべき
である
http://codepen.io/sekiyaeiji/pen/knrdA?editors=110

セレクタと詳細度
これらは混在して利用されると運用性が著しく低
下することが懸念される
!important ＞ style="" ＞ #id
＞ .class ＞ element
http://codepen.io/sekiyaeiji/pen/EyjBL?editors=110

セレクタと詳細度
詳細度の制御には
この程度で十分ではないだろうか…
!important ＞（#id）＞ .class
http://codepen.io/sekiyaeiji/pen/EyjBL?editors=110

4-3. コンポーネント指向
構造と見た目を分離する
（Separate structure and skin）
（OOCSS）
『Object-Oriented CSS』
http://oocss.org/
https://github.com/stubbornella/oocss/wiki
!
『Nicole Sullivan』
https://twitter.com/stubbornella

構造と見た目を分離する
（Separate structure and skin）
（OOCSS）
基本構造と、見た目など具体的なプロ
パティとでセレクタをわける
http://codepen.io/sekiyaeiji/pen/aohjb?editors=110

コンテナとコンテンツを分離する
（Separate container and content）
（OOCSS）
• 場所依存のセレクタ命名を行わないように気を
つける
• 機能、役割、転用可能なセレクタ名の利用を心
がける
http://codepen.io/sekiyaeiji/pen/GLisb?editors=110

CSSをカテゴライズする
（SMACSS）
『SMACSS』
https://smacss.com/
https://smacss.com/ja（日本語）
!
『Jonathan Snook』
https://twitter.com/snookca

（SMACSS）
• Base
• Layout
• Module
• State
• Theme

Base
サイト全体を定義し、更新を前提としない項目
• html、bodyのサイト全体定義
• reset.css、normalize.css

Layout
レイアウトのアウトラインとなる項目や、汎用的
に利用されるレイアウトパーツ
• ヘッダ、フッタ、コンテンツエリア、ナビゲーションなど
• カラム構造、グリッド構造、メニュー構造などのベースレイア
ウト
• classセレクタには接頭辞「l-」を付与
• idセレクタの利用を認める

Module
Layoutで定義した項目以外のページレイアウト
のすべて

State
JavaScriptで制御されるような状態表現を定義
する項目
• 表示非表示、選択非選択などの一時的な定義
• メディアクエリの各状態定義

Theme
blogのスキンやカテゴリ毎カラーバリエーショ
ンなど、ページ全体の定義を大きく切り替える項
目

4-4. Modifier と Element
MindBEMding
『MindBEMding ‒ getting your head
’round BEM syntax ‒ CSS Wizardry ‒
CSS, OOCSS, front-end architecture,
performance and more, by Harry
Roberts』
http://csswizardry.com/2013/01/mindbemding-getting-
your-head-round-bem-syntax/

MindBEMding
サイト全体で統一されたclass命名規則がある方
が開発・運用効率が向上する
MindBEMdingもその規則の一つ
!
.sample-block {} /* Block */
.sample-block--full {} /* Modifier バリエーション */
.sample-block__field {} /* Element 子要素 */

BEM
『BEM. Block, Element, Modifier』
http://bem.info/
Block、Element、Modifierの頭文字、
フロントエンド設計方法提案の一つ
MindBEMdingのベース

5. CSS高速化
1. link要素と @import
2. 画像からCSSへ
3. Data URI scheme
4. CSSスプライト

5-1. link要素と @import
外部CSS読み込み： link要素と @import
→ ◯ レンダリング速度向上
!
<link rel="stylesheet" href="sample.css">
!
@import “sample.css"
『ハイパフォーマンスWebサイト ―
高速サイトを実現する14のルール』
Steve Souders
http://www.amazon.co.jp/exec/obidos/ASIN/487311361X/

5-1. link要素と @import
外部CSS読み込み： link要素と @import
• @importを含んだパターンの多くは、
複数ファイルの並列読み込みを阻害する
• link要素による読み込みがベター
テストパターン
http://test0001.s-ej.com/50/s01.html

5-2. 画像からCSSへ
画像からCSSへ
→ ◯ ファイル容量削減
→ ◯ リクエスト数の削減
→ ◯ レンダリング速度向上
• グラデーション
• 影
• 角丸、円
• 吹き出し
http://cssarrowplease.com/
http://codepen.io/sekiyaeiji/pen/Iwvly?editors=110
• Web Fonts（先述）

5-3. Data URI scheme
Data URI scheme （データURIスキーム）
　→ ◯ レンダリング（描画）時に確実に表示したい画像
→ ◯ 小さな画像に最適
→ ✕ 初期表示速度が下がるため多用は禁物
通常外部ファイルとして存在する画像データを、Base64
エンコードという方式で文字列化することによって文書
ファイルに内包する手法
!
『Data URI Generator』
http://bran.name/dump/data-uri-generator/

5-3. Data URI scheme
Data URI scheme （データURIスキーム）
!

<img src="data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAAkCAIAAAC8
～（中略）～EDoYtxpdozVEn3GLzsN/3W4LKitQDX/
xdgAA9QFIRxxhj2AAAAAElFTkSuQmCC">
!
/* css */
background-image: url(data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAAkCAIAAAC8
～（中略）～EDoYtxpdozVEn3GLzsN/3W4LKitQDX/
xdgAA9QFIRxxhj2AAAAAElFTkSuQmCC);

5-4. CSSスプライト
CSSスプライト
→ ◯ 小さな画像群に最適
「スプライト」
妖精の意味から、アニメーション合成などのため
の小さな画像片やその集合
http://test0001.s-ej.com/50/sprite.png
http://codepen.io/sekiyaeiji/pen/FeaKz?editors=110

5-4. CSSスプライト
CSSスプライト
• Google （http://www.google.co.jp/）の例
http://ssl.gstatic.com/gb/images/v1_2e543709.png
!
• Amazon （http://www.amazon.co.jp/）の例
http://g-ec2.images-amazon.com/images/G/09/gno/sprites/global-sprite-v1._
V339353423_.png
http://g-ec2.images-amazon.com/images/G/09/associates/network/assoc_ss/ss-noregion-
sprite-softy._V177524614_.gif
• Yahoo! （http://www.yahoo.com/）の例
https://s.yimg.com/dh/ap/default/140717/pc_icons_btns_sprite_0717_5pm.png
https://s.yimg.com/dh/ap/default/140317/pc_flags_sprite_0317_Regular_630pm.png
https://s.yimg.com/dh/ap/default/140610/pc_icons_video_sprite_0610_630pm.png

マークアップ講座 02 CSS

More Related Content

What's hot

Similar to マークアップ講座 02 CSS

More from eiji sekiya

マークアップ講座 02 CSS