CSSグリッド | ウェブ制作日記

意外に難しい「横並び」

ホームページ制作を始めたばかりのころ、意外に難しかったのが「横並び」です。

きれいに横に並ばなかったり、仮に横並びになったとしても不要な隙間ができたり…。
単純なはずの「横並び」がこんなに難しいとは思いませんでした。

横並びの問題はその後、clearfix（クリアフィックス）を覚えたことにより解決します。
参考にした書籍は『HTML5&CSS3デザインブック』（エビスコム著）です。

この本は第1章でクリアフィックスを使った横並べの手法が丁寧に書かれており、これによりきれいな横並びの手法を学ぶことが出来ました。

こうして「横並びにはクリアフィックス」することを学んだのですが、その後、display:flexで横並びにできるらしいと知りました。

けれど、ホームページを制作するにはHTMLやCSS以外にも覚えなければならないことがあるため、flexの勉強は後回しにしていました。

ですがいつまでもflexを勉強しないというわけにはいかないので、2019年の正月はflexの勉強をしていました。

参考にしたのは例によってエビスコムさんの『CSSグリッドで作る HTML5&CSS3』と『HTML5&CSS3ステップアップブック』です。
どちらの本もCSSグリッドでホームページを作る方法が書かれています。

『CSSグリッドで作る HTML5&CSS3』は2018年の年末に発売された本です。この本が発売されたので、本腰を入れてCSSグリッドの勉強をする気になりました。
『HTML5&CSS3ステップアップブック』のほうにはflexの説明があります。

余談ですが、私はエビスコムさんの著作を気に入っています。
WordPressについてもエビスコムさんの著作で勉強させてもらいました。

もちろんエビスコムさんの本よりも優れた書物はたくさんあるのですが、安定的なクオリティで執筆されているのがエビスコムさんの本の特徴ですね。

CSSグリッドを使ってみた感想ですが、確かにホームページ制作が楽になる気がします。
「なんでホームページ制作が楽になるの？」と突っ込まれると返事に困るのですが、なんとなく楽になります（笑）。

う～ん、上手く説明できません。

上手くは説明できませんが、今後私はCSSグリッドでホームページを作るでしょうね。
数多くのホームページを作り続ければ、CSSグリッドの本質が見えてくるかもしれません。