マークアップ講座

CSS

1. CSSとは

2. CSS3について

3. CSS実装

4. CSS運用の効率化

5. 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）

1. CSSとは【補足】

ブロックレベル要素 （Block-Level Elements）

• 自身の明確な大きさを持つ • 改行を伴わずとも縦に積み上がる • 横幅のサイズは親要素の横幅に従う

http://codepen.io/sekiyaeiji/pen/CFdLa?editors=100

1. CSSとは【補足】

インライン要素 （Inline Elements）

• 文章の一部のように振る舞う • 文章の１行としてだけの縦幅をもつ • 横幅のサイズはコンテンツ内容に従う • 自身の大きさを持たず、制御もできない

http://codepen.io/sekiyaeiji/pen/Cqbne?editors=100

1. CSSとは【補足】

インラインブロック要素 （置換インライン要素）

（Inline-block Elements）• 文章の一部のように振る舞う • 横幅のサイズはコンテンツ内容に従う • 自身の大きさを持ち、縦横幅のサイズが制御できる

http://codepen.io/sekiyaeiji/pen/HxFcu?editors=100

1. CSSとは【補足】

利用頻度の高い要素における displayのデフォルト値

http://codepen.io/sekiyaeiji/pen/bcIie?editors=100

display値はCSSにより変更できる

http://codepen.io/sekiyaeiji/pen/Hmuxy?editors=100

1. CSSとは【補足】

li要素のレイアウトへの利用

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

1. CSSとは【補足】

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

li要素のレイアウトへの利用!

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

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

1. CSSとは

2. CSS3について

3. CSS実装

4. CSS運用の効率化

5. CSS高速化

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. CSS3について

2-1. gradient （グラデーション）

• background:linear-gradient([水平開始位置] [垂直開始位置] [角度], [開始色] 0%, [色] [位置], [色] [位置], [色] [位置], [終了色] 100%);

!

値 ： left/center/right、top/center/right、角度、色値、パーセント、1以下の少数

2-1. 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 );

http://codepen.io/sekiyaeiji/pen/nAlkb?editors=010

2-1. gradient （グラデーション）

『Ultimate CSS Gradient Generator - ColorZilla.com』 !

import from image http://www.colorzilla.com/gradient-editor/ !

→ gradient（グラデーション） CSSの値は、自力では書かない

2-1. gradient （グラデーション）

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

gradient button

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

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

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

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

2-2. border-radius （角丸）

!

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

http://codepen.io/sekiyaeiji/pen/IrKkg?editors=010

※ 円になる

2-2. border-radius （角丸）

2-3. text-shadow、box-shadow （影）

• text-shadow:[水平位置] [垂直位置] [ぼかし半径] [色];

!

• box-shadow:[水平位置] [垂直位置] [ぼかし半径] [大きさ] [色] [外側(省略)/内側(inset)];

!

値 ： 長さ、(空)/inset

2-3. 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;

2-3. text-shadow、box-shadow （影）

『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% {[終了時の処理内容]}}

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

2-4. animation （アニメーション）

http://codepen.io/sekiyaeiji/pen/CeDwt?editors=010

