1. エビスコムの著者NOTE

『フレキシブルボックスで作るHTML5&CSS3レッスンブック』について

フレキシブルボックスで作るHTML5&CSS3レッスンブック』は、「IE対応が必要なページでも、もうそろそろ脱フロートしてフレキシブルボックスを使ってもいいよね」、「ブラウザの開発ツールも活用して、最初からもっとわかりやすくページを作る方法を覚えてもいいよね」といった思いで執筆したHTML&CSSの入門書です。

フロート(Float)から
フレキシブルボックス(Flexbox)へ

Webページのレイアウトでは、長い間CSSのフロート(Float)を使ってきました。ただし、Floatの本来の役割は、ボックスの横に後続のテキストコンテンツを流し込むという単純なものです。これをハック的な形で利用し、さまざまな機能を組み合わせて複雑なレイアウトを実現してきたのがこれまでのWebページ制作でした。レイアウトが崩れるのを防ぐclearfix(クリアフィックス)もそんな中で編み出されたテクニックの1つです。

ところが、スマホの登場により、閲覧環境に合わせてレイアウトを変化させる「レスポンシブ」にも対応しなければならなくなります。

「1つのソースで多様な閲覧環境に対応する」というレスポンシブの思想そのものはWebに当初から備わったものですが、Floatでそこまで対応することは考えていなかったでしょう。そのため、ただでさえハック的な形で利用していたものを、さらに複雑な形で利用することになってしまいました。

そんなところに登場したのが、CSSのフレキシブルボックス(Flexbox)です。これまでにFloatで記述してきた設定は、よりシンプルなFlexboxの設定に置き換えることができます。Flexboxを使うことで、今までのハック的なテクニックもいらなくなりますし、レスポンシブへの対応も幅が広がります。

これまでのFloatによるWebページ制作が最終的に行き着くところ、収まるべき形になったものが「フレキシブルボックス(Flexbox)」と考えるとわかりやすいと思います。IE11を含めた主要ブラウザが対応していますので、そろそろFloatをレイアウトのコントロールに使うのはやめてもよいのではないでしょうか。

フレキシブルボックスで作るHTML5&CSS3レッスンブック』ではフレキシブルボックスを使ったページ制作について、モバイルファーストで、レスポンシブまで含めてステップ・バイ・ステップで解説していますので、これまでWeb制作に従事してきた方はもちろん、

といった場合に、参考にしていただければと思います。

ボックスの構造を確認しながらページ制作を進める

フレキシブルボックス(Flexbox)を使ったレイアウトは、フロート(Float)によるレイアウトの延長線上にありますので、ボックスの相互の位置関係でレイアウトをコントロールすることになります。

Flexboxを使ったページレイアウトのボックスの構造

そのため、レイアウトを進めていくと、ボックスがどのような構造になっているのか、相互の位置関係がどのボックスのマージンやパディングで調整されているのか、といったことがわかりにくくなっていきます。

このようなときに便利なのが、ブラウザに標準で装備されている開発ツール(デベロッパーツール)です。開発ツールを利用すると、ボックスの構造や位置関係はもちろん、どのCSSでどのように設定されているのかも簡単に確認することができ、どこを調整すればよいのかがすぐにわかります。

特に、Firefoxの開発ツールではフレキシブルボックスの構造までわかりやすく確認できるようになっていますので、おすすめです。『フレキシブルボックスで作るHTML5&CSS3レッスンブック』でも、Firefoxをメインブラウザとして使用し、必要に応じて開発ツールを活用していますので、参考にしてください。

FirefoxのFlexboxインスペクタ

フレキシブルボックスで作るHTML5&CSS3レッスンブック

2019年3月 ソシム株式会社刊
B5変型 320ページ / 978-4802612104

グーテンベルク時代の
WordPressノート
テーマの作り方(入門編)

グーテンベルク時代のWordPressノート テーマの作り方(入門編)

エビスコム 編著 / 224ページ(初版)/ プリント・レプリカ形式

書籍情報 著者NOTE 『グーテンベルク時代のWordPressノート テーマの作り方(入門編)』について 著者NOTE Amazon Kindleのプリントレプリカ形式を選択した理由 Amazon Kindle

プリント・レプリカ形式は無料のKindleアプリ(PC、Mac、Android、iOS用)やFireタブレットでご利用いただけます。Kindle Paperwhiteなどの電子書籍リーダーやKindle Cloud Readerでは利用できません。対応デバイスをご確認のうえ、ご利用ください。