HTMLの組み方ってイマイチわかりにくいですよね。そもそもどう考えたらいいのでしょう？

HTMLを組むこと(マークアップ)には私自身かなり苦労しました。パターンが無限に見えますし、エラーが出ないのでどう改善したらいいかわからなかったのです。１年以上前にProgateでやってみたものの、よくわからないままでした。そういう方多いと思います。

このままではダメだ！ということで半年以上毎日マークアップし続け、
ほぼほぼマークアップの組み方の体系ができたので、書き残して置くことにしました。

この記事は、過去私と同じようにHTMLに苦しんでいる方に向けて書きました。

HTMLで重要な考え方

毎日マークアップをし続けて、重要なことに気づきました。
それは、レイヤー意識です。

は？レイヤー意識？なにそれ？

レイヤーとは層です。HTMLでレイヤー＝タグです。
どういうことかといいますと、div > div > div なら3層(レイヤー)構造です。
各レイヤーの役割を意識し、スタイルを的確に当てるのです。
初めは難しく感じると思いますので、今ここでは「へー、そうなんだ」っと流しててください。

例を出しましょう

Lesson1 HTMLの考え方
Lesson2 block系とinline系の使い分け
Lesson3 準備：当たりの付け方

Lesson1 HTMLの考え方

「div div div ・・・・・ってどこまでタグ増やすのかわからない」
これが一番大きな問題でしょう。
どのようにdivなどの階層をつくるのか？一緒に考えましょう！

・画像やテキストがを括っているレイヤー
・それを上から括っているレイヤー
・それを上から括っているレイヤー
・それを上から括っているレイヤー
....etc

という風になってますね。

まず考えるのは、テキストと画像を直上で括っているレイヤー(緑)ですね。
その括っているレイヤーをコンポーネントとしましょうか。
例えばカードスタイルですね。
上の画像はカードスタイルですね。

そうこのコンポーネントのレイヤーを探すのです。

Lesson2　block系とinline系の使い分け

コンポーネントを見つけたら、次はコンポーネントの中身の並びを考えましょう！
「画像の横にテキスト」という並びにしてみましょう

　まずテキストがバラバラなので、divで括っちゃいましょう。
そうすれば、そのdivにスタイルを当てるだけで、中身のテキストを同時に動かせますからね。
div
figure
img
div(これ追加)
p
p
※こういうdivを私はラッパーと読んでます。
　Card__txt-wrapperみたいな感じのクラス名を使います。
　んー・・・コンポーネントの中身が全て横幅一杯に広がってますね。
これでは横並びにできません。なぜでしょうか？

中身の要素がブロックだからです。
※Progateでブロックうんぬん説明しているレッスンありましたよね？

ブロックは横に広がるんです。
じゃぁ、figureとdivにwidth40%とか50%でも当てたら横並びになりますか？

ならないですよ。なぜでしょうか？
それはblockだからです。見た目は縮まっても実際には縮まってないからです。

それぞれinline-blockに変えましょう。width調整すれば横並びになるはずです。

※ちなみに50%では横並びになりませんよね？なぜでしょう？
　それはご自身で確認してくださいね。ヘッダーやフッター作るときに使うことありますので。

Lesson3　準備：当たりの付け方

ここまでざっくり組み方を「お勉強」しました。
さて、実際に組んで見ましょう！

ここではXDのUIキットを使ってます。
下記よりダウンロードしてください。
https://xdresources.co/resources/responsive-resize-kit

まず大まかに捉えましょう！
ヘッダー、メイン、フッターですねぇ。
※今回はヘッダーの中に、ヒーローを入れますが階層意識をつけてもらうためにわざとです。

さて、コンポーネントレイヤーを探しましょうか！

①ヒーロー(topの目立つ画像周辺)には、テキストやボタンが並んでますね。

div.Hero
　p.txt1
　p.txt2
　button

②ヒーロの右横にもコンポーネントレイヤー発見！

　　今回はテキストを括るだけですねぇ。括るってなれば、まず私はラッパーと名付けます！

div.Hero-Txt-Wrapper
　 p.txt1
　p.txt2

ヒーロー周辺にあるので、Hero-Txt-Wrapperとしました。

③メインにカードが並んでますねぇ・・・カードはコンポーネントレイヤーになる！

div.Card
　p.txt1
　p.txt2

④ん？カードを括るレイヤーもほしいな。。そして並んでるから、listだ！

ul.Card-List
　　li.Card-List_item
　　　　p.txt1
　　　　p.txt2
　　li.Card-List_item
　　　　p.txt1
　　　　p.txt2

もしくは
ul.Card-List
　　li.Card
　　　p.txt1
　　　p.txt2

という感じでまずHTMLを組むのです

ある程度組んでから、コンポーネントとその中身毎にCSSを当てていきます。
一気にカードを並べたり・・・なんて考えると難しいです。

並べるに当たってfloatでもinlineでもflexでもなんでも良いですが、
まずカードをしっかり作った方がうまくいきます。

ラッパー(上)から当てると、ガチガチ固まりすぎて流用きかず、
よくわからないCSSの出来上がりです。

理解しやすいコンポーネントレベルについて組み上げると、 CSSが綺麗なることと無駄なレイヤーがなくなります。
デザインに合わせた必要最少レベルのレイヤー出かけるようになります。

余談：コンポーネントの中身

「コンポーネントもラッパーなんじゃない？」ってお気付きの方もいるでしょう。

そうです。
そして、コンポーネントの中身がアトミックです。
さらにいうと、アトミックの中身がエレメンタリーパーティクルです。

ここら辺の話はCSS設計レベルになるので、また今後書きます。

最終的にはAtomicDesign・FLOCCSS・BEMを融合したCSS設計
これを順序立てては書き上げる予定です。

次回はBEMです。
BEMのブロックネスト・・・お困りでしょう

だから次はBEMのブロックネスト対応パターンと
それぞれパターンの選択基準について書きます。