head要素に入れておきたいコード

head要素は基本的にブラウザに表示されませんが、サイトを構築するのに必要な情報をここに記述します。head要素に必要なコードや入れておきたいコードを紹介します。

<!doctype html>
<html lang="ja">
<head>

ここに入れるコードを紹介します。

</head>

<body>
</body>
</html>

head要素に入れておきたいコード

文字コードを宣言する

文字コードの設定です。日本で使われる主な文字コードはUTF-8 Shift_JIS EUC-JPがあります。その中でもUTF-8が主流です。

<meta charset="UTF-8">

Internet Explorer用の設定

IEの古いブラウザで表示されるのを防ぐために必要です。古いIEブラウザで表示されるとデザインが崩れることがあります。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

レスポンシブ対応

PCやタブレット、スマートフォンとデバイスのサイズに合わせてレイアウトを変えるデザインができるようになります。これをviewportと言います。

<meta name="viewport" content="width=device-width,initial-scale=1">

タイトルの設定

作成するページのタイトルを入れるために必要です。ブラウザのタブに表示されます。またGoogle検索結果の見出しとしても表示される重要な設定です。

<title>無題ドキュメント</title>

メタディスクリプションの設定

作成するページの説明文を入れるための設定です。Google検索結果の説明文としても表示される重要な設定です。

<meta name="description" content="ページの説明文">

ファビコンの設定

ブラウザのタブの左端にアイコンを表示するため設定とiPhoneのホームボタンに追加するアイコンの設定です。

<link rel="icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" sizes="180x180">

外部CSSの読み込み設定

HTMLの外で作成されたCSSを読み込むための設定です。

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

リセットCSS

リセットCSSはどのブラウザで確認してもほとんど表示に違いがでないようにするための設定です。リセットCSSを読み込ませる優先順位はstyle.cssより基本的に低いので、style.cssが記述された<link>要素より上に記述します。

<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">

まとめ

まとめると以下のようになります。ファビコンやCSSのパスは自身のフォルダに合わせて変更してください。

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>無題ドキュメント</title>
<meta name="description" content="ページの説明文">
<link rel="icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" sizes="180x180">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="style.css">
</head>

その他の設定

jQuery

jQueryはスクリプト言語の一種であるJaveScriptのライブラリです。動的なページを作成する際に使われます。

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

lightbox導入

lightboxはポートフォリオサイトのような作品(画像)をまとめたギャラリーページに使うと見栄えが良くなり、画像から画像へとスムーズな移動も出来るようになります。先ほど紹介したjQueryの設定が必須になります。

<!-- Lightbox -->
<link href="plugin/lightbox/lightbox.css" rel="stylesheet" media="all">
<script src="plugin/lightbox/lightbox.js"></script>
<script>
/* Lightboxのオプション設定 */
lightbox.option({
    'wrapAround': true,
    'alwaysShowNavOnTouchDevices': true
})
</script>