! 50% { top: 60px; left: 150px; background: #fc9; } 100% { top: 50px; left: 50px; background: #c60; } }

• 「@（-webkit-）keyframes」とセットでの運用 • 0～100％の細かいタイムライン設定が可能 • CSS単体でループ再生可能

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

http://test0001.s-ej.com/51/font01.html

• フォントをオンライン側から提供する仕組み • デバイスインストール済みフォント依存からの開放 • アイコン画像の代替にWeb Fontsを利用すると利便性があがり、

リクエスト数削減などメリットが多い • 漢字や外字が十分に用意されていて、かつライセンスがコスト的

に見合う日本語WebFontはまだ存在しない • フォントの複数読み込みや、日本語フォントなどファイルサイズ

が大きくなると、サイト全体のパフォーマンス低下が懸念され

る

2-7. Web Fonts

『Google Fonts』 https://www.google.com/fonts !

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

http://test0001.s-ej.com/51/font02.html http://test0001.s-ej.com/51/font03.html

2-8. Media Queries

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

レスポンシブWeb

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. セレクタ

セレクタ 意味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要素

新しい擬似class

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 !

ベンダープレフィックスが必要なプロパティの一覧

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

!

http://caniuse.com/ !

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

!

http://css3clickchart.com/

2. CSS3について

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

2. CSS3について

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

プログレッシブ・エンハンスメント（Progressive Enhancement）

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

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

フォールバック

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

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

1. CSSとは

2. CSS3について

3. CSS実装

4. CSS運用の効率化

5. CSS高速化

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

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

擬似class 意味

:link リンク

:visited 訪問済みのリンク

:active ユーザがアクティブにした要素

:hoverユーザがポイティングデバイスで指示した要素

:focusアクティベートされてフォーカスを受けた要素

:first-child 最初の子要素

擬似class

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

上記以外のCSSテクニック

• media float • multi-column grid • position fixed • checkbox toggle switch

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

media float

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

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

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

multi-column grid

!/* multi-column grid layout sample */ .list-wrap { width: 440px; } .list { margin-left: -10px; } !

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

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

multi-column grid

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

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

position fixed

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

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

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

checkbox toggle switchhttp://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"; }

1. CSSとは

2. CSS3について

3. CSS実装

4. CSS運用の効率化

5. CSS高速化

4. CSS運用の効率化

1. CSSが目指すべきゴール

2. classセレクタ

3. コンポーネント指向

4. 命名方針

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. CSS運用の効率化

1. CSSが目指すべきゴール

2. classセレクタ

3. コンポーネント指向

4. 命名方針

4-2. classセレクタ

idセレクタとclassセレクタ

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

4-2. classセレクタ

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

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

4-2. classセレクタ

セレクタと詳細度これらは混在して利用されると運用性が著しく低下することが懸念される

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

!important ＞ style="" ＞ #id

＞ .class ＞ element

4-2. classセレクタ

セレクタと詳細度

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

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

!important ＞ （#id） ＞ .class

4. CSS運用の効率化

1. CSSが目指すべきゴール

2. classセレクタ

3. コンポーネント指向

4. 命名方針

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

4-3. コンポーネント指向

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

（OOCSS）

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

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

4-3. コンポーネント指向

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

（OOCSS）• 場所依存のセレクタ命名を行わないように気をつける

• 機能、役割、転用可能なセレクタ名の利用を心がける

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

4-3. コンポーネント指向

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

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

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

4-3. コンポーネント指向

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

• Base

• Layout

• Module

• State

• Theme

4-3. コンポーネント指向

CSSをカテゴライズするBase

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

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

4-3. コンポーネント指向

CSSをカテゴライズするLayout

レイアウトのアウトラインとなる項目や、汎用的に利用されるレイアウトパーツ• ヘッダ、フッタ、コンテンツエリア、ナビゲーションなど • カラム構造、グリッド構造、メニュー構造などのベースレイア

ウト • classセレクタには接頭辞「l-」を付与 • idセレクタの利用を認める

4-3. コンポーネント指向

CSSをカテゴライズするModule

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

4-3. コンポーネント指向

CSSをカテゴライズするState

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

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

4-3. コンポーネント指向

CSSをカテゴライズするTheme

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

4. CSS運用の効率化

1. CSSが目指すべきゴール

2. classセレクタ

3. コンポーネント指向

4. 命名方針

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/

4-4. Modifier と Element

MindBEMding

!.sample-block {} /* Block */ .sample-block--full {} /* Modifier バリエーション */ .sample-block__field {} /* Element 子要素 */

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

4-4. Modifier と Element

BEM

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

1. CSSとは

2. CSS3について

3. CSS実装

4. CSS運用の効率化

5. CSS高速化

5. CSS高速化

1. link要素 と @import

2. 画像からCSSへ

3. Data URI scheme

4. CSSスプライト

5-1. link要素 と @import

!<link rel="stylesheet" href="sample.css"> !@import “sample.css"

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

『ハイパフォーマンスWebサイト ― 高速サイトを実現する14のルール』

Steve Souders http://www.amazon.co.jp/exec/obidos/ASIN/487311361X/

→ ◯ レンダリング速度向上

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

• @importを含んだパターンの多くは、複数ファイルの並列読み込みを阻害する

• 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

5-1. link要素 と @import

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/

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

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

5-3. Data URI scheme

5-4. CSSスプライト

CSSスプライト→ ◯ リクエスト数の削減 → ◯ 小さな画像群に最適

「スプライト」

妖精の意味から、アニメーション合成などのため

の小さな画像片やその集合

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

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

5-4. CSSスプライト