「あのサイトみたいに!」を実現できる! 職業デザイナーでなくてもWebの表現を豊かにできる本

概 要

あのサイトみたいな素敵なウェブサイトを作りたい! でも、プロの表現は、マネしたくても難しいでしょう。既製品のカスタマイズには、何をどのように組み合わせれば実現できるのかを、その「考え方」を経験を通して身に付ける必要があります。本書では、基本を繰り返すことで応用力を身に付けられるようになっています。HTMLとCSSを組み合わせ、JavaScriptも学ぶことで、応用のバリエーションが広がることを実感できます。

著者 中田亨
価格 本体2500円(税別)
ISBN 978-4-7980-5128-4
発売日 2017/9/16
判型 B5変
ページ数 440
CD/DVD
ダウンロード
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

第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 吹き出しをCSSで表現したい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

矢印の向きを変えてみよう~カスタマイズ(1)

WordPressのカテゴリーリストに矢印マークをつけてみよう~カスタマイズ(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でポップアップする

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

PR

秀和システム