Webページを作るときは、常時Chromeのデベロッパーツール（検証機能）を開いて確認しながらコーディングを進めます！

これから出題する課題の中でも全編を通してデベロッパーツールを使いまくっているので、コーディングを始める前にデベロッパーツールの使い方を覚えておきましょう！

テキストで読みたいという方は、Web制作コース中級編の課題制作も担当してくださってる、はにわまんさんの記事もぜひ読んでみてください！

本格的にコードを書き始める前に、HTMLの型やreset.cssの役割、コーディング前にやるべきことについて解説しておきます！

スムーズにコーディングできるかどうかは、書き始める前の準備で決まります！「準備編なんか見なくていいよ」と侮らずに、必ずチェックしてくださいね。

まずは、練習用素材が入ったpracticeフォルダをVS Codeで開いて、中身の確認をしていきます！

Macをお使いの方でVS Codeをdockに追加している方は、practiceフォルダをVS Codeの上にドラッグアンドドロップして、フォルダごとVS Codeで開きます。

Windowsをお使いの方や、MacでdockにVS Codeを追加していない方は、
VS CodeのアプリケーションアイコンをダブルクリックしてVS Codeを立ち上げます。
立ち上げたVS Codeの上にpracticeフォルダをドラッグアンドドロップすると、同様にフォルダごとVS Codeで開くことができます。

Emmetは、動画内で使った「！Tabキー」の他にも色々なタグを省略記法で展開することができます。
省略記法に慣れるまで少し手間取ってしまうかもしれませんが、覚えてしまえば爆速でコーディングを進めていくことができます！

ミスも少なくなり、コーディングのスピードも速くなるなんて、使わない手はないですね！

また、CSSの読み込み順は reset.cssが上、style.cssが下です！

HTMLファイルに限らず、コードはファイルの上から順に読み込まれていきますので、
まずreset.cssで各ブラウザ独自のCSSをリセットし、それからstyle.cssに記載したスタイルを上書きしていくイメージです。

HTMLやCSSファイルには、コメントを残しておくことができます！コメントはブラウザには表示されません。

記述したタグにはどのような意味があるのか等を分かりやすくコメントで残しておくと、あとから見返した時も分かりやすいです。
このコメントも、初めのうちはどんどん使っていきましょう！

Macをお使いの方は、「command /」
Windowsをお使いの方は「Ctrl /」

で、コメントを書くことができます。

favicon（ファビコン）とtitleタグの記述は、ブラウザでサイトを検索した時と、サイトにアクセスした時に表示されます。 descriptionで記述した内容は、 ブラウザの検索結果ページのサイトタイトル下に表示されるようになっています。

↓そしてこちらは、デイトラのサイトにアクセスした時の表示です。

また、
作業フォルダの中にCSSファイルが存在していても、headタグ内に読み込みの記述をしなければスタイルが反映されませんので注意してくださいね。

ここで一旦箸休めしましょう。
本格的にコーディングを進める前に、ぜひインストールしておきたいVS Codeの拡張機能を紹介します。

動画を見ながらインストールしてみましょう！

VS Codeを開いた時、左側にブロックを積み重ねるようなアイコンがあります。
このアイコンをクリックすると、様々な拡張機能を検索・インストールすることができます。

動画内で「インデント」という言葉が出てきましたね！

インデントとは、文章の先頭を字下げすることなのですが、
コードを書くときは必ずこのインデントを整えることが重要です。

インデントを整えることで、
どの開始タグと終了タグが対になっているか
どのタグの中に、更にタグが入れ子になっているのか
がひと目で分かるようになります！

コードがぐちゃぐちゃだと、何より読みにくいですし、ミスにも繋がってしまいます。。。

Prettierをインストールしておけば、自動でコードのインデントの整形をしてくれますので、手動で整える手間を大幅に省くことができます！

headタグの中に、

コピー
<meta name="robots" content="noindex" />

という記述をしました！

これについて少し詳しく解説します。

制作途中のサイトは、まだインターネットに公開してはいけない情報が入っている可能性もあります。
そのような大事な情報が漏れてしまっては困るので、インデックスされないように（ブラウザで検索しても出てこないように）このタグを追記します。

