2020年7月に出たエビスコムの電子書籍「HTML&CSS コーディング・プラクティスブック 3」を読んだ感想を紹介します。
HTML&CSS コーディング・プラクティスブック 3 はKindle本で、Amazon読み放題サービス「Kindle Unlimited」に加入すると無料で読むことができます。
今回も、作例を読む前にデザインカンプと指示書だけ見て、まずページ制作にチャレンジし、その後作例の通りコーディングしてみました。
Webページコーディング実践シリーズ 第3弾
HTML&CSS コーディング・プラクティスブック 3は、デザインカンプと指示書に従いながらWebページを自分でコーディングしてみる実践シリーズの第3弾。
今回の大きなテーマはダークモード対応。つくるサイトのレイアウトはシンプルで、コンテンツ量も多くないため、そんなに時間はかかりませんが、ダークモード対応とヘッダーの画像周りがキモとなりそうです。
コーディングしてみた感想
サイトをカンプ通りに作ることは何とかできましたが、とりあえず見た目だけ完成させたので、作例のようにシンプルかつスマートにはいかず。
苦労した or 悩んだ点はやはりダークモードとボーダーイメージ。
スイッチを使ったダークモード対応はやったことなかったですし、ボーダーイメージも普段使わないのでめっちゃ調べましたね。
ただ苦労してつくったダークモードのスイッチが、オンラインツールを使って作成していたのには、ちょっと拍子抜けしちゃいましたけど……
でも、実際仕事などで実装するときは、パパっとこうしたりするものなんでしょうね。
今回はダークモード対応のためにJavaScriptを使うため、HTML&CSSだけでなくJavaScriptの理解も求められます。
あとAdobe XDも使うので、Adobe XDの使い方をガッツリと学びたいという方には「Adobe XDではじめるWebデザイン&プロトタイピング」がおすすめです。
関連記事：Adobe XDの使い方が学べる「Adobe XDではじめるWebデザイン＆プロトタイピング 一歩先行く現場のスキル」
やってみてちょっと思った知りたいコト
本書には難易度のレベルが設けられていますが、あまり当てになりません。
というのも、その人が実装に関連する知識を知っているかどうかで変わってくるから。
今回だとHTMLやCSSは習得済みでも、JavaScriptはサッパリという人だったらレベル5くらいの難易度に感じるでしょう。
それよりも普段仕事や業務でやっているコーダーやデザイナーの方なら、どれくらいの時間でつくれるのだろうというコトのほうが気になりますね。
なので個人的には難易度だけでなく、制作時間の目安もあったらが良いなぁと思いました。
理解しただけで実際に手を動かしてサイトをつくらないと、いつのまにか忘れたりもしているので、コーディング・プラクティスブックは自分の腕試しにちょうど良いです。