【Day5】ヘッダーを作る

chapter1 : 実際にコードを書き始める前の注意点

index.htmlの書き始めは「!」からの「tab」を押して以下のコードを表示させるお話をDay3でしました。

ただこれだけだとCSSを反映させることができないので以下のようなコードを追記する。

どこにある何を反映させるのか階層を示す感じです。
ちなみに僕のエディタの階層はこんな感じになってます。

なんかうまい感じに説明できないので階層の考え方については以下の記事を参照してみてください。

【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！

追記した下記のコードについて簡単に解説します。

 <link rel="stylesheet" href="./css/reset.css">
 <link rel="stylesheet" href="./css/style.css">

 <link rel="stylesheet" href="./css/reset.css">は「reset.css」というものです。
Chromeなどのブラウザにはもともと備わっているCSSの設定があります。
そのCSSを打ち消して自分の書いたCSSを反映させてね〜という命令を出すために書くものになります、
reset.cssは定型文をコピペするだけでOKです。reset.cssを書くときは以下のサイトからコピペしてみましょう。

リセットCSSとは？コピペOK！おすすめのリセットCSSとその使い方をご紹介します - ぷろぐらりんく

そしてもう1行の <link rel="stylesheet" href="./css/style.css"> はシンプルに自分の書いたCSSをブラウザに反映させるためのコードです。

この2つのコードですが、reset.cssの方を必ず最初に書いてください。
というのも、コードの命令は基本的に上から順々に実行されます。

ですので
①もともとブラウザに備わっているCSSを打ち消しす
②自分のコードを反映させる
の順番を逆にしてしまうと、自分の書いたCSSが打ち消されてしまうという状態になってしまうんですよね。
そこのところ要注意です。

chapter2 : 初心者向けのHTMLとCSSの書き方

HTMLを全部書いた後、それぞれにCSSを充てていく書き方は初心者にとってはちょっと難易度が高いです。

なのでまずはページ全体に共通するCSSをstyle.cssに書いて、そのあとに
index.htmlにちょこちょこ書きながら、CSSにちょこちょこ反映させていく作業を繰り返した方がいいらしいです。

僕も以前LPを作る練習をしている際に、まずは一気にHTMLを書き下ろしてそのあとCSSを書いていたら訳わからなくなってしまった経験があるので、このやり方は間違い無いかと思います。

Live Serverやデベロッパツールを駆使しながら、リアルタイムでデザインや構成を確認しつつコードを書いていきましょう

chapter3 : classはできるだけつけよう

classはできるだけつけた方がいいです。
その方が保守性に長けるからです。
分かりやすく例をあげてみますね。

例えば以下のようなコードがあるとします。

[index.html]

<div class="unnko">
  <h1>おすすめの便器を紹介</h1>
  <p>ウォシュレットが大好き</p>
</div>


[style.css]

.unnko{
  font-weigft: bold;
  background-color: blue;
}

.unnko h1{
  font-size: 20px;
}

.unnko p{
  font-size: 15px;

で、あとあとクラス名を「unnko」→「unnchi」に変更するぞ！
となった場合、全部のunnkoをunnchiに書き換える必要があり、その分時間がかかりますし、ミスをする確率も高くなってしまいます。

でも全ての要素にクラスをつけていたらどうでしょうか。

[index.html]

<div class="unnko">
  <h1 class="inu">おすすめの便器を紹介</h1>
  <p class="neko">ウォシュレットが大好き</p>
</div>


[style.css]

.unnko{
  font-weigft: bold;
  background-color: blue;
}

.inu{
  font-size: 20px;
}

.neko{
  font-size: 15px;

ご覧の通りunnkoは一箇所になったので、仮にunnchiに仕様変更することになっても簡単に変更することができますよね。

クラスの名前を考えるのが面倒だったり、htmlのコードがたくさんになってしまって見づらいとか、人によって全部にクラスをつけるのを嫌がる人もいますが、後々のことを考えるとクラスは絶対につけておいた方がいいです。

chapter4 : なんかうまくいかない時

ちゃんとコードを書いているはずなのになんかうまくいかないことってありますよね。
そんなときはブラウザやエディタのせいにしたくなりがちですが、自分のコードに原因があることがほとんどなのでじっくりと見直してみましょう。

・「：」と「；」を間違えていないか。または抜けていないか
・閉じタグ</○○>が多かったり少なかったりしてないか
・スペルミスをしていないか
・クラスをstyle.cssで定義するときに「.」を書き忘れていないか

どうしても原因がわからないときは一回寝て起きると意外とすぐみつかることもあるのでお勧めです。

それでは今日はこの辺で終わりにします。
ありがとうございました。

けけ丸