#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のブロックネスト対応パターンと
それぞれパターンの選択基準について書きます。