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

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

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

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

書籍情報

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

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

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

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

CHAPTER 04 HTML のコーディング

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

CHAPTER 06 CSS のコーディング

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

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

APPENDIX 一歩進んだテクニック

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

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

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

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

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

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

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

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

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

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

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

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

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