Web Survive

Webで生きる道を模索するブログ

html上部に毎回入れる要素のテンプレと要素の説明

      2016/03/01

head-template
新しくサイトを作る時、
htmlの上部に詰め込む要素なんだっけ?って毎回不安になります。
以前作ったサイトをコピペしてもってくるにしても
この「記述なんだろ?なんでいれてるんだろ?」ってど忘れしてたり・・・
なので、もう迷わないようhtml上部にいれる要素のテンプレと
その説明を今回書いておこうと思います。

HTML上部にいれてる基本的な要素

IE対策のコード1(コンディショナルコメント)Paul Irish氏が提案するIEの過去バージョンに対するCSSハック

WEBサイトを制作する上で避けては通れない「IE」対策・・・
CSSハックしたり、JavaScriptを読み込んだりして
色々とサイトの裏側で施術を行うわけですが
その施術の内の一つとしてコンディショナルコメントというものがあります。

コンディショナルコメントとは

特定のIEだけにスタイルシートを適用するためのコメントアウトです。

IE対策のコード2(IEの最新のレンダリングエンジンが適用)

IEの利用可能な最新のレンダリングエンジンで表示します。

様々なブラウザを HTML5 と CSS3 に対応させる

「modernizr.js」は様々なブラウザをHTML5とCSS3に対応させる
JavaScriptライブラリ。
IEでCSS3 Media Queriesを有効にする「Respond.js」も組み込まれている。
「Respond.js」の替わりに「html5shiv.js」を選択することも可能。

Modernizr

http://modernizr.com/
「modernizr.js」は上記のサイトからDL可能

IE8以下のHTML5対応

IE8以下はHTML5に対応していませんが

Google Codeで公開されているhtml5shivスクリプトを利用すれば
IE8以下でもHTML5のページを表示することが可能になります。

追記

Google Codeがスパムや悪質なプロジェクトのために
2016年1月25日に終了しました。
IE8はHTML5の新しい要素に対応していないので、
スクリプトで対応するようにしてくれる「html5shiv」ですが、
現在はhtml5shivのファイルがロードできなくなり、IE8では体裁が崩れます。
以前まで↓下記のコードをheadタグ内に書いていました

現在はhtml5shivのスクリプトファイルをダウンロードして、
サーバーにアップしてそこからダウンロードするようにすれば大丈夫です。
一例ですが、jsというディレクトリにファイルを置くとこんな感じになります。

GitHubからDLできる

現在はGitHubの方に移行されています。
aFarkas/html5shiv(GitHub)
ファイルは「https://github.com/aFarkas/html5shiv/blob/master/dist/html5shiv.min.js」
バージョンは「3.7.3-pre」です。
記事上記の僕のテンプレートはこれを採用しています。

CDNでロードする方法

BootstrapのBasic TemplateのページにMaxCDNからロードする形式があります。
現在指定されているのhtml5shivのバージョンは3.7.2です。

Basic template – Getting started(Bootstrap)
自分のサーバーにhtml5shivのファイルを置きたくない方は、上記のMaxCDNのアドレスを利用できます。

カスタマイズ

記事上記のテンプレに追加・編集したものを個人的に使用することが多いです。
CSSリセット、jqueryなどなど・・・。

viewport

スマホ向けのデザインとしてviewport でデバイスの横幅を指定する
width=device-widthは「デバイスの横幅で描画」という意味

DNS prefetch

DNS prefetch を指定してサイトの表示を速くする

noodp metaタグ

DMOZ(ODP)に登録されたサイトは、GoogleやBingではSERPのタイトルやサマリーがDMOZの情報に置き換えられることがあります。
これを防いで、titleタグに記述したページタイトルやmeta descriptionで記述したサマリーを(なるべく)使ってほしいときはnoodp metaタグを追加

canonical

異なるURLを正規化する際に使用できるタグ

 - Webサイト制作

  関連記事