HTMLとCSSに真剣に取り組んでいる人におすすめの解説書！ 最近の実装テクニックやレイアウト・コンポーネントのスニペットが満載の一冊 -HTML＋CSSコーディングの強化書
Post on:2022年3月18日
sponsors
HTMLとCSSの実務レベルの知識とスキルが身につく解説書を紹介します。
FlexboxやCSS Gridを使用したさまざまな基本レイアウト、実務でよく使用されるレイアウトやコンポーネント、表組み・フォームの実装、メンテナンス性に優れたCSS設計、アクセシビリティに配慮したマークアップ、WordPress化に適した設計方法など、即戦力となる実装テクニックが学べます。
そして、朗報です！！！🎉
去年の暮れに発売されたばかりですが、本日からKindle版が半額セールの対象になっています。期間は3/29まで、絶対お見逃しないように！
タイトルの「引き出しを増やす」とある通り、レイアウトやコンポーネントの汎用性に優れたコードが豊富に掲載されており、かなり便利な一冊です。
HTMLとCSSの中級者向けで、業務としてコーディング・マークアップに取り組んでいる人向けの解説書です。デザインカンプから情報を読み解き、Webページを実装するための考え方から具体的なテクニックまで詳しくていねいに解説されています。
Kindle版も発売されています。
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書は6章構成、第1章は「基本レイアウト」で、「一番簡単なレスポンシブ」から始まります。HTMLのsection要素が、、、CSSのdisplayプロパティが、、、などという基礎知識の説明は一切なく、上記が本書の1ページ目です。実践で役立つ知識とテクニックが一冊になっているのが本書の大きな特徴です。
とはいっても、最低限の基礎知識の解説はあります。CSSのclamp()関数、repeat()関数、minmax()関数、aspect-ratioプロパティなど、比較的新しい機能はしっかり押さえておきましょう。
- CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説
- しっかり理解しておくと便利なCSSのテクニック、minmax()関数の使い方
- CSS aspect-ratioプロパティの基礎知識、便利な使い方、実装に必要なプログレッシブエンハンスメント
Flexboxを使用した基本レイアウト、CSS Gridを使用した基本レイアウト、ビューポートを基準にした単位vw, vh、新しい値の指定方法min(), max(), clamp()、メディアクエリを使用したレスポンシブ、メディアクエリなしのレスポンシブなど、さまざまなレイアウトのベースになる実装がまとめられています。
第2章は「応用レイアウト」として、アスペクト比の制御、背景色エリアの制御、カードレイアウト、ブロークングリッドなど、実務でよく使用されるコンポーネントです。
実装はもちろんレスポンシブ完全対応なので、さまざまなスクリーンサイズでレイアウトが崩れないようにする細かいテクニックまで詳しくていねいに解説されています。
第3章は、みんな大好き「表組み・フォーム」です。シンプルでアクセシブルなHTMLで、ユーザビリティに優れた表組みとフォームを実装します。さまざまなスクリーンサイズに対応するのはもちろん、スマホの物理キーボードに対応した実装方法が分かります。
フォームはユーザーの使い勝手を意識すると、実装にさまざまな注意点があります。最低限のユーザビリティとアクセシビリティを配慮した実装方法を学びます。
第4章は「CSS設計」、設計で重要なのが、予測しやすいこと、再利用しやすいこと、保守しやすいこと、拡張しやすいこと。本書ではBEMをベースとしてパーツ単位で設計方法を考察していきます。
ヘッダ、見出し、ボタン、カード型一覧、余白を例に、BEMを基本としたCSS設計をします。どこをBlockにするとよいのか、バリエーションはどうするのか、class名はどうするのか、その思考プロセスもていねいに解説されています。
余白をどうするのかもCSSでは意見が分かれるところです。marginなのか、paddingなのか、上なのか下なのか。本書ではページのレイアウト、セクション、見出し、ボタン単位でこの余白について考察します。
第5章は「マークアップ」特にアクセシビリティに重点をおいて、マークアップの意義と役割ついて解説されています。
最後の第6章は「総合演習」ここまで学んだ実装の総まとめとして、仕様の策定、素材の書き出し、開発環境の構築、コンポーネント設計など、実務を想定した実装を学びます。また、実装はWordPress化を想定した静的ページになっており、そういう案計が増えてきた人にぴったりです。
HTML＋CSSコーディングの強化書の目次
HTML＋CSSコーディングの強化書の目次
HTML＋CSSコーディングの強化書の目次
タイトルにある通り「引き出しを増やす」解説書です。基本レイアウト、応用レイアウト、表組み・フォーム、CSS設計など、豊富な実例が掲載されています。レイアウトのベースに使えるコード、コンポーネントやUI要素なども小さな単位でのコードで、さまざまなプロジェクトで活用できます。
献本の御礼
最後に、献本いただいたエムディエヌコーポレーションの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
