HTML,CSSでのwebサイト制作の手順とポイント

こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら

個人的には2024年現在は未経験・独学からプログラミングで稼ぐにはフロントエンド開発が1番手っ取り早いと考えています！

はじめに

本記事は

「progateやドットインストールなどでhtml、cssの文法的なインプットはしたが、いざwebサイトを作成する場合にどの手順を踏めば良いのか？？」

という人を初学者を対象にhtml、cssを使ってwebサイトを作る際の手順と、その際に念頭におくべき事をまとめたものです。

拙い内容だとは思いますが、参考になれば幸いです！

※本記事はデザインが既にできている場合の手順になります。
①~③の過程は実際にデザインツールか紙を使って書く事を強くお勧めします！！

①デザインの全ての要素を隙間のない□で埋める！

ポイント

・全てを□で隙間なく埋め切る事が重要！

例 赤線にて区切り

↓

② ①で区切った□をさらに1つ1つを細かいパーツに分ける

②-1 まずは大きなパーツから分けていく(青線)

②-2 大きなパーツの中を更に細分化できる所まで分けていく(緑線)

ポイント

・大きな□の中に小さな□が敷き詰められている状態になる
・この□の1つ1つがdiv要素であると考える！！(正確にはdiv以外のタグも使うが、、)

③ □の1つ1つに名前(class名)を付ける！！

③-1 赤線で囲った□に名前をつける

③-2 線で区切った□に名前をつける

③-3 緑で区切った□に名前をつける

ポイント

・大きい部分から名前をつけていく(赤線→青線→緑線)
・名前は基本的に重複なく付ける
・全く同じパーツを複数回使うときは、同じ名前をつける
・名前の付け方(命名規則)はプロジェクト単位で行う→1人でのプロジェクトでないなら、名前を付けた段階でレビューを入れると良い！！

参考用：代表的な命名規則について

④ htmlで□をネスト構造(入れ子構造)で書いていく

例：上記のbody1部分

<div class="body1">//赤線
    <div class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </div>青線//
    <div class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </div>青線//
    <div class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </div>青線//
</div>//赤線

セマンティクスwebについて

セマンティクスwebはモダンなhtmlの書き方として、html5から導入された「より要素の内容に沿ったhtmlタグ使おうとする考え方」です！！
構造の綺麗なhtmlを書く事ができ、SEOなどの対策になります！！

先ほどのhtmlは分かりやすさ重視の為に、全ての要素をdivタグで囲いましたが、セマンティクスwebを導入するとdivの代わりに様々なhtmlタグを使用していく事になります。

例

<main class="body1">//赤線
    <article class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </article>青線//
    <article class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </article>青線//
    <article class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </article>青線//
</main>//赤線

htmlを書く際はセマンティクスwebを意識してhtmlタグを工夫すると良いでしょう！！

参考用：セマンティクスwebについての詳細

ポイント

• 「赤線の要素→青線の要素→緑線の要素」が入れ子になるようにhtmlを書く
• htmlをまず書き出して、必要としている要素が全て出力されているかブラウザで確かめる

⑤cssにてデザインを整える

htmlでブラウザ上に各要素は出力されているので、cssでデザインに沿ってよしなにスタイリングして下さい。

まとめ

この手順は、「とにかくブラウザ上で成果物が目で見える状態にする。その上で細かいスタイリングを行なっていく！」という考え方に基いたものです。

こうする事で第三者に対して、早い段階から成果物の進捗を共有しやすくなったり、cssなどの挙動をブラウザで、いちいち確認できるといった恩恵が受けられます。

独学でフロントエンドエンジニアを目指している人へ

フロントエンドの仕事を得るまでにどんな勉強をしたら良いのかをまとめました！！

興味ある方は是非ご覧ください。