🌸

CSS入門時はとりあえずレイアウト（位置指定）から理解していけという話

2021/04/28に公開

前置き

CSSは覚えることが多いです。

Webプログラミングの基礎と言われますが、まともに使えるようにするとなるとそれなりに時間を要します。体系的に学習を行わなければ脳内整理が困難となるでしょう。Webプログラミング学習を始めたばかりの人であれば、CSSを書き始める前に「HTMLタグ・CSSファイルのフォーマット・CSSの基本プロパティ」などが前提知識として必要となりますが、その上でCSSの細かい知識を吸収していくとなるとかなりのコストがかかります。

また、基本的なプロパティについては文章だけでイメージすることは人によっては難しく、実際に使ってみて初めてイメージを掴むことができるものもあるかと思います。とりわけ、Flexboxやpositionなど「位置レイアウト」に関するCSSについては、設定項目が多いものや子要素に対して相対的に効果を成すものがあるため、「位置レイアウト」という極々基本的なことをしようとするだけで多くの基礎知識が求められることになります。

こういった背景でいきなり真面目にCSSを書き出すと、
・この書き方であっているのだろうか
・思ったとおりにスタイリングできない
・既存サイトのCSSを参考にしても思ったとおりにいかない
といったような問題にぶつかり、そこからなかなか抜け出せない人もいるのではないでしょうか（私がそうでした）。

私自身が当時のことを振り返り、「CSS学習前にこれを知っていればもっとスムーズに学習できたのになぁ」と思うことをまとめてみました。

1. そもそもCSSを学習する必要はあるか

サーバーサイドエンジニアの場合、CSSを一切いじらないということもあるかと思います。CSSは主にフロントエンドエンジニアやデザイナーの方が担当するパターンが多く、CSSを学習する必要があるかどうかは会社の組織構造や自分のキャリアパスによる依存します。すべてのトピックを学習するということは時間的に困難なため、自分に必要な知識の優先度を改めて確認しましょう。

フロントエンドやデザインに関わっていきたい、ということであればCSSに時間を割くのも良いかと思いますがバックエンドをやっていきたいという人にとって重要度はかなり低いものとなります。また、CSSフレームワークというものを使うことでシンプルなデザインであればCSSの知識はほとんどなしに実装可能です。

全員がCSSをかけるチーム・CSSを書く専任のメンバーがいるチーム・CSSを書ける人がいないチームなど組織によって重要度は変わります。まだ組織に属していない人であれば、興味がない限りCSSを学習する優先度は低いと思われます。私の場合は個人サイトのデザインにオリジナリティを持たせたかったので自習しましたが、そういった理由がなければ他のトピック学習に時間を割いた方が良いでしょう。

2. CSSフレームワークを使うべきか

「フレームワーク」とは、一般的に利用される機能が実装されておりそれを呼び出すだけで簡単に要件を満たすことができる、というものです。例えばこれだけ聞くとフレームワークを使わないのは損じゃないか、と思われる方もいるかもしれません。しかし、ここで重要なことは CSSフレームワークはすべての人のためのものではない ということです。

Bootstrap・Semantic UI・Bulmaなど、CSSフレームワークは多く存在しています。例えばBootstrapというCSSフレームワークは決まったルールでHTMLを構築するだけでスマートなレイアウト構築を行い、JavaScriptを併用した画像のカルーセル（スライド）UIも簡単に実装できます。

この「決まったルール」というのが非常に厄介で、 フレームワークで用意されたコンポーネントをカスタマイズする場合は全体の構成を把握した上で壊れないように変更を行う必要があります。

上記理由から、オリジナルのデザインでレイアウトを行う場合はCSSフレームワークを利用しない方が良いとされることがあります。初学者がCSSフレームワークを使って自分の思い描いた独自レイアウトを実装するというのはかなり厳しいですし、私も出来る限りしたくありません。CSSフレームワークのシンプルなカスタマイズしやすいコンポーネントだけを使って実装するという方法もありますが、今はそこを考えるフェーズではないので基礎から少しずつ理解していきましょう。

