2020年1月にリリースされた「HTML&CSS コーディング・プラクティスブック 2 実践シリーズ」のコーディングに挑戦してみたので、その感想をお届けします。
HTML&CSS コーディング・プラクティスブック（コーディングプラクティスブック）は、Adobe XDで作成されたデザインカンプを元に、コーディングを行う実践シリーズです。
「HTML&CSS コーディング・プラクティスブック 1」は写経したのみでしたが、「HTML&CSS コーディング・プラクティスブック 2」ではXDカンプと指示書に従いながら、実際にコーディングにチャレンジしてみました。
関連記事：コーディング力を腕試しできる「HTML&CSS コーディング・プラクティスブック」
歯ごたえある難易度設定
本書の難易度はレベル4（５段階）と設定されていますが、いざ試してみるとなかなか歯ごたえのある難易度になっています。
フレックスボックス、ネガティブマージンを駆使しないとレイアウトできません。
実際、コーディングするのに苦労しました。レスポンシブも意識しなければならず、実装するのが難しかったです。
実際にやってみて己の対応力の無さを痛感
デザインカンプを見ながらコーディングをするという作業はコレがはじめて。
巷のHTML/CSS本を読み漁っている私ですが、自分で文書構造を考えコーディングし、デザイン通りにつくるのが難しいということを痛感。
自分でイチから組み立てるのに対し、他人がつくったデザインの意図を読み取り、実装する。それが実に難しい……
加えてAdobe XDの操作に慣れていなかったため、データを読み取るのにも一苦労。
パッと見は何となくサマになっていますが、よくよく見てみるとところどころズレたりしています。
コードも冗長になってますし、もっとスマートに記述しなきゃと反省。
答え合わせで見つけた気づき
自分で実際にコーディングした後に、作例を見ながら写経した際に見つけた気づきをいくつか挙げてみます。
- 余白のラインの意識
- 余白・文字サイズのレスポンシブ化
- カンプデータの読み取り力
- 人によって異なるマークアップ
余白のラインの意識
作例を見ていちばん驚いたというか、見逃してしまったなぁというのが左右の余白の縦のライン。
両端の余白は当然意識しますが、他のラインの存在を見落としていました。
ずれたレイアウトになっていたので、何かしら規則性があるのをもっと感じ取る必要がありました。
余白・文字サイズのレスポンシブ化
実装方法に難儀したのが余白とフォントサイズのレスポンシブ。
指示書に書かれているのでやらなきゃいけないのですが（面倒）、デザインカンプだけでは読み取りづらいので、自分で考えて実装する必要があります。
作例のフォントサイズをルートで「1rem=100px」にする手法は初耳でしたし、「vw」でレスポンシブに対応するやり方も面白く、タメになりました。
カンプデータの読み取り力
背景画像の境界や半透明オブジェクトとか、作例を見るまで見落としていた点が多々あり。
カンプをもっと触っていれば気づけたのかもしれませんが、サイズばっかり測って素材はスルーしてしまっていました。
Adobe XDの使い方もまだまだですし、今後触れる機会も増やしていきたいところ。
人によって異なるマークアップ
デザインカンプを見ながら自分で制作する必要があるので、当然記述する内容も人によって変わってきます。
作例ではコンテンツをarticle, asideでマークアップしていましたが、私はすべてsectionでマークアップしていました。
サイトをつくる人によってコードの書き方は千差万別。明確な正解というのもないはず。
いろんな人が書いたコードを投稿・共有する場所があったら、議論したりなどして盛り上がりそうだなぁと感じました。
自分で考える力が試される
HTML&CSS コーディング・プラクティスブックは、自分で考えてコーディングする力が試されます。
自分でサイトデザインもやってコーディングするとなると、つい得意のカタチに行きがち。
他人からの指示・制約があるなかコーディングする、やったことのないレイアウトに挑戦してみることで、新たな幅が広がるのかもしれません。