この記事では、書籍『ほんの一手間で劇的に変わるHTML＆CSSとwebデザイン 実践講座』を全て学習することで得られた
- Webデザインスキル
- 学習成果のWebサイト
を紹介します。
本書のchapter別に紹介していきます。
書籍の概要
『ほんの一手間で劇的に変わるHTML&CSSとWebデザイン 実践講座』（著者：Mana）はHTML&CSSの基礎学習を終えた人向けの書籍です。
思い通りのデザインのwebサイトを制作するために必要なスキルや効率よくコードを書くノウハウが凝縮されており、ワンランク上のwebサイトを制作したい人にとっては欠かせない一冊になっています。
chapter構成
本書は、以下の構成になっています⇩
- chapter1
最初に知っておこう！Webサイトの基本と必携ツール - chapter2
レスポンシブWebデザインとフォント - chapter3
装飾とカラムレイアウト - chapter4
表組み、フォーム、JavaScript - chapter5
特定ページの作り方とアニメーション - chapter6
動画と画像の使い方 - chapter7
HTMLやCSSをより早く、より上手に管理できる方法 - chapter8
サイトの投稿と問題解決
スキルとサイトの紹介はHTML&CSSのスキルパートであるchapter2～6のみ紹介します。
「学べるスキル」と「作成webサイト」紹介
chapter2: 「レスポンシブWebデザインとフォント」
chapter2では以下のスキルを身に付けることができます⇩
- シングルカラムレイアウト
- アイコンフォント
Webページ上で文字と同じように表示できるアイコンのこと - Google Fontsの活用
- レスポンシブデザイン
- スクロール動作の調整
「表示領域にピタッと止まるようにスクロールさせる」など
これらのスキルを取り入れて制作したウェブページがこちらです。
chapter3: 「装飾とカラムレイアウト」
chapter3では以下のスキルを身に付けることができます⇩
- 各要素の修飾
見出し、画像、ボタン、リスト、ヘッダー、フッター etc… - ２カラムレイアウト
- スクロールに合わせてサイドバーなどを追従させる
これらのスキルを取り入れて制作したウェブページがこちらです。
chapter4: 「表組み、フォーム、JavaScript」
chapter4では以下のスキルを身に付けることができます⇩
- 枠からはみ出す要素を作る
- グラフを作る
- 画像とテキストを互い違いに表示させる
- 表を作る
- タイムラインを作る
- フォームの装飾
- 属性セレクター
属性名や属性値を指定して装飾する
これらのスキルを取り入れて制作したウェブページがこちらです。
chapter5: 「特定ページの作り方とアニメーション」
chapter5では以下のスキルを身に付けることができます⇩
- ブレンドモードを使う
複数の画像や色を様々な手法で重ね合わせることができる - カスタムプロパティ（変数）を使う
何度も利用するコードを一か所に保存し、参照することができる - アニメーションをつける
- 斜めのラインのデザインを作る
- グラデーションをつける
背景や文字の色をグラデーションにする - スライドメニューの設置
これらのスキルを取り入れて制作したウェブページがこちらです。
chapter6: 「動画と画像の使い方」
chapter6では以下のスキルを身に付けることができます⇩
- 画像にフィルターをかける
- 背景に動画を設置
- ダークモード対応
- スクロールに合わせてアニメーションを加える
- 画像ホバー時に拡大＆シャドウ
- 画像クリック時に大きく表示
- 画像をレスポンシブ対応させる
これらのスキルを取り入れて制作したウェブページがこちらです。（読み込みに少々時間がかかる可能性があります）
webデザインのスキルを上げるには必須の一冊！
書籍 『ほんの一手間で劇的に変わるHTML＆CSSとwebデザイン 実践講座』 で学べるスキルと作成したwebサイトを紹介しました。
この一冊でwebデザインのクオリティを上げるスキルを手に入れることができます。この本のメリットは以下の記事を参考にしてください⇩
