エビスコムより2020年1月にリリースされた電子書籍「HTML&CSS コーディング・ プラクティスブック 1」（以下、コーディングプラクティスブック）を読んだので紹介します。
HTML&CSS コーディング・プラクティスブックについて
コーディングプラクティスブックはデザインカンプと指示書に従い、Webページをコーディングして作成する実践シリーズになっています。
私は何も考えず読み始めてしまいましたが、ただ読むだけではあまり実力は見に付きません。
おすすめはAdobe XDで作成されたデザインカンプと指示書に書いてある内容を見ながら、自分で設計を考えて実際に作成してみること。
書籍内にてページの作り方（作例）も載ってありますが、これが絶対的な正解というわけでもないですし、自分なりのコードでサイトを作り上げてみてください。
HTML&CSS コーディング・プラクティスブックの特徴
コーディングプラクティスブックは、一般的なHTML&CSS本とは異なります。
見本のデザインページを作るためのテクニックについては紹介してありますが、基本的なHTML&CSSの知識については取り上げていません。
これからHTML&CSSを学びたいという方は、まず「フレキシブルボックスで作るHTML5&CSS3レッスンブック」で知識を身につけてからコーディングプラクティスブックに挑戦してみると良いかと思います。
コーディングプラクティスブックの特徴は、何と言ってもデザインカンプをもとにページをつくるというところ。
自分でデザインカンプから素材・パーツのサイズやフォント、色などをチェックし、なるべくデザインカンプのとおりにページを作成する力を求められます。
もちろん、そのまま読み進めていくこともできますが、ただコードを打ち込むだけになってしまうので、それでは正直あまり面白みがありません。
私はそれをやってしまったのですが、もうちょっと考えてからやればよかったと後悔。
難しければその都度作例をチェックするも良し、自分ならコードをこうするとアレンジするも良し、素材だけを利用してオリジナルのサイトを作ってみても良し。
コーディングプラクティスブックはただ読むだけじゃもったいない、自由度のある内容で読者のクリエイティビティを刺激してくれる書籍なのです。
HTML&CSS コーディング・プラクティスブックを読んで気になったところ
コーディングプラクティスブックを読んで気になった点が一か所あります。
それはAdobe XDの操作について一切説明がないこと。
XD形式のカンプから素材の色やサイズ、余白などを取得しなければならないのに、参照する手段が載っていないというのは初心者に優しくない。
というのも私がAdobe XD初心者で、素材のサイズや間隔の数値を取得するのに大苦戦。
適当に動かしているうちに何とか取得するやり方はわかったから良かったのですが、チマチマした作業に正直イライラしてしまいました。
私と同じくAdobe XD初心者で使い方がわからないという方へのアドバイスとしては、ダブルクリックで要素を選択することができ、Altキーを押しながらマウスカーソルをあてることで距離を調べられます。
書籍内にて要素のサイズや色の数値は記載されているので、使い方がわからなくても致命的ではないのですが、少しでも解説してあると助かったかなぁ……
追記：ver.1.1で「Adobe XDで値を確認する方法」が追加
Adobe XDの操作について一切説明がないと書いたところ、2020年2月10日に更新された ver.1.1にて、APPENDIX「Adobe XDで値を確認する方法」のページが追加されました。
詳細にオブジェクトの値の確認方法を解説してくれているので、Adobe XDを触ったことのない方でもこれで安心です。
HTML&CSS コーディング・プラクティスブック 1と2の違いについて
コーディングプラクティスブックにはコーポレート系サイトを作る「1」と、カフェ系サイトを作る「2」があります。
「1」と「2」の違いについてはサイトを作る難易度と指示書の内容がちょっと違うだけで、どちらも読んでも良いですし、作ってみたいサイトデザインのほうだけを選んでも構いません。
私は「1」をただ書籍を読みながらコードを打ち込んだだけなので、「2」ではちゃんとデザインカンプと指示書に従い、自分の力でコーディングにチャレンジしてみたいと思います。
「2」まで読み終えたときに、またちゃんとした感想は書く予定です。