職業デザイナーでなくてもWebの表現を豊かにできる本

第1章 たった10分でわかるアニメーションの基本

1-1 ボックスモデルをマスターしよう！

全てのウェブページはボックスの集まりでできている

ボックスモデルとは？

1-2 座標によるボックスの配置方法をマスターしよう！

ブロック要素とインライン要素

ボックスの表示位置を座標で指定する

1-3 アニメーションの仕組みをマスターしよう！

アニメーションの仕組み

CSSアニメーションの方法1（アクションに反応して再生する）

CSSアニメーションの方法2（自動再生）

CSSアニメーションを使い分けるコツ

第2章 スタイリッシュなサイトは画像ソフトがなくても作れる！

2-1 疑似要素の基本形

疑似要素とは？

疑似要素の書き方

疑似要素の配置方法

2-2 メニュー同士の境界線をCSSで表現したい

メニューの装飾にCSSを使うメリット

境界線を画像で表現しよう

メニューの背景と境界線をCSSで定義しよう

境界線を疑似要素で表現しよう

メニューの装飾をアニメーションさせてみよう～カスタマイズ（1）

メニューの背景が広がるアニメーションをつけてみよう～カスタマイズ（2）

2-3 タイトルにスタイリッシュな装飾を付けたい

下線をborderプロパティで表現しよう

下線を疑似要素で表現しよう

下線をアニメーションさせてみよう～カスタマイズ（1）

タイトルにクロスフェードするアニメーションをつけてみよう～カスタマイズ（2）

長くなりがちなCSSをコンパクトにまとめよう

2-4 吹き出しをＣＳＳで表現したい

吹き出しの四隅を丸くしよう

吹き出しの先端に疑似要素を配置しよう

疑似要素を三角形にしよう

疑似要素でタイトルにリボンをつけてみよう～カスタマイズ（1）

表の見出しを吹き出し風にしてみよう（レスポンシブ）～カスタマイズ（2）

2-5 チェックマークをCSSで表現したい

listマークをlistスタイルで表現しよう

チェックマークを画像で表現しよう

チェックマークを疑似要素で表現しよう

CSSでチェックマークを作るメリット

チェックマークに丸い背景をつけてみよう～カスタマイズ（1）

WordPressのページ送りのアイコンを変更してみよう～カスタマイズ（2）

2-6 矢印マークをＣＳＳで表現したい

矢印マークをテキストで表現しよう

矢印マークを疑似要素で表現しよう

矢印の向きを変えてみよう～カスタマイズ（1）

WordPressのカテゴリーlistに矢印マークをつけてみよう～カスタマイズ（2）

第3章 動画を埋め込んだ印象的なページを実現したい！

3-1 埋め込み動画の基本形

動画をページに埋め込む

動画が再生できないブラウザへの対応

3-2 動画をフルスクリーンで埋め込みたい

埋め込み動画の基本形を思い出そう

フルスクリーン化するための考え方

Google マップをフルスクリーンで表示してみよう～カスタマイズ（1）

WordPressで動画をフルスクリーンで表示してみよう～カスタマイズ（2）

3-3 動画をスマホの画面に合わせて埋め込みたい

動画をページに埋め込もう（基本形）

動画をページに埋め込もう（スマホ対応）

<video>タグで動画の幅と高さを可変にしてみよう～カスタマイズ（1）

iPad向けのアスペクト比で動画を埋め込んでみよう～カスタマイズ（2）

3-4 動画に文字を重ねたい（レスポンシブ）

動画に文字を重ねよう

動画に重ねる文字の大きさを可変にしてみよう

文字が折り返す場所を可変にしよう～カスタマイズ

3-5 動画に画像を重ねたい（レスポンシブ）

レイヤーの役割を決めて構造化しよう

画像とリンクを動画に重ねよう

動画に矢印アイコンを重ねてアニメーションさせてみよう～カスタマイズ

3-6 動画が自動再生されるようにしたい

YouTubeの動画を自動再生しよう

<video>タグで動画を自動再生しよう

動画のコントロールバーが出ないようにしてみよう～カスタマイズ（1）

<video>タグで動画をループ再生してみよう～カスタマイズ（2）

YouTubeの動画をループ再生してみよう～カスタマイズ（3）

3-7 動画の音が出ないようにしたい

動画の音をミュートにしよう（videoタグ）

JavaScriptでYouTubeの動画を埋め込んでみよう～カスタマイズ（1）

JavaScriptでYouTubeの動画をミュートにしてみよう～カスタマイズ（2）

3-8 動画の映像をモノトーンにしたい

動画をモノトーンにしよう（YouTube）

動画をモノトーンにしよう（videoタグ）

動画をセピア調にしてみよう～カスタマイズ（1）

動画をモノトーンにして矢印アイコンを重ねてみよう～カスタマイズ（2）

第4章 おしゃれな“ギャラリー”は難しいプログラムなしで実現できる！

4-1 写真をタイル状に並べる基本形

写真をタイル状に並べる方法（TABLEレイアウト）

写真をタイル状に並べる方法（DIVレイアウト）

DIVレイアウトでは必ずフロートを解除しよう

TABLEレイアウトとDIVレイアウトはどちらがお勧め？

