デイトラ Web制作コース初級編 DAY8-10 Webサイト制作 2

MIO

2024年5月28日 00:01

ご覧いただき、ありがとうございます！

今回は前回制作したWebサイトを、自分でもう一度作ってみるという回でした。
私がゼロから制作し出して、注意したポイントをお伝えしたいと思います！

Webサイト制作を書く前にすること

HTMLをセクションごとに分ける

HTML/CSSを使って実装する前にやるといいかなと思います。

Webサイトの中身をセクションごとにわけて、さらにセクションの中身をブロックごとに分けます。

何となくでHTMLを書き始めると、後々CSS実装の時にHTMLでクラスを足したり、書き換えたりする必要がでてきます。

このくらいのページなら問題ないかもしれません。
しかしもっとボリュームのあるWebページを制作した際、私はHTMLの想像力が足りずに苦労しました。

ノーコードで制作ができるSTUDIOのテンプレートを見てみると、セクションごとに作られているのが分かりやすいと思います。

STUDIOのテンプレートを開いて、左側のレイヤーが、まさにHTMLの構造になっています。

noindexの適用

HTMLの<body>タグを書き始める前に、noindexの記載をおすすめします。

<meta name="robots" content="noindex" />

<head>タグ内にnoindexの記載をすると、ブラウザで他の人がWebサイトを見ることができなくなります。

練習で制作したWebサイトや、制作途中で公開してはいけない情報がある時に使用します。

Webサイトを制作する上で意識したポイント

私がWebサイトを制作する上で注意した点についてお話しさせてください。

CSSで直接タグ名を書かない

一つ目は、CSSを書く時に、<h1>や<p>のタグ名を直接書くのではなく、必ずクラス名を当てるようにしました。

なぜクラス名をつけた方がいいかというと、保守性が悪くなるからだそうです。

クラス名を命名するときのポイントを下記サイトで詳しく解説してくれています。

CSSの共通クラスを使う

コーディングをしていると、「同じレイアウト」が何度も登場したりします。

その時に、新しいクラスを作るのではなくて、共通クラスを使うこと意識しました。

例えば、「aboutセクション」と「menuセクション」がある時にHTMLを以下のように書くとします。

<section id="about">
  <h2 class="about-title">アバウトセクションのタイトル< /h2>
  <p>テキストテキスト< /p>
< /section>

<section id="menu">
  <h2 class="menu-title">メニューセクションのタイトル> /h2>
  <p>テキスト< /p>
< /section>

上記のように"about-title"と"menu-title" といった違うクラス名をつけると、CSSで下記のような状態になります。

.about-title {
  font-size: 24px;
  font-weight: 700;
}

.menu-title {
  font-size: 24px;
  font-weight: 700;
}

全く同じ処理を二度書かなくてはいけなくなります。

.about-title, .menu-title {
  font-size: 24px;
  font-weight: 700;
}

上記のようにカンマで区切って、二つ以上セレクタを追加することも可能ですが、それだとクラスが増えるたびに、書き足す必要があります。
こちらも保守性が悪くなります。

これを共通クラスにすると、以下になります。

<section id="about">
  <h2 class="title">アバウトセクションのタイトル< /h2>
  <p>テキストテキスト< /p>
< /section>

<section id="menu">
  <h2 class="title">メニューセクションのタイトル> /h2>
  <p>テキスト< /p>
< /section>

上記のように、h2のクラス名を"title"にします。

ちなみに<id>タグだと、同じ名前を2回使う事はできないので、注意が必要です。
処理が実行されなくて、原因を探ったら<id>タグで同じ名前を2回つけていたことが何度かあります…

.title　{
  font-size: 24px;
  font-weight: 700;
}

上記のように、一つのセクション、一つの処理で完結できます。
何度もコードを書き足す必要もなく、コード自体も短くなるので動作が軽くなります。

CSSでセレクタに複数class属性を追加する方法

私はこれに慣れなくて、今でも時々書き方を忘れて使いこなせていないので記述したいと思います。

１. クラス名をカンマで区切る

.child-1, .child-2 {
  //処理
}

同じクラス名に処理を当てたい時に使います。

２. クラス名をスペースで区切る（半角スペース）

.parent .child {
  //処理
}

Parentkクラスの中にある、childクラスに処理を当てたい時に使います。

３. クラス名の間を空けない（スペースを入れない）

.parent.child {
  //処理
}

この場合は、parentクラスとchildクラスの両方がある範囲に処理が当たります。

すぐに答えを見ない

最後に私が意識したポイントとして、「すぐに答えを見ない」ことを大切にしていました。

デイトラではこの前のセクションで動画を見ながら、コードを書き、今度は自分一人で実装をしてので、前のコードが残っています。

でも答えのコードを見てしまうと、理解しないまま、頭に入らないまま次に進んでしまうことになると思いました。
なので私は分からないことがあると、chatGPTやウェブで検索をして、コーディングを行いました。

これは本当にデイトラでも、たくさんのプログラマさんも言っていることで、自分で調べて解決する能力はとても大切です。

それで分からなければ、デイトラで質問をするようにしていました。

感想

以上が私が自分が一人で実装する上で意識したポイントになります。

いざ自分一人で実装すると、本当にわからないことだらけでした。
特にレスポンシブ対応が難しくて、何度も調べて作りました。

あと最後に大切にしていたこととしては、楽しむようにしたことです。

調べて実装して、上手くいかないと嫌になることもあるけど、「知らないことを知れるのは楽しい」「上手くいった時が嬉しい」そうやって、私は楽しんで作ることを大切にしました。

そして前からコーディングに苦手意識はありませんでしたが、今は本当に楽しくて、気がついたら10時間経ってたなんてこともあります。笑

この記事がWeb制作を始める方の何か助けになれば幸いです。

最後までお付き合いいただき、本当にありがとうございました🌸

Xで毎日デイトラの学習記録つけてます！
応援していただけると嬉しいです✨
X : https://twitter.com/totoro_mi8

この記事が気に入ったらサポートをしてみませんか？