この本を一言で言うと
HTML・CSS基礎を終えた人が次のステップへ進むための、実践的なWebデザインスキルを一気に習得できる書。
この本の概要
WebクリエイターボックスのManaによる実践的な続編。HTML・CSSの基礎学習を終えた人を対象に、ワンランク上のWebサイト制作スキルを解説する。5つのサイト制作を通じて、手描き・斜め・グラデーションなど自由な装飾表現、JavaScriptライブラリ・動画・Sass・カスタム変数・Emmetなど現場で使える技術を幅広く習得できる。CPU大賞2021年度1位、シリーズ40万部突破。独学で問題に詰まったときの解決法や、効率よくコードを書くための時短術まで含む実践的な一冊。
「手を動かせるけど、自分のものになっていない」状態から抜け出せた
前著の入門編を読んで、一通りHTMLとCSSは書けるようになった。でもいざ案件で「こういうデザインにしたい」と思ったとき、どうやって実装すればいいかわからないことばかりだった。Sass使ってみたいけど何から始めていいかわからないとか、アニメーションがうまく動かないとか。
この本は、そういう「基礎はできたけど実践で詰まる」という状態に対して直接答えてくれる。手描き風の表現とか、斜めにするテクニックとか、「こんなことCSS一個で書けるの？」という気づきが多かった。
JavaScriptライブラリの使い方が解説されているのも助かった。スライダーとかモーダルとか、毎回調べていたのが本一冊にまとまっているので、作業が早くなった。
Sassの章も丁寧で、ネスト・変数・mixinの使い方が実例とともに書かれている。これを読んで初めてSassを実務に取り入れられた。問題解決の章は、独学中にGoogle検索でさまよっていた自分には特に刺さった。調べ方のコツが書いてあるだけで、詰まったときの焦りが減る気がする。
— フリーランスWebデザイナー（29歳男性）
この本で学べること
✓
異なるデザインスタイルの5サイトを通じて、最新の実践技術を幅広く習得できる。
✓
手描き風・斜め・グラデーション・CSSシェイプなど、デザインの表現力を広げる技術を解説している。
✓
表・グラフ・アニメーションなど、CSSだけでは難しい動きをJavaScriptライブラリで実装する方法を学べる。
✓
Sass・Emmet・カスタム変数など、実務で使われる効率化ツールの使い方まで解説している。
✓
独学中に詰まったときの問題解決法も章として設けており、自走力を高める構成になっている。
本の目次
- 1Chapter1 基礎復習と開発環境
- 2Chapter2 手描き・斜め・グラデーションの装飾表現
- 3Chapter3 CSSアニメーションと動きの表現
- 4Chapter4 JavaScriptライブラリの活用（表・グラフ・スライダー）
- 5Chapter5 動画・Webフォント・カスタムプロパティ
- 6Chapter6 Emmet・Sass・効率的なコーディング
- 7Chapter7 問題解決とデバッグの方法
良い点・気になる点
良い点
- ○基礎の次のステップとして最適な実践的内容
- ○表現の幅を広げる多様なデザイン技術を網羅
- ○CPU大賞受賞の信頼できる品質
- ○問題解決法まで解説する自走力養成の視点
気になる点
- △基礎知識が前提のため完全初心者には不向き
- △2021年刊行のためSassや一部ツールの最新仕様は確認が必要
著者について
こんな人におすすめ
✓
✓
✓
よくある質問
Q. 前著「1冊ですべて身につく〜入門講座」を読んでいないと理解できませんか？▼
A. 前著またはそれ相当のHTML・CSS基礎知識があれば読み始められます。前著と同じシリーズですが、独立した書籍として読めます。
Q. JavaScriptの知識は必要ですか？▼
A. JavaScriptの基礎知識は不要です。ライブラリの使い方を中心に解説しており、コピー&ペーストで使えるレベルから始められます。
Q. Sassは未経験でも学べますか？▼
A. はい。Sassの基本的な使い方から解説しているため、未経験者でも取り組めます。
UIデザインガイドライン集
実務で使えるUIデザインのガイドラインを無料でダウンロード
※ 登録いただいたメールアドレスは資料送付にのみ使用します