自分用HTMLテンプレートを公開してみる

いつもつかっているHTMLのひな形を自分用にメモ。
そして記憶喪失になった時に備えてほんのり解説をいれておきます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
  <meta charset="UTF-8" />
  <title></title>
  <meta id="viewport" name="viewport" content="width=device-width" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="" />
  <meta name="generator" content="Sublime Text 2" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta property="fb:app_id" content="" />
  <meta property="og:title" content="" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="" />
  <meta property="og:image" content="" />
  <meta property="og:site_name" content="" />
  <meta property="og:description" content="" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="" />
  <meta name="twitter:creator" content="" />
  <meta name="twitter:title" content="">
  <meta name="twitter:description" content="" />
  <meta name="twitter:image:src" content="" />
  <link rel="stylesheet" href="" />
  <link rel="shortcut icon" href="" />
  <link rel="apple-touch-icon-precomposed" href="" />
</head>
<body>
  <div id="fb-root"></div>
  <script>
    document.getElementById("viewport").setAttribute("content", "width=device-width,user-scalable=no");
  </script>
</body>
</html>

!DOCTYPE html

意味もなく大文字が好きなので、昔は、

<!DOCTYPE HTML>

と書いていたのですが、FacebookもTwitterも、

<!DOCTYPE html>

と書いていたので最近変更しました。

html lang="ja"

<html lang="ja">

日本語しか書けないのでlang属性をjaにしています。

head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"

これ、いつも迷いながら書いてます。
og と fb はわかるんですが、 websiteとはなんなのかと。
website ではなく article にしているサイトもあってどちらをつかうべきなのかと。
迷った挙句、og:type とあわせるという自分ルールで運用することにしました。

meta id="viewport" name="viewport" content="width=device-width"

ユーザーによる拡大を切りたい場合もここでは一旦viewportの設定しかしません。
ユーザーの拡大を切りたい場合は、body直下にて

<script>
    document.getElementById("viewport").setAttribute("content", "width=device-width,user-scalable=no");
</script>

とviewportを書き換えて対応しています。
なぜならサイトを表示前に拡縮を止めると一部のAndroidにて初期表示が画面サイズに併せて縮小されない時がある気がするからです。

meta name="author" content=""

f:id:kimizuka:20150317020055j:plain

Facebookでシェアした際に "作成: " にて表示されるっぽいのでいれています。

meta name="generator" content="Sublime Text 2"

Sublime Text 2 への感謝の気持ちを込めていれています。いつも大変お世話になってます。

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

IEの互換モードを切るために最近導入しました。

kimizuka.hatenablog.com

meta name="twitter:card" content="summary_large_image"

基本的には「大きな画像付きのSummaryカード」をつかうようにしています。

僕の場合はこれを基本に対応ブラウザによっては html5shiv をいれたり jQuery をいれたりしてます。今回は以上です。

みかづきブログその3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。