CSSの難しさが分かるようになった人にお勧めの解説書、さまざまなレイアウトを実装する再利用性を向上させるCSSの設計方法 -Every Layout
Post on:2021年11月19日
sponsors
CSSって面白いと思い始めた人、CSSの難しさが分かるようになった人、そしてCSSが大好物な人にお勧めの解説書を紹介します。
本書は、CSSの経験を積んでいるデベロッパー向けの解説書です。レスポンシブデザインを実現するレイアウトについて実装だけでなく、設計・管理・考え方について詳しく解説されています。
本書の元になっているのは、Relearn CSS layoutです。公開されたのは2019年ですが、現在でも人気が高いサイトで、さまざまなレイアウトを実装するCSSの設計方法について解説されています。その日本語版ともいえるのが本書です。
本書は来週発売！ 一足先に中身を紹介します。
Kindle版も同時発売です。
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書の構成はサイトと同様に、2つのチャプターに6と12のセクションで構成されています。CSSのボックスモデルや単位といった基本的な知識や考え方から、さまざまなレイアウトの構築方法を学ぶことができます。
CSSで一番重要なのはボックスモデル、CSSでのレイアウトは必ずボックスを使用します。ボックスモデルの基礎知識、標準的な振る舞い、ボックスにおけるコンテンツの扱いなど、改めて学び直すよい機会になります。
チャプター1の基礎では、コンポジション、単位、グローバルとローカルスタイル、モジュラースケール、デザインの公理について学びます。
チャプター2からは、レイアウト。Webサイトやスマホアプリでよく使用されるさまざまなレイアウトの実装・設計方法を学びます。
Relearn CSS layoutは英語圏のサイトですが、日本語サイトでも同じテクニックが通用するのか心配はいりません。ソースコードのコメントや英語と日本語の文字幅が異なるなどは監修者注がつき、フォローされています。
各レイアウトは再利用性の高いコンポーネントで、使い方、実装例、カスタマイズ方法なども詳しく解説されています。
例えば、中央揃えにもコンテンツに適したさまざまな実装方法があります。両端にスペースを確保した中央揃えは、知っておくと非常に便利です。
サイドバーもよく使用されるレイアウトです。固定幅だったり、スマホでどう表示させるのか、メインのコンテンツとの高さはどうするのか、メインのコンテンツとのスペースはどうするのか、また最近では中のコンテンツのサイズに依存したサイドバーなども見かけます。
カバーも非常によく使用されますね。実装のポイントは、高さをどう処理するのかです。本書ではコンテンツに応じたさまざまな実装方法が解説されています。
CSS Gridによるグリッド、Flexboxによるグリッドは、モジュール化することで再利用可能なCSSとして実装できます。
ページのレイアウトだけではありません、ブロックレベルではなくインラインレベルのアイコンの実装方法も追求されています。アイコンとテキスト間のスペース、アイコンとテキストの高さや垂直方向の揃え、テキストがユーザーによってサイズ変更された場合などが分かります。
Every Layoutの目次
Every Layoutの目次
Every Layoutの目次
Every Layoutの目次
Every Layoutの目次
CSSは進化が早く、新機能や新ツールがどんどん登場しています。もちろん、それらを使いこなすことも大事ですが、最も重要なのは考え方を身につけることです。
CSSの再利用性、モジュール化などについて学びたい人にお勧めします。
献本の御礼
最後に、献本いただいたボーンデジタルの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
