CSS

CSSとは

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

CSSの役割

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

Cascading Style Sheetsの意味

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

CSSの基本構造


.sample {color: red;}

selector {property: value;}

セレクタ {プロパティ: 値;}

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
  プロパティ: 値;
}

/*
コメント
*/

レイアウトとしての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）

文章の一部のように振る舞う
横幅のサイズはコンテンツ内容に従うが、cssにより上書きできる
自身の大きさを持ち、縦横幅のサイズが制御できる

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要素においては、デフォルトスタイルをリセットする


［ul要素に設定したセレクタ］ {
  padding-left: 0;
}

［li要素に設定したセレクタ］ {
  list-style-type: none;
}

http://codepen.io/sekiyaeiji/pen/mGBFA?editors=110
　

CSS3について

モジュールという概念の導入

モジュールとは

「すべてを一度に決めないことに決めた」CSSの新しい仕様
http://www.w3.org/Style/CSS/current-work

完成したモジュールから勧告できる
新機能を追加しやすい
ブラウザ、環境が採用の取捨選択をしやすい

→ 今後、CSSは五月雨式に勧告される
　

CSS3新仕様

gradient （グラデーション）
border-radius （角丸）
text-shadow、box-shadow （影）
animation （アニメーション）
transition （変移アニメーション）
transform （変形）
Web Fonts
Media Queries
セレクタ
ベンダープレフィックス

gradient （グラデーション）

/* 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 );

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

gradient button

ボタンのベースデザインをCSSに書き換えてみる

　▼ ボタンデザインを拝借します ▼

http://codepen.io/sekiyaeiji/pen/bkgif?editors=110
　

border-radius （角丸）

/* border-radius sample */
border-radius: 40px;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;

※ 円になる
http://codepen.io/sekiyaeiji/pen/IrKkg?editors=110

/* border-radius sample */
width: 100px;
height: 100px;
border-radius: 50%;

text-shadow、box-shadow （影）

/* 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;

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

animation （アニメーション）

/* 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単体でループ再生可能

transition （変移アニメーション）

/* transition sample */
-webkit-transition: top 1s ease-in-out 0 , left 1s ease-in-out 0 , background-color 1s ease-in-out 0;

transform （変形）

/* transform sample */
-webkit-transform: rotate(-60deg) scale(0.9) skew(40deg, -10deg) translate(-100px, 50px);

animation keyframesの値としても利用しやすい http://codepen.io/sekiyaeiji/pen/psBEz?editors=110

Web Fonts

フォントをオンライン側から提供する仕組み
デバイスインストール済みフォント依存からの開放
アイコン画像の代替にWeb Fontsを利用すると利便性があがり、リクエスト数削減などメリットが多い
フォントの複数読み込みや、日本語フォントなどファイルサイズが大きくなるとサイト全体のパフォーマンス低下が懸念される

http://codepen.io/sekiyaeiji/pen/cBHGg?editors=110
　

『Google Fonts』

『Fontello - icon fonts generator』

http://fontello.com/
利用するアイコンだけをWebフォント化できてパフォーマンス改善に役立つWeb Fonts提供サービス
オリジナルデザインのアイコン集も作成可能、
一度つくっておくと一生使えるアイコン集になるかも
http://codepen.io/sekiyaeiji/pen/sAbme?editors=110
　

Media Queries

レスポンシブWeb
http://codepen.io/sekiyaeiji/pen/wGkdg?editors=110

/* 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">

セレクタ

新しい擬似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要素で最後のもの
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要素

ベンダープレフィックス

vendor prefixes	対応ブラウザ
-webkit-	Chrome、Safari
-moz-	Firefox
-ms-	InternetExplorer
-o-	Opera

『CSS3 Reference』
http://www.w3schools.com/cssref/css3_browsersupport.asp
ベンダープレフィックスが必要なプロパティの一覧
　

※ ブラウザごとの対応状況が知りたくなったら

http://status.modern.ie/
http://mobilehtml5.org/

http://css3clickchart.com/
　

* プログレッシブ・エンハンスメントとフォールバック

プログレッシブ・エンハンスメント

プログレッシブ・エンハンスメント（Progressive Enhancement）
あるいはグレイスフル・デグラデーション（Graceful Degradation）

レガシー・低バージョン環境では可読性と機能性において"ふつうの体験"を提供し、最新の環境でより先進的な体験を提供する

プログレッシブ・エンハンスメントは、レガシー環境に対しては最低限の実装以外を"行わない"こと
　

フォールバック

フォールバック（fall back）とは、後退する、代替するなどの意味

レガシーなメソッドや低バージョン対応のスクリプトなどを駆使して代替対応をすること

フォールバックは、低バージョン環境に対しても代替実装を"行う"こと

フォールバックしない、またはできないと判断した場合に、プログレッシブ・エンハンスメント対応を選択する、という場合もある
　

CSS実装（CSS3以前の要素を含む）

擬似要素

擬似要素	意味
::before、:before	要素の前に内容を追加
::after、:after	要素の後に内容を追加
::first-letter、:first-letter	最初に現れる文字
::first-line、:first-line	最初の行
::selection	選択時ハイライト状態の部分

※ IE8以下にてシングルコロンのみ対応

擬似class

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

上記以外のCSSテクニック

media float
multi-column grid
position fixed
checkbox toggle switch

media float

/* media float sample */
.media__img {
  float: left;
  display: block;
}
.media__text {
  overflow: hidden;
}

