見出し画像

HTMLのマークアップ(コーディング)をとっつきやすくする方法

ゆかり

こんにちわ、ゆかりです。
今日はわたしがHTMLの初期学習の際に「あ～」と腑に落ちた、
HTMLのマークアップの仕方を記事にします。

どなたかの参考になればうれしいです！

色を付けて可視化するとわかりやすい

デザインカンプから「コーディングやろか～」ってなったときにどこから手を付けていいのかわからなかったHTMLドドド素人期･･･(＾ω＾；)

それを一気に解決してくれたのが「ブロック事に背景色を充てて可視化すること」でした！

これをすることでサイトページを細かく区切って１っ１っ進めていく道しるべみたいなものができてパニック(笑)になることがありません。

ではでは一緒にみていきましょう～

例はこちらの優良書籍からサンプルサイトつかってます。

スタンダードレイアウト

上の画像サイトをコーディングしていきます。
画像のデザインをパッとみると「うっ････」となってしまいますよね


サイトの全体像をみてグループ分けしてみる

まずはデザイン全体をにらめっこ。
大きなグループで分けていきます。

スタンダードレイアウト

①ヘッダー
②フッター
③トピック ＜ラッパー＞（メイン）
④ニュース ＜ラッパー＞（メイン）
⑤記事 ＜ラッパー＞（メイン）
⑥サイド ＜ラッパー＞

まずは、ヘッダーとフッターがあり、
真ん中のブロックはラッパーで包んだ大きなグループ、
更にその中に左側にメイングループ、右にサイドブロック。
メイングループの中には３つのブロックがあります。

このグループ分けをまずはメモなどに書いてブロックを把握します。

ここまで見えてきたらあとは色をつけていきます！


①ヘッダー、②フッター

HTML

<body>
   <header class="header">
   </header>
   <!--headerここまで-->
   
   <footer class="footer"></footer>
   <!--footerここまで-->
</body>

HTMLにヘッダーとフッターを追加。

CSS

.header {
   width: 100%;
   height: 100px; /*高さは可変にせずとりあず今だけ指定*/
   background-color: red; /*背景色を適当に指定*/
}

footer {
   width: 100%;
   height: 75px;
   background-color: aqua;
}

CSSを書いていきます。
高さは可変の場合であってもとりあえず指定してくださいね
（カンプからサイズ測ってね）

そして背景色を適当につけていきます
（redとかblueとか簡単な色指定でOK）

この時点で、こうなります。

ヘッダー

ヘッダーとフッターがくっついていますがこれから中身を同じようにマークアップしていきます。


ラッパー、メイン、⑥サイド

ラッパー編

真ん中全体を大きく包むwrapperをhtmlに追加。

HTML

<body>
   <header class="header">
   </header>
   <!--headerここまで-->

   <div class="wrapper">
   </div>
   <!--wrapperここまで-->

   <footer class="footer"></footer>
   <!--footerここまで-->
</body>

CSS

.wrapper{
   width: 970px;
   margin: 30px auto 40px;
}

全体を大きく包むwrapperの幅を指定して、
上下左右のmarginを指定します。
（中央に寄せたいので左右はauto）

現時点での表示はこうなっていると思います。

ラッパー

メインと⑥サイド

次はwrapperの中に入っているメイングループと⑥サイドグループを追加しましょう。

HTML

<body>
   <header class="header">
   </header>
   <!--headerここまで-->
   <div class="wrapper">

       <main class="main">
       </main>
       <!--mainここまで-->
       <div class="sidemenu"></div>
       <!--sidemenuここまで-->

   </div>
   <!--wrapperここまで-->
   <footer class="footer"></footer>
   <!--footerここまで-->
</body>

CSS

.wrapper .main {
    width: 660px;
    height: 1300px;
    background-color: gray;
}

.wrapper .sidemenu{
   width: 275px;
   height: 1300px;
   background-color: blue;
}

メイン

ここで確認するとこうなっていると思います。
背景色blueの⑥サイドどこやねん！となりますね。

flexboxを指定して横並びにしてあげましょう。

CSS

.wrapper{
   width: 970px;
   margin: 30px auto 40px;
   display: flex;
   justify-content: space-between;
}

メインとサイドを包む親要素のwrapperにflexboxを指定します。

サイド

背景色blueの⑥サイドがひょっこり出てきた！
おまえどこおってん～って感じ。

あともう少しです、残りのメインの中を作ります。


③トピック、④ニュース、⑤記事

mainブロック（grayの背景色）の中に３つのブロックを入れていきます。

HTML

<body>
   <header class="header">
   </header>
   <!--headerここまで-->
   <div class="wrapper">
       <main class="main">

           <div class="hot-topic"></div>
           <div class="news"></div>
           <div class="article"></div>

       </main>
       <!--mainここまで-->
       <div class="sidemenu"></div>
       <!--sidemenuここまで-->
   </div>
   <!--wrapperここまで-->
   <footer class="footer"></footer>
   <!--footerここまで-->
</body>

CSS

.wrapper .main{
   width: 660px;
}

.hot-topic {
   height: 300px;
   background-color: aquamarine;
}

.news {
   height: 258px;
   background-color: pink;
}

.article {
   height: 752px;
   background-color: gray;
}

３つのグループを包むmainは高さと背景色を削除して、
③④⑤それぞれ高さと背景色を指定します。

全体

これで画像のようになっていると思います。

あとはメイングループ内の余白を指定します。

CSS

.hot-topic {
   height: 300px;
   background-color: aquamarine;
   margin-bottom: 30px;
}

.news {
   height: 258px;
   background-color: pink;
   margin-bottom: 30px;
}

.article {
   height: 752px;
   background-color: gray;
}

今回は.hot-topicと.newsの下に余白を30px入れました。

全体２

これで全体のマークアップ完了！！

あとは各ブロックの中身を組み立てていけば出来上がり。
１つ１つ細分化すれば情報量の多いページも意外と簡単に作れちゃいます。


最後に

ここまでお疲れ様でした。
わたしはこの色付けでスムーズにコーディングが進むようになったため、同じように何から始めたらいいかわからない初心者さんに共有できたらなぁと思い書き上げました。

これを何度もしていけば色を付けなくても頭のなかで組み立てる習慣ができると思います！
（わたしはまだその域には達しておらん(笑)）

それでは今日も楽しいプログラミングライフを送ってください～★

色付けの段階で指定した「背景色」は中身ができたら消していってくださいね。また「高さ」も可変の場合は不要なので消してください。

え？ほんまに？サポートしてくれるん。 めっちゃうれしいです･:*+.\(( °ω° ))/.:+ 勉強のために使わせて頂き、さらに役立つ記事を書いていきます！