また、そのようにフレームワークを利用した場合CSSの学習にはほとんど向きません。 なぜなら「CSSフレームワークの素晴らしさはCSSのことを知らなくても利用できることにある」からです。今自分が達成したい目的が「CSSを学習したい」のか「フレームワークを利用して素早くサービスを立ち上げたい」のかによって使い分けるのが良いでしょう。

3. 最低限覚えるべきCSSプロパティ

これ以降は「CSSの学習が必要な人」向けに話を進めます。

CSSには様々なプロパティが用意されています。文字の揃え方を決める text-align や背景色を決める background-color などがそれにあたりますが、これらはとりあえずどうでも良いです。これらは直接HTML要素を装飾するプロパティのため、必要に応じてカスタマイズできます。あとから必要に応じて調べてください。

まず第一に覚えるべきプロパティはレイアウト、つまり「位置取り」に関するものです。 これらは他の要素のCSSプロパティによって結果が変わるものが多く、それぞれのプロパティが相互作用する感覚をつかめなければ「色合いやグラデーションなどの見た目だけ頑張って整えたのに位置だけ上手くいかず力尽きる」ということがあるかと思います（私がそうでした）。

逆に、まずはレイアウトだけできるようになれば、色合いやグラデーションなどの見た目調整を追って行うことは比較的簡単です。一気に色々なものを頭に入れるとパンクするのでレイアウトだけしっかりとすることを目標にしてください。

以降はこのサンプルコードをもとに説明します。
https://codepen.io/defunty/pen/KKaMXRz

3.1 margin・padding

レイアウトに関する一番シンプルなプロパティが margin です。このプロパティは適用された 要素外側 の上下左右に余白を作成します。

以上です。簡単ですね。

余談ですが、初学者の中には隙間を作るために padding を利用する人もいるんじゃないかと思います（私がそうでした）。

padding は 要素内側 の上下左右に余白を作成するものです。つまり要素を膨らませるような形で利用されます。
結果的に margin と同じように余白ができたように見えますが、背景色を持っている要素の場合は要素自体が膨らみ margin を利用した場合とは別の見た目となります。

サンプルのスクリーンショット（margin・padding）

プロパティを使う際はそれぞれの役割を理解して使ってください。プロパティ自体が持つ意図とは異なる形でスタイリングを行うと、結果として上手くいったとしても他の状況で綻びが出てしまいます。 常にプロパティの役割を意識しましょう。これはCSSを書く上で非常に重要となる考え方です。 プログラミングにも言えることですが、意味を持った記述を行えば読みやすく理解しやすく結果として適切な出力を行う良い感じのコードとすることができます。

3.2 display

display はその要素の表示形式を定義します。 display に設定できる値はいくつもありますが、その中でもとりあえず以下3つだけ覚えてください。

display: block; /* 縦に並ぶ、親要素の幅いっぱいに広がる（width未指定の場合） */
display: inline; /* 横に並ぶ、要素の中身に合わせた幅になる、height・width・padding・marginなどの一部プロパティが効かない、 */
display: inline-block; /* inlineとblockの特徴を併せ持つ */
display: flex; /* 様々なレイアウトが簡単にできる（Flexbox） */

タグごとに display の初期値は異なります。例えば div・p・hタグなどは display: block で、a・span・imgタグなどは display: inline です。displayの値によってプロパティが効かないこともあるため注意してください。それぞれの特徴が頭に入ってないうちはinline要素をblock要素として設定した方が制御しやすいかもしれません。

display: flex; については使い道や設定できるプロパティが非常に多いので、ちゃんと覚えようとすると大変です。正直私は覚えていません。ですが何ができるかを知っていれば非常に便利です。以下のサイトはflex要素を並べるパターンを可視化しており、自分の目的としたパターンで並べる方法を簡単に確認できます。

それぞれがどのように並ぶかの実例はサンプルコードを参照してください。

サンプルのスクリーンショット（display）

3.3 position