multi-column grid

/* multi-column grid layout sample */
.list-wrap {
  width: 440px;
}
.list {
  margin-left: -10px;
}
.list__item {
  display: inline-block;
  /display:inline;
  /zoom:1;
  margin-left: 10px;
  margin-bottom: 10px;
  width: 80px;
  vertical-align:top;
}

position fixed

/* position fixed sample */
.header {
  position: fixed;
}
.footer {
  position: fixed;
  bottom: 0;
}

checkbox toggle switch

http://codepen.io/sekiyaeiji/pen/bkgif?editors=110
　

CSS運用の効率化

CSSが目指すべきカタチ
classセレクタ
コンポーネント指向
命名方針

CSSが目指すべきカタチ

予測のしやすさ
再利用のしやすさ
保守のしやすさ
拡張のしやすさ

『CSS設計の教科書』谷拓樹
http://www.amazon.co.jp/gp/product/4844336355
　

classセレクタ

idセレクタとclassセレクタ

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

http://codepen.io/sekiyaeiji/pen/EyjBL?editors=110
　

要素セレクタとclassセレクタ

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

http://codepen.io/sekiyaeiji/pen/knrdA?editors=110
　

セレクタと詳細度

これらは混在して利用されると運用性が著しく低下することが懸念される

!important ＞ style="" ＞ #id ＞ .class ＞ element

『Specificity Calculator』
http://specificity.keegan.st/

詳細度の制御にはこの程度で十分ではないだろうか

!important ＞ .class
　

コンポーネント指向

構造と見た目を分離する（Separate structure and skin）（OOCSS）

『Object-Oriented CSS』
http://oocss.org/
https://github.com/stubbornella/oocss/wiki

『Nicole Sullivan』
https://twitter.com/stubbornella

基本構造と、見た目など具体的なプロパティとでセレクタをわける

コンテナとコンテンツを分離する（Separate container and content）（OOCSS）

場所依存のセレクタ命名を行わないように気をつける
機能、役割、転用可能なセレクタ名の利用を心がける

CSSをカテゴライズする（SMACSS）

『SMACSS』
https://smacss.com/
https://smacss.com/ja（日本語）

『Jonathan Snook』
https://twitter.com/snookca

Base
Layout
Module
State
Theme

Base

サイト全体で更新を前提としない項目

html、bodyのサイト全体定義
reset.css、normalize.css

Layout

レイアウトのアウトラインとなる項目や、汎用的に利用されるレイアウトパーツ

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

Module

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

State

JavaScriptで制御されるような状態表現を定義する項目

表示非表示、選択非選択などの一時的な定義
メディアクエリの各状態定義

Theme

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

命名方針

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/

.site-search {} /* Block */
.site-search--full {} /* Modifier バリエーション */
.site-search__field {} /* Element 子要素 */

サイト全体で統一されたclass命名規則がある方が開発・運用効率が向上する
MindBEMdingもその規則の一つ

　↑

BEM

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

CSS高速化

外部CSS読み込み： link要素と @import

<link rel="stylesheet" href="sample.css">

@import "sample.css"

『ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール』
http://www.amazon.co.jp/exec/obidos/ASIN/487311361X/

→ レンダリング速度向上

@importを含んだパターンの多くは、複数ファイルの並列読み込みを阻害する
『link with @import』
http://stevesouders.com/tests/atimport/link-with-import.php
　
link要素による読み込みがベター

テストパターン
http://test0001.s-ej.com/50/s01.html
http://test0001.s-ej.com/50/s02.html
http://test0001.s-ej.com/50/s03.html
　

画像からCSSへ

過去に画像表現に頼っていたレイアウト部分を、できるかぎりCSSで表現する

→ ファイル容量削減
→ リクエスト数の削減
→ レンダリング速度向上

グラデーション
影
角丸、円
吹き出し
http://cssarrowplease.com/
http://codepen.io/sekiyaeiji/pen/Iwvly?editors=110
　
Web Fonts（先述）

　　→ リクエスト数の削減
　　→ 小さな画像群に最適
　

Data URI scheme （データURIスキーム）

通常外部ファイルとして存在する画像データを、Base64エンコードという方式で文字列化することによって文書ファイルに内包する手法

『Data URI Generator』
http://bran.name/dump/data-uri-generator/

<!--html-->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAAkCAIAAAC8〜（中略）〜EDoYtxpdozVEn3GLzsN/3W4LKitQDX/xdgAA9QFIRxxhj2AAAAAElFTkSuQmCC">

/* css */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAAkCAIAAAC8〜（中略）〜EDoYtxpdozVEn3GLzsN/3W4LKitQDX/xdgAA9QFIRxxhj2AAAAAElFTkSuQmCC);

　　→ リクエスト数の削減
　　→ CSS容量は増加する
　　→ レンダリング（描画）時に確実に表示したい画像
　　→ 小さな画像に最適
　

CSSスプライト

「スプライト」
妖精の意味から、アニメーション合成などのための小さな画像片やその集合