まずは流れを知ろう！HTML・CSSコーディングの手順

今回は初心者コーダー向けにコーディングの進め方を解説していこうと思います。

コーディングの流れ
ファイル、フォルダを作る
レイアウトを考える
HTMLを書く
1. 基本情報を書く
2. コンテンツを書く
CSSを書く
レスポンシブ対応する
まとめ

コーディングの流れ

コーダーによって若干の入れ替えはあるかもしれませんが、実際のコーディングの流れは以下の6ステップになります。

ファイル、フォルダを作る
レイアウトを考える
HTMLを書く
CSSを書く
レスポンシブ対応する
JavaScriptを書く

では実際にステップごとに解説してきます。
※今回は6.JavaScriptを書くの項目は省きます。

今回作るサイト例

※架空サイトです。

ファイル、フォルダを作る

まず初めに、必要なファイル、フォルダを準備します。必要なファイル、フォルダは作成するwebサイトによって変わりますが、大体の場合はプロジェクトのフォルダの中に入口であるindex.htmlがあって、CSSを格納する「css」フォルダ、画像を格納する「images」フォルダ、JavaScriptを格納する「js」フォルダが必要になります。

レイアウトを考える

コーディングを始める前に、作成するwebサイトの構造を確認しましょう。webサイト、ページは基本的にはブロックの組み合わせです。
まずはざっくりとでいいのでどういう枠組みで構成されているか考えましょう。

上記の図のようにレイアウトを紙（メモ）に書きだして視覚化するとわかりやすいです。全体像が把握しやすいので初心者コーダーさんにオススメです。
その際にclassやidを割り振っておくとCSSを書くときに楽です。
構造をしっかりと整理・把握するクセを付けることで、コーディングを迷うことなく進めることができます。
初心者の方はぜひ習慣づけしましょう。

ベテランのコーダーはデザインを見た段階で、頭の中で「どういう枠組みで作るか」を考えるので、紙（メモ）に書き出す作業が省かれます。
これが初心者とベテランのコーディングする早さの違いでもあります。

HTMLを書く

基本情報を書く

さて実際にHTMLを書いていきます。基本的な内容は下記になります。
先ずすることは、head内にwebサイト、ページの情報を記述することです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Webページのタイトル</title>
    <meta name="description" content="Webページの紹介文">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css">
  </head>
  
  <body>
    <!-- ここにコンテンツが入ります -->
  </body>
</html>

簡単にhead内の各コードの解説です。

!DOCTYPE html	htmlを書くという宣言です。ないとエラーの原因になります。
meta charset	文字エンコーディングのことです。基本的にはUTF-8で大丈夫です。
title	Webページのタイトルのことです。ブラウザのタブ等に表示されます。
meta name=”description”	Webページの紹介文のことです。Google等の検索結果ページに表示されます。
meta name=”viewport”	レスポンシブに対応させるためのコードです。

コンテンツを書く

続いて、bodyの中身をコーディングしていきます。
この部分が実際にページとしてみる部分になります。
今回は「レイアウトを考える」で考えた通り、レイアウト部分（ヘッダー、コンテンツ、フッター）を書いていきましょう。

<div class="wrapper">
  <header></header>
  <main></main>
  <footer></footer>
</div>

基本的な組み方の流れは「大枠を作る」→大枠の中でさらに「細かく分解する」を繰り返してコーディングしていきます。
例）ヘッダーの場合
ヘッダーの中には「ロゴ」、「ナビゲーション」があるかと思います。
次に「ナビゲーション」の中身を見てみます。
「サービス」ページへのリンク、「会社概要」ページへのリンクといった具合に分解できます。

私がコーディングするならば下記の記述になります。
※コーダーによって若干組み方が違います。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>WIND STATION</title>
    <meta name="description" content="WIND STATIONの紹介文">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <div class="wrapper">
      <!-- headerここから -->
      <header>
        <h1>WIND STATIONロゴ</h1>
        <nav>
          <ul id="nav">
            <li class="service"><a href="#">サービス</a></li>
            <li class="outline"><a href="#">会社概要</a></li>
            <li class="news"><a href="#">ニュース</a></li>
            <li class="recruit"><a href="#">採用情報</a></li>
            <li class="ir"><a href="#">IR情報</a></li>
            <li class="contact"><a href="#">お問い合わせ</a></li>
          </ul>
        </nav>
      </header>
      <!-- headerここまで -->
      
      <!-- mainここから -->
      <main>
        <section class="main">
          <p>ビジュアル画像</p>
          <div class="info">NEWS要素</div>
        </section>
        <section class="content">
          <h2>Service</h2>
          <p>WIND STATIONの主要サービス</p>
          <div class="service">
            <div class="block">
              <p>画像</p>
              <p>風力発電事業</p>
              <p>テキスト</p>
              <p>ボタン</p>
            </div>
            <div class="block">
              <p>画像</p>
              <p>風力発電事業</p>
              <p>テキスト</p>
              <p>ボタン</p>
            </div>
          </div>
        </section>
      </main>
      <!-- mainここまで -->
      
      <!-- footerここから -->
      <footer>
        <ul>
          <li class="service"><a href="#">サービス</a></li>
          <li class="outline"><a href="#">会社概要</a></li>
          <li class="news"><a href="#">ニュース</a></li>
          <li class="recruit"><a href="#">採用情報</a></li>
          <li class="ir"><a href="#">IR情報</a></li>
          <li class="contact"><a href="#">お問い合わせ</a></li>
        </ul>
        <p class="copy">&copy;2019 WIND STATION</p>
      </footer>
      <!-- footerここまで -->
    </div>
  </body>
</html>

そしてレイアウトが完成したら実際に表示させたい画像・テキストをはめ込んできます。

CSSを書く

「HTMLを書く」で書いたコードに対して装飾していきます。慣れるまではブロック構造が分かりやすいように色付けして作業するといいかもしれません。

.wrapper {
  text-align: center;
}

header {
  width: 100%;
  height: 73px;
}

main {
  width: 100%;
  display: flex;
}

footer {
  width: 100%;
  background: #5e8ea5;
}

※サンプルデザインを基に要素を適当に書いてます。

レスポンシブ対応する

レスポンシブ対応とはベースでコーディングしたページを他の端末（サイズ）でも違和感ないように調整してく作業のことを言います。
私が実務で作成する場合はベースをPCサイトで作成して最後にSPサイトの調整を行っています。
タブレットは案件にもよりますが基本的にはPCサイトを表示させるようにしています。
また、CSSの切り替えはメディアクエリと呼ばれる記述を使ってやっています。

@media (max-width: 600px){
  .wrapper {
    text-align: center;
  }

  header {
    width: 100%;
    height: 100px;
  }

  main {
    width: 100%;
    display: block;
  }

  footer {
    width: 100%;
    background: #5e8ea5;
  }
}

レスポンシブ対応についての詳しいやり方はこちら
https://mogablog.work/web/cording-responsive/