＼Monokai／
どうも、シンタックスハイライトの 好きなカラーテーマはMonokaiのDJよろずやです。
atSTRIXで記事を書き始めてもう4年目になり、記事本数は22本となりました。
基本的に技術系記事を書いているDJよろずやですが、HTMLコーディングをするときのベースとなるHTMLファイルを大公開しちゃいます。
世の中には色々テンプレートやボイラープレートが出回っていますし、人によってはEmmetで出力されたものをとりあえず使っている人もいるかと思います。
DJよろずやはプロジェクトテンプレートという形で、長年のコーディング経験から自作しています。
reset.cssも自作しているので次回の記事にでもしますかね。
※すべてを無に還すreset.cssと自称しています。
前置きが特にないのでさっそくいっていきましょう。拍手👏 。
HTML5テンプレート（雛形）
今回のテンプレートについてですが、
「あ～HTML5でコーディングするか～、いつも何書いてたっけな～～」
というのを防ぐためのindex.htmlの雛型になります。
そのまま使って良し、必要なものだけを抜き出すでも良し。
とりあえずこういうのを書くんだなって言うのを理解するだけで大丈夫です。
まずは見ていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no,email=no,address=no">
<link href="">
<link href="favicon.ico">
<link href="icon.png">
<!-- OGP -->
<meta property="og:url" content="">
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:site_name" content="">
<meta property="og:image" content="">
<meta property="og:locale" content="ja_JP">
<!-- OGP Facebook -->
<meta property="fb:app_id" content="">
<!-- OGP Twitter -->
<meta name="twitter:card" content="">
<meta name="twitter:site" content="">
<meta name="twitter:creator" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">
<!-- Import Google Fonts -->
<link href="https://fonts.googleapis.com">
<link href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap">
<!-- Import CSS -->
<link href="/common/css/reset.css">
<link href="/common/css/style.css">
<!-- Import JS/jQuery Library -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<!-- START Header Area -->
<header></header>
<!-- END Header Area -->
<!-- START Main Area -->
<main></main>
<!-- END Main Area -->
<!-- START Footer Area -->
<footer></footer>
<!-- END Footer Area -->
<!-- Import JS -->
<script src="/common/js/function.js"></script>
</body>
</html>もうこれあれば基本大丈夫です。
詳しく中身見ていきましょうか。
必要最低限
<!DOCTYPE html> //HTML5の宣言
<html lang="ja"> //このHTMLは日本語で書いていることを明示
<head>
<meta charset="utf-8"> //文字エンコーディング指定
<title></title> //ブラウザのタブなどに表示するタイトル
</head>
<body>
</body>
</html>まずHTML5として絶対必要な部分です。
最低限これだけは書いておきましょう。
インポート周り
<!-- Import Google Fonts -->
//以下Noto Sans JPの読み込み
<link href="https://fonts.googleapis.com">
<link href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap">
<!-- Import CSS -->
<link href="/common/css/reset.css"> //reset.cssの読み込み
<link href="/common/css/style.css"> //自分が書いたstyle.cssの読み込み
<!-- Import JS/jQuery Library -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> //jqueryの読み込み
<!-- Import JS -->
<script src="/common/js/function.js"></script> //自分が書いたfunction.jsの読み込み正直この辺りは好きにしてもらって大丈夫です。
私の場合はNoto Sans JPを使用することがほぼ100%なので、もはやテンプレートに入れてしまっています。
使用するfont-weightは主にRegular(400)、Medium(500)、Bold(700)なのでそれも指定しています。
不要なら数字を消すだけだし、もっと必要なら100とか900とか書けば大丈夫です。
また、このGoogle Fontの指定だけではフォントは当たらないので、きちんと以下をCSSに記述してください。
body {
font-family: 'Noto Sans JP', sans-serif;
}CSS部分に関しては、reset.cssとstyle.cssに分けていますが、私の本当のテンプレートではstyle.cssだけです。
理由としては、私は主にscssを使用しているので、style.cssの中に自作resetも内包してしまっているからです。
今回は便宜上分けています。
あったほうが良い
<meta name="description" content=""> //サイトの説明文
<meta name="keywords" content=""> //サイトのキーワード（,(カンマ)で区切る）
<meta name="viewport" content="width=device-width,initial-scale=1.0"> //viewportの設定
<meta name="format-detection" content="telephone=no,email=no,address=no"> //リンク不要の記述
<link href=""> //URLの正規表現
<link href="favicon.ico"> //ファビコンの設定
<link href="icon.png"> //スマホのホームに追加したときのアイコンdescriptionとkeywordは基本的に記述します。
検索にヒットしやすくなるような説明文やキーワードを設定しましょう。
viewportは画面の表示領域の設定になります。
width=device-widthは横幅はデバイスの横幅に合わせるという意味です。
また、initial-scale=1.0はサイトの初期表示時を1倍（等倍）で表示することを意味します。今回の書き方はレスポンシブサイトを作成したときに必要な書き方となります。
format-detectionは自動リンクの作成を許可するかです。
iPhoneの場合だと、電話番号・メールアドレス・住所が自動的にリンクになってしまいます。
それを防ぐ場合は今回の書き方が必要です。
canonicalはURLのバリエーションのうちどれが正しいものかをクローラーに教えるものです。
例えば
- http://hoge.com
- http://www.hoge.com
- http://hoge.com/index.html
- https://hoge.com
のようにどれでも同じページに遷移することができますね。
その場合クローラーが全部を記憶してしまい、重複したページとみなされる場合があります。
重複を防ぐためにcanonicalを使用して、https://hoge.comのみを記憶させるといった使いかたをします。
iconはもはや知らない人はいないと思いますがファビコンの設定です。パスを記述しましょう。
apple-touch-iconはスマホのホームに追加したときのアイコンの設定になります。
OGP
<!-- OGP -->
<meta property="og:url" content=""> //ページのURLを設定
<meta property="og:type" content=""> //ページの種類を設定
<meta property="og:title" content=""> //ページのタイトルを設定
<meta property="og:description" content=""> //ページのディスカッションを設定
<meta property="og:site_name" content=""> //サイトの名前を設定
<meta property="og:image" content=""> //ogp画像の設定
<meta property="og:locale" content="ja_JP"> //ページの国コードの設定
<!-- OGP Facebook -->
<meta property="fb:app_id" content=""> //FacebookのアプリIDの設定
<!-- OGP Twitter -->
<meta name="twitter:card" content=""> //Twitterカードの大きさの設定
<meta name="twitter:site" content=""> //WebサイトのTwitterアカウントのIDを設定
<meta name="twitter:creator" content=""> //コンテンツ作成者のTwitterアカウントのIDを設定
<meta name="twitter:title" content=""> //ページのタイトルを設定
<meta name="twitter:description" content=""> //ページのディスカッションを設定
<meta name="twitter:image" content=""> //ogp画像の設定最後にSEOに関するものです。
SEOで設定する上では、url・title・description・imageは必須で書いたほうが良いと思います。
titleはname=”description”で書いたものと同じで問題ありません。
descriptionも同じもので問題ありませんが、SNSシェアしたときに表示する文章になるため、短めの方が良いと思います。
urlはページのURLの設定しますが、絶対パスで記述する必要があります。
imageはSNSシェアされたときに表示する画像です。こちらも絶対パスで記述する必要があります。
typeはなくても問題ありません。
設定の際には以下のいずれかを記述します。
- website ：トップページなど
- blog ：ブログのトップページなど
- article：記事やブログの投稿ページなど
site_nameはページタイトルではなく、サイトのタイトルを記述してください。
続いて、fb:app_idですがこれはあまり記述することはありません。
FacebookのアプリIDを所持している場合に記述します。
Twitter:cardですが、twitter:title・twitter:description・twitter:imageはそもそも記述しなくて大丈夫です。
何故なら、事前にtitle・description・og:imageを設定しているので共通利用することができるからです。
twitter:cardはSNSシェアした場合に表示するサムネイルの大きさを指定します。
一般的に使われるものは以下の2つになります。おすすめはsummary_large_imageです。
- summary：画像が小さく配置された横長のカードで表示
- summary_large_image：画像を大きく表示し、その下にタイトルや説明文を表示
twitter:siteとtwitter:creatorは基本的に必要ないですね。
設定したい場合はtwitterアカウントを「@」から記述してください。
おわりに
ざっくり説明は以上となります。
雛形を使用することで、ページを作成する場合に統一感を持つメリットがありますので、ガンガン自分なりのテンプレートを作成して運用していきましょう。
HTMLはCSSと同様に月日が経つにつれて仕様が変わることがありますので、コーディングをする人は定期的に今の仕様がどんなものなのかリサーチすることを怠らないようにしましょう。
さらばだ✋