写真を4列に変更してみよう～カスタマイズ（1）

WordPressの投稿エリアに写真を2列で配置してみよう～カスタマイズ（2）

4-2 写真を3列に均等割りしたい

固定幅で均等割りする方法

可変幅で均等割りする方法（リキッドレイアウト）

固定マージンで均等割りする方法

写真を4列に均等割りしてみよう～カスタマイズ（1）

写真の透明度を変化させながらスライドインしてみよう～カスタマイズ（2）

4-3 PC/タブレット/スマホで写真が横に並ぶ枚数を切り替えたい

デバイスごとのレイアウトを作成しよう

画面サイズに合わせてスタイルシートを切り替えよう

WordPressにレスポンシブなギャラリーを組み込んでみよう～カスタマイズ

4-4 写真の上にテキストを重ねたい

テキストをボックス化して写真と同じレイヤーに配置しよう

タイトルのボックスを写真の上に重ねよう

タイトルのボックスを疑似要素に置き換えてみよう～カスタマイズ（1）

WordPressに自動で更新されるオリジナルギャラリーを設置してみよう～カスタマイズ（2）

4-5 写真にマウスを乗せたときテキストを重ねたい

リンクテキストをボックス化して写真と同じレイヤーに配置しよう

リンクテキストをスライドインして写真の上に重ねよう

マウスを乗せたとき写真を暗くしてみよう～カスタマイズ（1）

WordPressでオーバーレイ付きのギャラリーを作ってみよう～カスタマイズ（2）

4-6 写真にマウスを乗せたとき枠がつくようにしたい

マウスを乗せる前のスタイルを定義しよう

マウスを乗せたときのスタイルを追加しよう

WordPressで写真に枠が付くギャラリーを作ってみよう～カスタマイズ

4-7 写真にマウスを乗せたときゆっくり拡大したい

マウスを乗せる前のスタイルを定義しよう

マウスを乗せたときのスタイルを追加しよう

マウスを乗せたとき大きな写真を表示してみよう～カスタマイズ（1）

WordPressのギャラリーで大きな写真を表示してみよう～カスタマイズ（2）

第5章 スクロールと連動して○○するクールなサイトを実現する！

5-1 メニューバーがスクロールに付いてくるようにしたい

スクロールと連動した表示を実現する考え方

STEP1 スクロールする前と後の状態を表すCSSを作成する

STEP2 JavaScriptでスクロール量に応じてCSSを切り替える

5-2 スクロールすると見え隠れする“トップに戻る”ボタンを実現したい

STEP1 スクロールする前と後の状態を表すCSSを作成する

STEP2 JavaScriptでスクロール量に応じてCSSを切り替える

“トップに戻る”ボタンをふわっと表示させてみよう～カスタマイズ（1）

WordPressに“トップに戻る”ボタンを追加してみよう～カスタマイズ（2）

5-3 スマホでスクロールすると表示される“ネット予約ボタン”を実現したい

STEP1 ボタンを表示した状態と非表示の状態を表すCSSを作成する

STEP2 JavaScriptでCSSを切り替える

“ネット予約”ボタンをふわっと表示させてみよう～カスタマイズ（1）

タップすると電話がかかるボタンを追加してみよう～カスタマイズ（2）

5-4 スクロールすると滑らかに縮むメニューを実現したい

STEP1 スクロールする前と後の状態を表すCSSを作成する

STEP2 JavaScriptでスクロール量に応じてCSSを切り替える

5-5 サイドバーの広告エリアがスクロールに付いてくるようにしたい

STEP1 スクロールする前と後の状態を表すCSSを作成する

STEP2 JavaScriptでスクロール量に応じてCSSを切り替える

第6章 クリックすると写真が○○するサイトを実現する！

6-1 クリックすると背景が暗くなる“オーバーレイ”の基本形

“オーバーレイ”を実現する考え方

STEP1 オーバーレイにするタグをHTMLに記述する

STEP2 オーバーレイをCSSで非表示にする

STEP3 JavaScriptのクリックイベントでCSSを切り替える

“オーバーレイ”を閉じるボタンを追加してみよう～カスタマイズ（1）

“オーバーレイ”が画面中央から広がるアニメーションを追加してみよう～カスタマイズ（2）

フィルターでオーバーレイの後ろ側をぼかしてみよう～カスタマイズ（3）

6-2 クリックすると写真が拡大する“仕掛け”を作ろう！

クリックすると大きな写真を表示する考え方

STEP1 大きな写真を表示するタグをHTMLに記述する

STEP2 大きな写真を表示するタグを非表示にする

STEP3 サムネイルをクリックしたとき大きな写真をタグに読み込む

大きな写真の後ろにオーバーレイを表示してみよう～カスタマイズ

6-3 写真をクリックすると動画の再生画面をポップアップしたい！

動画の再生画面をポップアップする考え方

STEP1 動画の再生画面となるタグをHTMLに記述する

STEP2 動画の再生画面を非表示にする

STEP3 写真をクリックしたとき動画データをタグに読み込む

STEP4 動画の再生画面をJavaScriptでポップアップする

動画の再生画面の後ろにオーバーレイを表示してみよう～カスタマイズ