何となくHTML/CSSを書いていた人が考えて書けるようになった第一歩

# HTML/CSSは難しい

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

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

## 本記事で書かないこと

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

# 私は右に寄せたい

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

[^1]: Bootstrap v3のクラス。v4以降は使えない。http://bootstrap3.cyberlab.info/css/helperClasses-floats.html

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNwdOmv" data-user="patrush" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/patrush/pen/oNwdOmv">
  right-sample</a> by patrush (<a href="https://codepen.io/patrush">@patrush</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

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

https://developer.mozilla.org/ja/docs/Web/CSS/text-align

`text-align`の項目では、まず以下のように書かれている。
> text-align は CSS のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。

また、少し下の方に値：rightについても書かれている。
> インラインコンテンツは行ボックスの右辺に寄せられます。


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

[^2]: https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements
[^3]: https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="qBjYzmP" data-user="patrush" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/patrush/pen/qBjYzmP">
  right-sample-fail</a> by patrush (<a href="https://codepen.io/patrush">@patrush</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

ただ、そもそも何が箱や中身として定義されているのか、またそれを見分ける基準がまだ分からない。
先程のブロック要素・インライン要素の関連情報を見ると、`display`プロパティ[^4]というものがあり、以下のように書かれている。
[^4]: https://developer.mozilla.org/ja/docs/Web/CSS/display

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


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

[^5]: 実際にはこの2つ以外にもたくさん設定できる値があるため、かなり端折った表現です。

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNOJVvx" data-user="patrush" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/patrush/pen/WNOJVvx">
  right-sample-again</a> by patrush (<a href="https://codepen.io/patrush">@patrush</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

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