ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

著者 : Mana

• SBクリエイティブ (2021年2月20日発売)

作品紹介・あらすじ

最新の表現がすべて身につくHTML&CSSとWebデザイン実践講座

デザイナーなら知っておきたい
一歩進んだ知識が一気に学べる！

・5つのサイトから学べる！ 今のWebサイトを作る最新技術
・今日から使える！ 動く表とグラフ、JavaScriptライブラリの使い方
・理想のデザインが作れる！ 手描き、斜め、グラデーション、装飾の作り方
・動画、アニメーション、カスタム変数、 Emmet、Sassの知識まで

感想・レビュー・書評

[yuiさんの感想 · 2021年4月12日]

エフェクトをかけるなど、画像で表現してしまいそうなところをCSSで表現するやり方などが載っていてまた1歩深く学べました。
前作の次に読むにはちょうどいいレベル感です。

[桜美林大学図書館さんの感想 · 2023年9月27日]

https://cool.obirin.ac.jp/opac/volume/920971

[akiuwaさんの感想 · 2023年1月21日]

[荒川区に予約中]

「本当の自由を手に入れる お金の大学」(https://booklog.jp/item/1/4023318787)を読んで知った本。同著者でjavascriptの本もあったけれど、とりあえずHTML&CSSに関する入門講座とこの実践講座の二冊を読んでみよう。

========
CHAPTER 1 最初に知っておこう！Webサイトの基本と必携ツール
1-1 Webページの仕組み
1-2 HTMLの基礎
1-3 HTMLの属性
1-4 CSSの基礎
1-5 より管理しやすいCSSについて
1-6 JavaScriptの読み込みの仕方
1-7 ブラウザーによる見え方の違い
1-8 デベロッパーツールを使いこなす
1-9 次章以降で学ぶこと

CHAPTER 2 「レスポンシブWebデザインとフォント」
2-1 作成するランディングページの紹介
2-2 シングルカラムのレイアウトとは
2-3 全画面背景で目を引くデザインの実現
2-4 フォントの詳しい使い方
2-5 アイコンフォントの使い方
2-6 スマートフォンでの閲覧に対応させる
2-7 ブレークポイントの詳細
2-8 表示領域にピタッと移動する方法
2-9 練習問題
2-10 カスタマイズしよう

CHAPTER 3 ブログサイトで学ぶ「装飾とカラムレイアウト」
3-1 作成するブログサイトの紹介
3-2 2カラムのレイアウトを知る
3-3 異なる画面サイズの閲覧に対応させる
3-4 各要素を装飾する①（見出し・画像・ボタン）
3-5 各要素を装飾する②（箇条書きリスト・番号付きリスト）
3-6 各要素を装飾する③（引用文・ページ送り・囲み枠）
3-7 各要素の装飾④（ヘッダー・フッター・ナビゲーション・表・フォーム）
3-8 スクロールに合わせて追従させる
3-9 練習問題
3-10 カスタマイズしよう

CHAPTER 4 コーポレートサイトで学ぶ「表組み、フォーム、JavaScript」
4-1 作成するコーポレートサイトの紹介
4-2 枠からはみ出す要素を作る方法
4-3 グラフでもっとわかりやすくする
4-4 画像とテキストを互い違いに表示させる
4-5 表でデータを示す
4-6 タイムラインを表示する
4-7 フォームの装飾
4-8 属性セレクター
4-9 練習問題
4-10 カスタマイズしよう

CHAPTER 5 イベントサイトで学ぶ「特定ページの作り方とアニメーション」
5-1 作成するイベントサイトの紹介
5-2 CSSでページ内をスルスル動かす
5-3 ブレンドモードで画像の色を変える
5-4 カスタムプロパティ（変数）を使う
5-5 CSSでアニメーションをつける（トランジション）
5-6 CSSでアニメーションをつける（キーフレーム）
5-7 斜めのラインのデザインを作る
5-8 グラデーションで表現する
5-9 スライドメニューを設置する
5-10 練習問題
5-11 カスタマイズしよう

CHAPTER 6 ギャラリーサイトで学ぶ「動画と画像の使い方」
6-1 作成するギャラリーサイトの紹介
6-2 背景に動画を設置する
6-3 画像をレスポンシブに対応させる
6-4 マルチカラムでレイアウトを作る①
6-5 マルチカラムでレイアウトを作る②
6-6 フィルターで画像の色を変える
6-7 カーソルを合わせると画像を拡大する
6-8 要素に影をつける
6-9 ライトボックスで画面いっぱいに表示する
6-10 アニメーションを加える
6-11 ダークモードに対応させる
6-12 練習問題
6-13 カスタマイズしよう

CHAPTER 7 HTMLやCSSをより早く、より上手に管理できる方法
7-1 Emmetを使って素早くコーディングする
7-2 calc関数で計算式を書く
7-3 Sassを使って効率を上げる
7-4 VSCodeでSassを利用する
7-5 ネストを使いこなす（Sassの便利な使い方①）
7-6 パーシャルでファイルを分割する（Sassの便利な使い方②）
7-7 スタイルを使い回せるMixin（Sassの便利な使い方③）

CHAPTER 8 サイトの投稿と問題解決
8-1 チェックリスト一覧
8-2 エラーメッセージを読み解く
8-3 制作に関する質問ができるサイト

[ニルさんの感想 · 2022年3月11日]

2022.03.11〜

[摂南大学図書館寝屋川本館さんの感想 · 2021年11月3日]

摂南大学図書館OPACへ⇒
https://opac2.lib.setsunan.ac.jp/webopac/BB50234240

[めちゃくちゃゆかさんの感想 · 2021年9月27日]

Web制作の学習を始めて3ヶ月ほど。めちゃくちゃ活用してます。

[fraserlibさんの感想 · 2021年6月3日]

請求記号　547.48/Ma 43

著者プロフィール

日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。 カナダやオーストラリア、イギリスの企業でWebデザイナーとして働いた。ブログ『Webクリエイターボックス』の管理人。現在はWebサイト制作の書籍執筆、インストラクターとして教育関連に携わっている。

「2023年 『1冊ですべて身につくJavaScript入門講座』 で使われていた紹介文から引用しています。」