どうも、にわじゅん（@niwajun_blog）です。
HTMLでコーディングする際のデザインの各パーツの捉え方を紹介します。
・デザインで共通する部分はクラス名を同じにする
大きなブロックで分ける
例えばこんな感じのデザインがあったとします。上から、ヘッダー、ファーストビュー、各コンテンツ、最後にフッターといった内容です。
まずは大きな枠で捉えるために、ヘッダー、メイン、フッターと大きなブロックで分けてみましょう。さらに、メイン部分をfv（ファーストビュー）、A、B、Cのブロックに分けてみます。
分けたブロックをHTMLで書いてみます。
<header>
</header>
<main>
<div> ファーストビュー
</div>
<section> Aブロック
</section>
<section> Bブロック
</section>
<section> Cブロック
</section>
</main>
<footer>
</footer>
これで大きなブロック分けはとりあえずこんな感じです。（ブロックの捉え方の紹介なのでHTML、CSSの細かな記述は割愛してます。）
デザインで共通する部分はクラス名を同じにする
続いて、デザイン全体を通して上下の余白や左右の幅、文字の大きさや色が同じパーツがないか調べて、同じパーツには同じクラス名を付けていきます。
では、メイン部分の各コンテンツＡ，Ｂ，Ｃの部分に注目してみましょう。
A、B、C各ブロック全て、上の余白は100px、下の余白は50pxだった場合、
各ブロックは共通したパーツとして捉えられそうなので、さきほど書いたsectionタグに同じクラス名を書いてみます。
<section class="section"> Aブロックのセクション
</section>
<section class="section"> Bブロックのセクション
</section>
<section class="section"> Cブロックのセクション
</section>こんな感じで全てのブロックをsectionというクラス名としました。
同じクラス名にしておけば、CSSでsectionクラスに
padding-bottom: 50px;
を設定するだけで、A、B、C全てのブロックに同じ余白が適用されるのでCSSの記述がシンプルになり管理しやすくなりますね。
こんな感じで各ブロックのタイトルやコンテンツの幅なども見てみましょう。
各タイトルも文字の大きさや色などが同じなので、共通のパーツとして考えてよさそうですね。
あとは、Aセクションのコンテンツ、Bセクションのコンテンツの横幅も同じ場合は共通のパーツとして考えられそうです。
タイトル、コンテンツを共通のパーツとして捉えたHTMLがこんな感じです。
<main>
<section class="section">
<h2 class="section__title">自己紹介</h2>
<div class="section__inner">
ここにAセクションのコンテンツを記述
</div>
</section>
<section class="section">
<h2 class="section__title">活動内容</h2>
<div class="section__inner">
ここにBセクションのコンテンツを記述
</div>
</section>
<section class="section">
<h2 class="section__title">お問い合わせ</h2>
</section>
</main>タイトルのクラス名はsection__title、コンテンツを囲むクラス名はsection__innerというクラスを付けてみました。
CSSでsection__titleには文字サイズや色など、section__innerには横幅を書けば、各パーツに適用されるのでこちらもシンプルになります。（section__innerは横幅を設定するだけのタグなので、実際にはこの中にA、Bそれぞれのコンテンツを記述していくことになります。）
まとめ
簡単ではありますが大きなブロックや共通のパーツとして捉え方の紹介でした。
HTMLの書き方には人それぞれの書き方があり、正解があるわけではありません。
そんな中でも共通化してCSSをシンプルにしておけば、記述は少なく済みますし、後々修正が入った場合にも手直しする箇所が少なく済みます。
ブロック分けやパーツの捉え方も色んなパターンが考えられると思います。その一例として参考にしていただけたら嬉しいです。
また、ブログを読んだ感想なども頂けるとすっごく嬉しいです！
では、また～！
コメント