More than 5 years have passed since last update.

マークアップ講座 Part2 CSS

Last updated at 2014-09-22Posted at 2014-09-22

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

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

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

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up