他にも、似たようなコンテンツ（重複コンテンツ）や情報の少ないページなど、意図的にインデックスさせないページもこのnoindexの記載を残したまま公開する場合もあります。

noindexについてもっと詳しく知りたい方は、検索してみてくださいね！

今回作るスイーツサイトには、Google FontsというWebフォントを使用します。

ブラウザで指定できるフォントには限りがあり、さらにパソコンやスマホのデバイスによっては、同じフォントが表示できないこともあります。

Webフォントを利用することで、どのデバイスでも同じフォントを表示させることができ、さらにたくさんのフォントの中からサイトのデザインにぴったりなおしゃれなフォントを使うことができるようになります！

サイト全体で使用するGoogle Fontsの使い方をマスターしましょう。

これでGoogle Fontsを使用できるようになりました！

それではコーディングを始めていきましょう！

まずはheaderのHTMLを書き上げるところまで。ただ動画を見るだけじゃなく、必ず実際に手を動かしてくださいね！

headerに記述するテキストとロゴ画像のAltに記述するテキストは、下記↓をご利用ください！

HTMLを書き終えたので、次はCSSを書いてスタイルを当てていきます。

最後まで作り切りましょう！
実際にCSSスタイルが当たるのをブラウザで確認しながらコーディングしていくと、HTMLだけ書いているより達成感があると思います！

headerの下線の色の指定で rgba(241, 238, 228, 0.25) という書き方が出てきました！

これは、色だけではなく透明度まで指定することができます。

動画内ではblackを使って解説したのですが、もう一度赤色を例にして説明しますね！
赤のカラーコードは #ff0000 なのですが、 rgbコードというものでは rgb(255, 0, 0) と表記されます。
そしてこのrgbコードに透明度（A）を加えると rgb(255, 0, 0, 0) という表記になります！

rgba表記もこの先よく使いますので、詳細はご自身で調べてみてください！

それではお疲れ様でした！
無事headerも完成して、「できた！！」という達成感を持てたのではないでしょうか？

その達成感や「楽しい」という感覚が継続にはとても大切なので、明日からも楽しくコードを書いていきましょうね！

headerが完成したところで、なぜhtmlタグにclass名をつけてCSSスタイルを当てているのかを解説します！

htmlタグそのものにCSSスタイルを当ててももちろんOKです！
ですが結論から言うと、その方法は保守性がとても悪いのです。

１つのクラス名にスタイルが当たっていれば、後でタグを変更したとしてもそれによるCSSの影響はありません。

初心者のうちは「見本通りに書いたはずなのに、なぜか思い通りの見た目にならない」というトラブルに何度も出くわすと思います。

そんな時はまず以下の6つのポイントを確認してください。

1. コロン（:）とセミコロン（;）を間違えていないか
2. 全角スペースが入っていないか
3. つなげる文字を書き忘れてないか。例えば、アンダーバー（_)　ハイフン(-)　ドット（.）など
4. 「閉じタグ」の数が不足してないか
5. classを定義するときに「ドット（.）」を書き忘れてないか
6. 単純なスペルミス

これらのよくあるミスのうち、閉じタグ不足はDAY4で入れたVS Codeのプラグイン「Bracket Pair Colorizer」が色で教えてくれますし、単純なスペルミスは「Code Spell Checker」が教えてくれます。

全角が入っている場合も、プラグイン「zenkaku」が教えてくれます。

VS Codeはどんな時もちゃんとヒントをくれています！なんて便利なんだ！！
あとは使う側の問題です。

「思い通りの見た目にならない」と思ったら、エラーが出ていないかチェックしながら、6つのポイントを確認しましょう！

「書いたはずのCSSのクラスが反応しない」 きっとこれから何度も経験するでしょう。

なかなか原因が分からず「自分は絶対に悪くない！ChromeかVS Codeのバグだ！」と思いたくなることもあるはずです。

そんなときはぜひ↓を試してみてください！

コピーしたセレクタを反応しないクラスのセレクタに置き換えてみましょう！それでうまくCSSが反映されるようなら、自分のクラスの指定の仕方が間違っています。

「ドット(.)」が抜けてないか、ハイフン（-）とアンダーバー（_）を間違ってないか、クラス名の綴りを間違えてないかをまずチェックしましょう！