CSSの難しさが分かるようになった人にお勧めの解説書、さまざまなレイアウトを実装する再利用性を向上させるCSSの設計方法 -Every Layout

CSSって面白いと思い始めた人、CSSの難しさが分かるようになった人、そしてCSSが大好物な人にお勧めの解説書を紹介します。

本書は、CSSの経験を積んでいるデベロッパー向けの解説書です。レスポンシブデザインを実現するレイアウトについて実装だけでなく、設計・管理・考え方について詳しく解説されています。

Every Layout

本書の元になっているのは、Relearn CSS layoutです。公開されたのは2019年ですが、現在でも人気が高いサイトで、さまざまなレイアウトを実装するCSSの設計方法について解説されています。その日本語版ともいえるのが本書です。

本書は来週発売! 一足先に中身を紹介します。

Every Layout

Every Layout -モジュラーなレスポンシブデザインを実現するCSS設計論
ISBN 978-4-86246-517-7
[Amazonでみる]
[楽天でみる]

著者: ヘイドン・ピカリング、アンディ・ベル
監訳: 安田 祐平、横内 宏樹
出版社: 株式会社ボーンデジタル
発売日: 2021/11/23

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の目次

Every Layoutの本

Every Layoutの目次

Every Layoutの本

Every Layoutの目次

CSSは進化が早く、新機能や新ツールがどんどん登場しています。もちろん、それらを使いこなすことも大事ですが、最も重要なのは考え方を身につけることです。
CSSの再利用性、モジュール化などについて学びたい人にお勧めします。

Every Layout

Every Layout -モジュラーなレスポンシブデザインを実現するCSS設計論
ISBN 978-4-86246-517-7
[Amazonでみる]
[楽天でみる]

著者: ヘイドン・ピカリング、アンディ・ベル
監訳: 安田 祐平、横内 宏樹
出版社: 株式会社ボーンデジタル
発売日: 2021/11/23

献本の御礼

最後に、献本いただいたボーンデジタルの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

sponsors

top of page

©2021 coliss