HTML&CSS コーディング・プラクティスブックで
色々と紹介していただくことのある、『HTML&CSS コーディング・プラクティスブック』。Amazon Kindleでのみ販売している電子書籍です（Kindle Unlimitedでもお読みいただけます）。
この本は、実際に仕事としてHTML&CSSコーディングを始める前の腕試しを目的に書き始めた本でした。そのため、XDやFigmaのデザインカンプを元に、どんなデザインのページを作成するのか？という情報以上は、あまり積極的に公開してきませんでした。
しかし、読んだ方の反応をもとに、この本がどんな形で使われているかを確認してみたところ、リアルなサンプルの中で、どんなテクニックをどう使うのか？を学ぶという方が多いようです。実際に、コーディングでは細かなデザインや装飾、レスポンシブの要件などに応じて使うテクニックも変わってきます。
そこで「この本で学べること - 作例のポイント＆テクニック」として、各書籍でどんなことが学べるのかをPDFでまとめています。
各書籍のページで公開していますが、１～8までのPDFを紹介させていただきます。
HTML&CSS コーディング・プラクティスブック 1
作成するのはオーソドックスなデザインのコーポレート系サイトです。複雑なレイアウトではないため、基本的な Flexbox の機能を使ってレイアウトしていきます。ただし、重ねた要素の位置調整や、横並びにした要素の横幅や間隔のコントロールなど、細かなところに気を配りながら Flexbox を使いこなしていくのがポイントとなります。
HTML&CSS コーディング・プラクティスブック 2
作成するのはブロークングリッドなデザインのカフェ系サイトです。画面幅に合わせてモバイルでは横幅を、PC では縦横両方を変化させるなど、複雑なレスポンシブの設定が求められています。そのため、画面幅に対する相対単位 vw をどのように活用するかや、サイズの値をどのように管理するかがポイントとなります。作例ではremを使った管理を行います。
HTML&CSS コーディング・プラクティスブック 3
ダークモードに対応した和風テイストなサイトを作成します。全体としてはシンプルな中央揃えのレイアウトで、個々のパーツの作成においても複雑なテクニックは必要としません。ただし、細かな装飾の入れ方を工夫したり、ダークモード対応のための調整や配慮が必要になるため、レベルは「３」としています。
HTML&CSS コーディング・プラクティスブック 4
ワンカラムのシンプルなレイアウトのコーポレート系サイトを作成します。細かな装飾的要素もありませんし、指示書による指示も少なく、 複雑な設定も必要ないことから、 基本的なHTML&CSSとFlexboxを使用して構築していきます。フォントの設定やマージンの取り方など、コーディングの基礎中の基礎をどのように使っていくかがポイントとなります。
HTML&CSS コーディング・プラクティスブック 5
作成するのは、シンプルな図形で装飾されたブランド系サイトです。装飾的な要素が多く、他のパーツに合わせたサイズ調整、重なり順、配置などについても細かく指示されています。レスポンシブも含めてレイアウトを実現するのは難しく見えてしまいますが、CSS Gridの機能を組み合わせてシンプルに実装していきます。「CSS Grid」をいかに使いこなすかがポイントとなっている作例です。
HTML&CSS コーディング・プラクティスブック 6
作成するのは、多くの商品画像で構成されたショップ系サイトです。元になるデザインカンプは12分割のグリッドでデザインされています。そのため、コーディングでもCSS Gridを使って12分割のグリッドを作成し、レイアウトしていきます。グリッドの設定をシンプルに管理し、拡張性も確保した形で活用していくことがポイントとなります。
HTML&CSS コーディング・プラクティスブック 7
勝敗表や対戦カードを掲載したイベント系サイトを作成します。テーブルを含めてレスポンシブにして、画面幅やコンテンツの行数などが変わっても、閲覧のしやすさや、デザインのバランスをいかに維持するかがポイントとなります。これらをできるだけ手間をかけずに設定していくため、作例ではFlexbox、position、overflow、tableを組み合わせてコーディングしていきます。
HTML&CSS コーディング・プラクティスブック 8
画像、テキスト、図形といった要素を重ね合わせてデザインされた、コーポレート系サイトを作成します。FlexboxとCSS Gridの使い分け、CSS変数やclamp()などの活用により、複雑なレイアウトを形にしていきます。セクションごとに個別にコントロールが必要な要素が多いため、作例では汎用化よりも最適化を重視してコーディングしているのもポイントです。
リアルなWebコーディングを体験してもらうため、サンプルのためのサンプルにならないようなデザインを目指した書籍です。そのため、遠慮のないデザインになっている部分も色々と潜んでいます。
実際に仕事でコーディングをするためには、どれくらいのスキルが必要なのか？ 普通の教材ではなかなか出会わないようなものも盛り込んでいますので、コーディングの引き出しを増やすために活用していただければと思います。
