マークアップ講座 Part2 CSS


#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 （グラデーション）
http://codepen.io/sekiyaeiji/pen/nAlkb?editors=110

```
/* 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に書き換えてみる

https://type.jp/mypage/scout.do

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

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

####border-radius （角丸）
http://codepen.io/sekiyaeiji/pen/gvdJj?editors=110

```
/* 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 （影）
http://codepen.io/sekiyaeiji/pen/dzDrg?editors=110

```
/* 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 （アニメーション）
http://codepen.io/sekiyaeiji/pen/CeDwt?editors=110

```
/* 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 （変移アニメーション）
http://codepen.io/sekiyaeiji/pen/qglFu?editors=110

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

####transform （変形）
http://codepen.io/sekiyaeiji/pen/KDqvf?editors=110

```
/* 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』
https://www.google.com/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://caniuse.com/

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

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;
}
.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
　


##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

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

『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


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

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


- 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スプライト

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

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


- 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
　

- Sample Code
http://test0001.s-ej.com/50/sprite.png
http://codepen.io/sekiyaeiji/pen/FeaKz?editors=110