IEのサポート終了が迫り、最新ブラウザが対応したモダンなCSSを利用できるようになりました。そこで、こうしたCSSを活用してコーディングする
『HTML&CSS コーディング・プラクティスブック 8
with モダンコーディング & Overlappingデザイン（要素を重ねるデザイン）』
をリリースしました。
今回のデザインはレイアウトが複雑なため、最初に思ったことは「これはコーディングが大変そう…」でした。
しかし、しっかりとデザインを解析し、次のようにモダンなCSSを本格的に導入した結果、想像した以上に設定が簡潔になり、わかりやすくコーディングできたと思います。
- Fluidタイポグラフィでメディアクエリ@mediaを使わずにフォントサイズを変える
- clamp()、calc()、max()といったCSS関数を活用する
- さまざまな可変サイズ（vw、fr、%など）を活用する
- CSS変数（カスタムプロパティ）を使ってサイズを管理する
- 縦横比aspect-ratioを維持したレスポンシブにする
- display: contents で必要に応じてグループを解除する
など
レイアウトについても、パーツや構成要素ごとに最適な手法（CSS Grid、Flexbox、Position）を選択し、Figmaが持つ機能も活用して、効率よくコーディングしています。
XDとFigmaについて
今回は、Adobe XDとFigmaのそれぞれで作成したデザインカンプを収録しています。
どちらもWebサイトやアプリのデザインを作成するツールですが、XDが従来のグラフィックデザインソフトに近いものであるのに対し、Figmaはコーディングを前提としたデザインに特化したツール、というのが個人的な印象です。
デザインカンプを作る上でも、白紙の状態から自由にデザインを形にしていくならXD、ある程度できあがったデザインをWeb用に整えていくならFigmaが使いやすいと感じます。Adobe系のツールを使い慣れているのも大きいのかもしれませんが…。
一方で、デザインカンプからコーディングに必要な情報を得る上では、現状ではFigmaの方がいろいろと便利な機能を備えています。
たとえば、今回の『HTML&CSS コーディング・プラクティスブック 8』では、特定のボックスを基準にした位置指定のコード（%で算出されたレスポンシブ対応なpositionの値）を取得するため、FigmaのFrame（フレーム）を利用しています。
FigmaのAuto Layout（オートレイアウト）でデザインされたパーツからはFlexboxの設定が取得できますし、グラーデーションの設定も簡単に取得できます。
作例はFigmaを使ってコーディングしていきますが、必要に応じてXDの場合はどうやって対応するかも解説しています。XDとFigmaを使い比べてみるという視点でも活用していただければと思います。
『HTML&CSS コーディング・プラクティスブック 8』をAmazon Kindleで読む
なお、モダンなCSSや、さまざまなケースでのCSS GridとFlexboxの最適な使い分けの詳細については、下記書籍で解説していますので参考にしてください。