今回は、コードを書き始める上で欠かせないDoctype宣言の書き方とhead内に必ず記載しないといけない要素をご紹介します。
独学でHTML&CSSを学んでいる方に向けて、以下の記事はすごく参考になります！
つまずかずにスムーズに学習したい人は、ぜひ！
目次
Doctype宣言の書き方とショートカットキー
まずは、Doctype宣言の書き方をご紹介します。
結論から言うと、ショートカットキーの『！』を記載してEnterを押すと、以下のようにやなどの必要な要素が記載されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
簡単ですよね！
しかし、少し修正しないといけない箇所があります。
<html lang=”en”> → <html lang=”ja”>
に変更しましょう！
en＝英語なので、ja＝日本語に変更する必要があるからです。
また、このショートカットキーは、『Visual Studio Code』で標準搭載されているEmmetでのみ使用できるので、他のエディタでは、拡張機能で搭載しないといけません。
Emmetでは、他にも便利なショートカットキーがたくさんありますので、以下のリンクより確認してみてください。
https://docs.emmet.io/cheat-sheet/
<head>内に記載しないといけない要素とその役割
Doctype宣言のショートカットキーで出てきた
内の要素に、プラスで必要な要素を紹介していきます。今から紹介する要素は、
内の要素に、実際にコーディングでよく使う要素をまとめたものになります。まずは、現在ショートカットキーによってhead内に記載された要素の役割の解説をします！
<meta charset=”UTF-8″>
こちらは、文字コードを指定するためのコードです。
このコードがないと、ウェブページのテキストが文字化けしてしまい、検索エンジンにも引っ掛からなくなる可能性があります。
また、charset内に関して、HTML5では、UTF-8が推奨されているため、迷ったらUTF-8にすることをおすすめします。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
こちらは、簡単に言うと、デスクトップやモバイル端末の横幅に応じてサイトの表示を変えるコードです。
要するに、レスポンシブ対応させるということです。
以下の例のように、もしこのコードを書いてないと、とても閲覧しにくいサイトになってしまいます。
PC表示
コードを書いている場合のモバイル端末表示
コードを書いていない場合のモバイル端末表示
このように、コードを書いてない場合、モバイル端末では、PC表示と同じ画面サイズで表示されるため、横スクロールしてしまうというとても閲覧しにくい現象が起きてしまいます。
なので、このコードは必ず記入するようにしましょう！
<title>Document</title>
こちらは、ウィンドウのタイトルバーに載る題名を設定するコードです。
<title>Document</title>のDocumentのところを変更することで、題名を変更することができます。
ウィンドウのタイトルバーとは、以下の画像の赤線で書かれた箇所になります。
<meta name=”description” content=”〜”>
こちらは、以下の画像のように、サイトの検索をされた時に出るテキストを設定するコードです。
content=”〜”>の『〜』の箇所に、テキストを書きましょう！
<link rel=”stylesheet” href=”./css/style.css”>
こちらのコードは、サイトに色やデコレーションをつけてくれるCSSを読み込むためのコードです。
読み込む際は、階層に気をつけましょう！
<script src=”〜”></script>
こちらは、サイトに動きをつけてくれるJava scriptを読み込む際に必要なコードです。
Java scriptには、jQueryなどのライブラリがいくつもあるので、公式ページからコードを確認して読み込むようにしましょう！
まとめ
今回は、Doctype宣言の書き方（ショートカットキー）と<head>内に記載しないといけない要素を紹介していきました。
もう一度、復習も兼ねてコードを載せておきますね！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サイトの題名を記載</title>
<meta name="description" content="サイトの説明文を記載">
<link rel="stylesheet" href="./css/style.css">
<script src="〜"></script>
</head>
<body>
</body>
</html>
それでは、最後まで読んでいただきありがとうございました。
