HTML/CSSブロックコーディング|レスポンシブルデザインとHTML/CSS実装

本、デザインをすらすら再現できるHTML/CSSブロックコーディング

 最近、CSS が気になって、読んでみました。『デザインをすらすら再現できるHTML/CSSブロックコーディング:笠井 枝理依著』。副題は、「コードを書く手が止まってしまうあなたへ。サイトをゼロから作り込む流れがわかる」。

本から、Webサイトのデザインから制作、HTML/CSS を実装する方法が学べた。デザインを構成要素ごとにブロック化し、それぞれを HTML/CSS で作成、完成させていく方法が実践できる本。

 この本、とても分かりやすいと感じました。初めて HTML/CSS に取り組む方には、少しハードルが高いかもしれません。でも、最初から順に実践すると将来への布石になると思う。

スポンサーリンク

書籍情報

  • 書籍名:HTML/CSS ブロックコーディング、デザインをすらすら再現できる
  • 著 者:笠井 枝理依
  • 発行所:株式会社翔泳社
  • 初 版:2022年11月16日
  • 頁 数:233
  • 価 格:2,600円(税別)

目 次

 目次見て、気になる箇所があれば、読みましょう。
最初から順に試行する構成になっているので、一部だけというのはよくないかも。

CHAPTER 01 モックアップをブロック分解

  1. モックアップとは
  2. モックアップはこうして渡される
  3. 初心者がコーディングでつまずきがちなこと
  4. サイトを構成する基本情報
  5. モバイル版のブロック分解
  6. タブレット版のブロック分解
  7. ラップトップ版のブロック分解

CHAPTER 02 モックアップをブロック分解

  1. ファイル構成
  2. 画像の確認
  3. mormalize.css と reset.css

CHAPTER 03 HTML のコーディング準備

  1. 分解したモックアップの確認(HTML)
  2. レスポンシブル対応をする上で確認すること
  3. ボトムアップのアプローチ方法
  4. トップダウンのアプローチ方法
  5. 今回のアプローチ方法を考える

CHAPTER 04 HTML のコーディング

  1. 骨組みのコーディング
  2. ベースのコーディング
  3. <header>のコーディング
  4. <main>のコーディング
  5. <footer>のコーディング
  6. ナビゲーションの設定

CHAPTER 05 CSS のコーディング準備

  1. 分解したモックアップの確認(CSS)
  2. デザイナーに確認しておきたいこと
  3. ファイルの準備
  4. スタイリングする際に気にかけること

CHAPTER 06 CSS のコーディング

  1. ベースのコーディング
  2. 共通クラスのコーディング
  3. <header>のコーディング
  4. <main>のコーディング
  5. <footer>のコーディング

CHAPTER 07 CSS でのレスポンシブ対応

  1. モバイル版のコーディング
  2. タブレット版のコーディング
  3. ラップトップ版のコーディング
  4. リファクタリング

CHAPTER 08 自分のプロフィールページへ

  1. コンテンツの差し替え
  2. カラーパレット作成
  3. (もう一歩)下層ページを作成

APPENDIX 一歩進んだテクニック

  1. クロスブラウザ対応とは
  2. ブラウザで対応を変える例
  3. Figma の基本的な使い方

読み終えて

 章構成が勉強するにはとてもいい。読み進み、実践していくと徐々にサイトの全容が見えてくる。自分の設計や依頼者の仕様に合わせてどのように制作していくか、よくわかる。

コードもその時点で必要なところのみ、説明もそのコードに対する説明のみなので、理解しやすい。

 レスポンシブ対応 CSS、モバイル版・タブレット版・ラップトップ版、それぞれ作成し、作成上の要点も述べられている。これは楽ちん。。。

 気になる点少し。クラス名と定義名?で大文字、小文字と異なる部分が・・・
また、コード入力後の確認画面がコード入力時点と合ってない箇所があったような・・・最後には合うのだが、途中確認すると???って・・・

もっとも当方の入力ミスの影響がある可能性は否めない。

イラスト、トレッキング

 おまけか?、完成したサイトを自分用に変更する方法も載っている。変更時に考慮する点やロゴ作成、カラーパレット一覧・作成のサイトの紹介もあり、応用は簡単だ。

 最後に、リファクタリングについても記載がある点はとても良かった。
ソースを見直し、バグや重複箇所の修正は必須だし、特に設定の重複は将来的に読み込み時間増やバグフィックス時間増につながりかねない。

HTML/CSS でのサイト構築に興味ある方、本屋さんまで遠い方は、こちらへどうぞ。

Visual Studio Code について

 Visual Studio Code が使えるかどうかで作業性に差が出てくると思う。このソースコードエディターはとても使い勝手がよく、動作も軽いので、使用方法をマスターすべきだ。

インストールしただけでは、良さがわかりづらいかもしれない。日本語表示化や拡張機能をインストールすると使い勝手はとてもよくなる。

このエディターのメリットは、軽い、使い勝手が良い、開発言語に応じた拡張機能がある、Windowsだけでなく Linux・mac バージョンがある、他。。。

 2つのファイル、例えば、自作ファイルと講師ファイル、前バージョンと現バージョンの異なる箇所が視認できる。
これは、ブロックコーディングだけでなく、プログラミングの勉強にはとても役立つと思う。

いいかどうかは、わからないが、今手元にある本はこれ。
Visual Studio Code実践入門!飛松清著
(amazonの書籍紹介サイトへのリンク)

コメント