HTML/CSSのコーディング手順

みなさん、こんにちは！
フリーランスエンジニアのKATSUMIです。
最近、新規案件がなく、久々にWebページを作ろうと思ったらかなり忘れていました。
そんなことのないよう、きちんと構成を考えて最初からコーディングを始め、レイアウト崩れのないようしなければなりません。
今回は完成したデザインをHTML/CSSでコーディングしていく第一歩目の手順を紹介します。

今回作る Web サイト例

こんな感じの、よくあるヘッダー・メイン・フッターで構成された Web サイトを作っていく手順を考えていきます。

1.ファイル、フォルダーを作る

まずは必要なファイルとフォルダーを用意します。
必要なファイルやフォルダーはその Web サイトによって変わりますが、基本的にはプロジェクトフォルダーの中に index.html、CSS を入れる「css」フォルダーと、その中に style.css、そして画像を入れる「images」フォルダーを用意します。

index.html に HTML を、style.css に CSS を書き込んでいきます。必要な画像はすべて「images」フォルダーに入れていきます。

2.レイアウトをメモに書き出す

HTML マークアップを始める前に、ページの文書構造を確認しておきましょう。
Web ページは基本的に箱の積み重ねと詰合せです。まずは大きな枠組みがどう構成されているかを考えます。

図のように箱にあたる部分を線で囲み、あらかじめクラスや ID をふっておくと CSS で装飾する時に楽になります。
この構造図はメモ用紙に簡単に書いておいても、使用したワイヤーフレームやデザインに書き込んでも OKです。
全体像が把握しやくなるので、初心者にはおすすめです。
ソースコード内で迷子にならないよう、先に構造を整理しておく癖をつけておきましょう。

ホームページ制作費無料のサブスクやフリーランスエンジニアを育成するメンター業を右記で請けおってます

3.基本の HTML と head 内を記述

頭の中が整理できたら、さっそく HTML を書いていきましす。
まずは実際には表示されない、Web ページの情報を記述する head 内を書いていきます。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Webサイトのタイトル</title>
    <meta name="description" content="ページの紹介文" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- CSS -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"
    />
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <!-- ここにコンテンツが入ります -->
  </body>
</html>

head 内の各項目を簡単におさらい

meta charset … 文字エンコーディング。とりあえず「UTF-8」で OK
title … Web ページのタイトル。ブラウザーのタブ等に表示される
meta name=“description” … Web ページの紹介文。Google 等の検索結果ページに表示される
meta name=“viewport” … レスポンシブに対応させるためのもの
reset.css … ブラウザー独自のデフォルト CSS を無しにする

4.HTML でレイアウト部分のマークアップ

続いて body の中身、実際に Web ページとして表示される部分を書いていきます。とは言え、ただ闇雲に書いていくわけではありません。
「2. レイアウトをメモに書き出す」に書いた通り、タグやクラスを整理しながらレイアウト部分（ヘッダー・メイン・サイド・フッター）を記述します。

HTML

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

  <div class="container">
    <div class="main">main</div>
    <div class="side">side</div>
  </div>

  <footer>footer</footer>
</div>

タグの中身はひとまず適当で OK。
レイアウトが完成したら実際に表示したいテキストや画像を入れていきます。

5.CSS でレイアウト部分のスタイリング

4.で記述した HTML を装飾していきます。背景色をつけておくとわかりやすいです。
レイアウトを確認しながら書き進めていきます。

CSS

.wrapper {
  max-width: 1000px;
  margin: 0 auto;
}
header {
  background: tomato;
}
.container {
  display: flex;
}
.main {
  background: pink;
  width: 70%;
}
.side {
  background: orange;
  width: 30%;
}
footer {
  background: plum;
}

今のところこんな感じになりました。

ちなみに通常、色の指定にはカラーコードを記述しますが、決められた色名称を使うこともできます。
こういったテスト段階ではわかりやすくするため「とりあえず」色をつけるということもあるので、短くてスペルの簡単な色名称を覚えておくと便利です。

6.レイアウト部分のレスポンシブ対応

レスポンシブ対応とはベースでコーディングしたページを他の端末（サイズ）でも違和感ないように調整してく作業のことを言います。
私が実務で作成する場合はベースをPCサイトで作成して最後にSPサイトの調整を行っています。
タブレットは案件にもよりますが基本的にはPCサイトを表示させるようにしています。
レスポンシブにするには @media に続いて表示領域を指定し、その中に装飾したい要素を書いていきます。

CSS

@media (max-width: 600px){
  .wrapper {
    text-align: center;
  }
 
  header {
    width: 100%;
    height: 100px;
  }
 
  main {
    width: 100%;
    display: block;
  }
 
  footer {
    width: 100%;
    background: #5e8ea5;
  }
}

ここまでで、レイアウト部分が完成しました。

7.各パーツの HTML マークアップ＋ CSS スタイリング

ここまできたら後は各パーツ毎に 2〜6 の要領で、必要な ID やクラスやどの要素をどのボックスでまとめるか等をメモに書き出し、HTML の記述、CSS の装飾を繰り返して細部を作り込んでいきます。
ひとつひとつ装飾していくのは大変ですが、パーツにわけて考えていくと先が見えてきます。

全体のコーディングが終わったら他のブラウザーでも表示確認をし、うまく表示されていたら完成です。

まとめ

初めのうちはメモを取りながら進めると安心です。
慣れてくるとメモする量も減って最終的にはメモなしでコーディングを進めるようになります。
これだけでも成長を実感できます。

今回は一連の流れの紹介ということで細かな部分は省きましたが実際にはいろいろな作業が隠れています。
最初のうちは戸惑うことが多々あると思いますが、慣れていくしかありません。
ただ、不安になる必要はありません。
みんな最初は初心者ですし、わからないところがあれば聞いたり、ググって調べましょう。

今回の記事が、フロントエンドエンジニア、Webデザイナーを独学で目指している方の参考になれば幸いです。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座［第2版］

created by Rinker

下記を押していただけると励みになります！
↓

　　　　　　　　　　　　　　　　人気記事

プログラミングスクール：エンジニアおすすめの３社

フリーランス初心者にとってクラウドソーシングは登竜門だ！

HTML/CSSのコーディング手順