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="ページの説明文">正規URLを指定
内容が重複しているページがある場合にどれが正規ページのURLか検索エンジンに伝えます。SEO対策にも重要です。
例：<link rel=”canonical” href=”https://smartpocke.com“>
<link rel="canonical" href="正規ページのURL">ファビコンの設定
ブラウザのタブの左端にアイコンを表示するため設定とiPhoneのホームボタンに追加するアイコンの設定です。
<link rel="icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" sizes="180x180">リセットCSS
リセットCSSはブラウザごとによる表示の違いを極力同じにするためのCSSライブラリです。
リセットCSSは何種類かありますが、ここでは初心者にも手軽に扱えるsanitize.cssを紹介します。
sanitize.cssはデフォルトの要素を活かしつつ、クロスブラウザで表示を統一させます。
注意：リセットCSSは他のCSSのlinkタグより上に記述する必要があります。
<link rel="stylesheet" href="https://unpkg.com/sanitize.css">外部CSSの読み込み設定
HTMLファイルとは別で作成されたCSSファイルを読み込むための設定です。
<link rel="stylesheet" href="style.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="canonical" href="正規ページのURL">
<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/sanitize.css">
<link rel="stylesheet" href="style.css">
</head>その他の設定
jQuery
jQueryはJaveScriptというスクリプト言語のライブラリです。動的なページを作成する際によく使われます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>lightbox導入
lightboxはポートフォリオサイトのような作品(画像)をまとめたギャラリーページに使うと見栄えが良くなり、画像から画像へとスムーズな移動も出来るようになります。先ほど紹介したjQueryの設定が必須になります。
<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>