マークアップ講座 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

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

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

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

More from eiji sekiya

More from eiji sekiya (7)

マークアップ講座 02 CSS