positionはその要素がどこに配置されるかを設定するプロパティです。top、leftなどの位置を数値で設定するためのプロパティとセットで利用することが多いです。というより「topやleftなどの位置設定プロパティを利用するためのプロパティ」と考えてもらった方が早いです。
（もしかすると私が知らないだけで、positionを使わなくてもtopやleftを利用する方法があるかもしれません）

初学者の方でとっつきづらいのが position: relative; と position: absolute; の違いだと思います。一般的には relativeは相対位置 で absoluteは絶対位置 という説明がなされますが、ピンと来ない人もいるのではないでしょうか。

もう少しざっくりな説明にすると、
relativeでは指定された要素を元いた位置基準で位置指定する
absoluteでは指定された要素を特定要素の左上基準で位置指定する
となります。

サンプルのスクリーンショット（position）

上記画像を見れば、relativeで指定されたものとabsoluteで指定されたものの位置がそれぞれ異なっていることが分かるかと思います。

absoluteについて少々ややこしいのが、「基準となる特定要素」がどの要素になるのか、ということです。これについてもざっくりというと「最も近い親・先祖要素の中で position: relative; が設定されている要素」となります。つまりrelativeとは位置指定する要素だけではなく、基準としたい親・先祖要素につける値でもあります。

個人的にはややこしいのを避けるため、relativeは基準としたい要素に、absoluteは位置指定したい要素に設定することをオススメします。

この基準要素指定に慣れさえすれば、位置指定の最終兵器として活躍してくれるとても便利なプロパティです。

4. それぞれのCSSプロパティの使い分け

少し長ったらしくなってしまったので具体的な話に戻ります。

最低限 margin・display・position の使い方さえ分かれば良い、という話をしましたが、実際はどういう使い分けをすれば良いのでしょうか。

要件次第になりますが、例えば横並びをする場合どうするかを考えます。私はとりあえずFlexboxを利用します。横並びさせるだけでなく様々な並べ方が実現可能なため、Flexboxの使い方さえ覚えてしまえば大抵の並べ方に対応できます。他の方法としてはinlineを横並びさせるのもありだと思いますが、個人的にinline自体を細かくレイアウトするのが未だに苦手なため、挙動が予測しやすい（慣れている）blockを並べることができるFlexboxを親要素として使うことが多いです。

細かいデザインが決まっておりピクセル単位の微調整が必要なもの、例えば画像の上に別の小さな画像を重ねたい、みたいなときはpositionを使います。初学者（三日目）の頃は「全部 position: absolute; でやってしまえばよいのでは？」と思っていましたが、気軽にabsoluteを利用すると要素が縦横無尽に重なる（？）ため、管理が煩雑になります。先述した通り、relativeの感覚に慣れる必要がありますが、柔軟度が最も高いプロパティの一つと言えます。

他、要素同士の間隔はmarginで対応すれば、大概のレイアウトは解決できるはずです。

まとめ

そもそもCSSを学習する必要はあるか
-> 所属チームの中で必要とされているか、キャリアパスに必要か、単純に学習したいかどうかを考慮しましょう。
CSSフレームワークは使うべきか
-> CSS自体の学習目的には不向き。Webアプリをとりあえず作ってみるという手段には最適。
最低限覚えるべきCSSプロパティ
-> レイアウトに関するプロパティ（margin・display・position）を覚えましょう。
それぞれのCSSプロパティの使い分け
-> 横並びはFlexboxかinline、細かいレイアウトはposition、要素同士の空白はmargin

長々と述べましたが、紹介したのはCSSで学ぶべき内容のほんの一部です。他にもSassやCSS設計にもついても学習し、ベストプラクティスに頭を悩ませることでしょう。自分だけでなくチーム全員が読みやすい・書きやすい方法を言語化し、足並みを揃えていかなくてはなりません。面倒くさいですね。なのでとりあえず面倒くさい部分をはしょった記事を書きました。

上記の色々と面倒くさい話は色々なツールやテクノロジーで解決できたりできなかったりしますが、今はまだそのときではありません。色々なツールを適切かつ効果的に扱うための最低限必要な土台を構築してください。この記事により、初学者の方が他の更にもっと面倒くさいことに時間を使って頂けるようになれば幸いです。