Help us understand the problem. What is going on with this article?

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

はじめに

本記事は

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

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

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

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

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

ポイント

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

例 赤線にて区切り

スクリーンショット 2020-03-23 12.13.56.png

スクリーンショット 2020-03-23 12.18.59.png

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

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

スクリーンショット 2020-03-23 12.27.01.png

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

スクリーンショット 2020-03-23 12.34.38.png

ポイント

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

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

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

スクリーンショット 2020-03-23 12.58.25.png

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

スクリーンショット 2020-03-23 13.02.44.png

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

スクリーンショット 2020-03-23 13.07.09.png

ポイント

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

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

https://webdesign-trends.net/entry/9214

④ 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についての詳細

https://developer.mozilla.org/ja/docs/Glossary/Semantics

ポイント

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

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

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

まとめ

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした