HTML/CSSは難しい

業界に入って数年、インフラからフロントエンドまでフルスタック気味に携わってきたが、
とは言えサーバサイドがメインだったため業務でHTML/CSSを書くときは画面として成立させるまでで精一杯で、「本当にこの書き方がベストなのか？」というところまで検討して書けていなかった。

しかし下にメンバがつく立場にもなってきたので、一旦ここで自分のHTML/CSSに対するモヤモヤや何となくで書いていたことを解消すべく色々調べてみた。
似たような境遇の方に役立つかもしれないと思い、得た知識とそこに至るまでの流れをざっくりと書いてみる。

本記事で書かないこと

HTML/CSSの基本（ある程度書いたことのある人向け）
CSS設計（どう書くべきか）

私は右に寄せたい

業務でよくモヤったのが、「何か」を右に寄せて表示したい時。
他の開発者が書いたコードを見るとtext-align: right だの float: right　だの class="pull-right"¹だのそれっぽいものがいくつかあり、文字を寄せたいときは何となくtext-alignかな、と試してみて動いたら採用するみたいな感じだった。

テキストをある枠内で右寄せしたい場合は以下サンプルのように外枠にtext-align: rightを指定することで右に寄ってくれる。

See the Pen right-sample by patrush (@patrush) on CodePen.

`text-align: right` とは何者か

ここからが本題で、そもそもtext-align: rightが具体的に何をどうしているのかを調べる。

何事も原典にあたるべし、ということでMDN WEB Docsを見る。

text-alignの項目では、まず以下のように書かれている。

text-align は CSS のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。

また、少し下の方に値：rightについても書かれている。

インラインコンテンツは行ボックスの右辺に寄せられます。

ここで出てくる「ブロック²」・「インライン³」の詳細はMDNが詳しいので省略するが（丸投げ）、要するにtext-alignプロパティは右に寄せたい中身そのものではなく、それを入れる箱側に対して設定してやる必要があるということを言っている。

そのため、以下のように中身の方にtext-align: rightを設定すると思い通り右に寄ってくれないことがわかる。

See the Pen right-sample-fail by patrush (@patrush) on CodePen.

また、右に寄せたいものが箱の中の箱だったりする場合も、別の方法による必要がある。（本記事では割愛）

何が箱で何が中身になるのか

ただ、そもそも何が箱や中身として定義されているのか、またそれを見分ける基準がまだ分からない。
先程のブロック要素・インライン要素の関連情報を見ると、displayプロパティ⁴というものがあり、以下のように書かれている。

display は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えばフローレイアウト、グリッド、フレックスなどを設定します。

これを読むと、各セレクタのdisplayプロパティの値がblockならば箱として、inlineならば中身のように振る舞ってくれるというわけである。⁵

つまり、以下のように先程失敗したspanタグへのtext-align: rightの指定も、displayプロパティの設定次第では可能であるということである。

See the Pen right-sample-again by patrush (@patrush) on CodePen.

HTML/CSSは思っているほど難しくないかもしれない

文字を右に寄せるだけの操作を調べただけでも結構知らなかったことが出てきた。
HTMLはコードを書くとわかりやすく目に見える形で結果が表示されるという性質によるためなのか（自分もそうだったが）とりあえず書いてみてできたらまた次のステップへ、という感じで先に進みやすい一方で座学の部分にスポットライトが当たるケースが少ない気がした。

ただ、普段サーバサイドの開発でやるように分からないところはドキュメントを参照するなりして背景を理解しながら進んでいけば、自分が思っているほど怖いものではないかもしれないなという記事でした。

Bootstrap v3のクラス。v4以降は使えない。http://bootstrap3.cyberlab.info/css/helperClasses-floats.html ↩
https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements ↩
https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements ↩
https://developer.mozilla.org/ja/docs/Web/CSS/display ↩
実際にはこの2つ以外にもたくさん設定できる値があるため、かなり端折った表現です。 ↩