この記事では、書籍『ほんの一手間で劇的に変わる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では以下のスキルを身に付けることができます⇩
- 各要素の装飾
見出し、画像、ボタン、箇条書きリスト、番号付きリスト、ページ送り、囲み枠、ヘッダー、フッタ ー、ナビゲーション、表、フォームなど - 2カラムレイアウト
- スクロールに合わせて追従させる
サイドバーの項目が常に画面に表示される
これらのスキルを取り入れて制作したウェブページがこちらです。
chapter4: 「表組み、フォーム、JavaScript」
chapter4では以下のスキルを身に付けることができます⇩
- 枠からはみ出す要素を作る
画像の一部にテキストが重なるようにする - グラフを作る
- 画像とテキストを互い違いに表示させる
画像とテキストの左右をセクションごとに入れ替える - 表を作る
- タイムラインを作る
アイコンや線を活用し、フローが分かりやすくする - フォームの装飾
- 属性セレクター
属性名や属性値を指定して装飾する
これらのスキルを取り入れて制作したウェブページがこちらです。
chapter5: 「特定ページの作り方とアニメーション」
chapter5では以下のスキルを身に付けることができます⇩
- ブレンドモードを使う
複数の画像や色を様々な手法で重ね合わせることができる - カスタムプロパティ（変数）を使う
何度も利用するコードを一か所に保存し、参照することができる - アニメーションをつける
- 斜めのラインのデザインを作る
- グラデーションをつける
背景や文字の色をグラデーションにする - スライドメニューの設置
メニューボタンをクリックすると横からメニューバーが表示される
これらのスキルを取り入れて制作したウェブページがこちらです。
chapter6: 「動画と画像の使い方」
chapter6では以下のスキルを身に付けることができます⇩
- 画像にフィルターをかける
- 背景に動画を設置
- ダークモード対応
スマホのダークモードに対応するために配色を変更 - スクロールに合わせてアニメーションを加える
画像がふわっと表示される等 - 画像ホバー時に拡大＆シャドウ
画像にカーソルを合わせると画像が浮き出るように拡大される - 画像クリック時に大きく表示
- 画像をレスポンシブ対応させる
読み込みの時間を短縮するために画面サイズに合わせて表示画像を変更する
これらのスキルを取り入れて制作したウェブページがこちらです。（読み込みに少々時間がかかる可能性があります）
webデザインのスキルを上げるには必須の一冊！
書籍 『ほんの一手間で劇的に変わるHTML＆CSSとwebデザイン 実践講座』 で学べるスキルと作成したwebサイトを紹介しました。
この一冊でwebデザインのクオリティを上げるスキルを手に入れることができます。この本のメリットは以下の記事を参考にしてください⇩
