博報堂アイ・スタジオのさまざまなクリエーションの形、それに関​連する情報などを発信していきます。

【HTML】最近のPCサイトに見るテンプレ要素まとめ

新卒入社2年目で、フロントエンドエンジニアをしています。阿部です。
いろいろなサイトのソースを見ていて、最近見るなぁと思った要素を勉強がてらにまとめてみました。
「IE対策」、「キャッシュ対策」、「高速化」、「ソーシャルメディア要素」、「スマートフォン要素」の5つに分けて、広く浅くですがご紹介します。

IE対策

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

IEで閲覧している場合、Google Chrome Frameで表示します。
Google Chrome Frameがインストールされていない場合は、IEの利用可能な最新のレンダリングエンジンで表示します。

Google Chrome Frame(GCF)とは、IEでGoogle Chrome相当のレンダリングエンジンを利用可能にするIEのプラグインです。
インストールすると、IE8以下でもCanvas、CSS3、HTML5、高速なJavaScriptエンジンが利用できるようになります。

Google Chrome Frameテスト画像

実際にIE6にGCFをインストールしてみた図です。CSS3の角丸とグラデーションがきちんと表示されています。ソースビューワもカラーリングされて見やすくなっています。

HTML5を採用する場合は、IE対策の1つとしてかなり使えるのではないかと思います。
GCFは管理者権限不要でインストールできるため、管理者権限がなくてIEを更新できず、仕方なく古いIEを使っているというユーザが多いようです。
GCFは、X-UA-Compatibleでchrome=1が設定されているページでないと使えないので、個人的には、HTML5のサイトでなくとも、GCF利用者のためにいれておきたい要素だと思っています。

キャッシュ対策

<link rel="stylesheet" href="/css/style.css?v=1" type="text/css" media="all">
<script src="/js/script.js?v=1" type="text/javascript"></script>

レイアウトなどを変更したときにキャッシュが残ってしまってファイルが更新されず、ページが崩れて見えてしまうのを防ぎます。
ファイルリンクに「?v=1」などパラメータをつけておき、更新時に「?v=2」などに変れば、キャッシュが残らずに常に新しいファイルで表示できます。

CSSやJSの読み込みで使っているサイトが多いです。
読み込み部分をSSIにしておけば一気に変えれて便利ですね。

高速化

Google Libraries API

<!-- 読み込み方法1 (「INSERT-YOUR-KEY」部分にはGoogle API keyをいれてください。)-->
<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script>
google.load("jquery", "1.6.2");
</script>
<!-- 読み込み方法2 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

GoogleはjQueryなどの人気のあるJavaScriptライブラリを提供しており、Google Libraries APIのページから無料でリンクできます。
これらは多数ホストで提供されているため、高速でダウンロードできます。
また、他サイトで既にダウンロードされていた場合はキャッシュされるため、読み込みが高速になるなどの特徴があります。

ロード方法は直接srcにスクリプトのURLを指定して読み込む方法と、google.loadメソッドを使う2つの方法があります。
詳しくは下記サイトをご覧ください。

Googleに依存するので、コーポレートサイトなどでは使うのは気が引けるのですが、キャンペーンサイトや自社サイトなどでは積極的に使っていきたいと思っています。
また、上記コードの「1.6.2」というバージョン部分を「1.6」などにしてマイナーバージョン省くと、自動的に最新の「1.6.x」のものを読み込んでくれるので、アップデートの手間が省けて便利ですね。

ソーシャルメディア要素

Open Graph Protocol (OGP)

<html lang="ja" xmlns:og="http://ogp.me/ns#">
<!-- 中略 -->
<meta property="og:title" content="【HTML】最近のPCサイトに見るテンプレ要素まとめ">
<meta property="og:type" content="article">
<meta property="og:image" content="http://www.ist-jo.in/wp-content/themes/ist-join/images/ogp_image.jpg">
<meta property="og:url" content="http://www.ist-jo.in/archives/xxx">
<meta property="og:site_name" content="istis">
<meta property="og:description" content="いろいろなサイトのソースを見ていて、最近見るなぁと思った要素を勉強がてらにまとめてみました。">

Webページとソーシャルグラフとの連携を可能にします。
例えば、「いいね!」を押されてウォールに投稿されたときの、タイトルや概要、画像などが、OGP情報により指定できます。

OGPには、下記のようなプロパティがあります。(ほんの一部です。)

▼プロパティ ▼内容 ▼例
og:title オブジェクトのタイトル 【HTML】最近のPCサイトに見るテンプレ要素まとめ
og:type オブジェクトの種類
The Open Graph Protocolの「Object types」部分を参照して選択してください。
article
og:image オブジェクトの画像 http://www.ist-jo.in/wp-content/themes/ist-join/images/ogp_image.jpg
og:url オブジェクトのURL http://www.ist-jo.in/archives/xxx
og:site_name サイト名 istis
og:description オブジェクトの説明 いろいろなサイトのソースを見ていて、最近見るなぁと思った要素を勉強がてらにまとめてみました。

OGP情報をいれることによりFacebookからの流入数が増えるとの話もあります。

詳しくは下記サイトをご覧ください。

個人的には、description、keywordsと同じようにデフォルトで入れてみても良いと思います。 

ちなみに、一度「いいね!」がクリックされたりすると、Facebook上に情報がキャッシュされてしまい、その後更新しても反映されないということがあるので注意してください。
情報をキャッシュしなおしたい場合はDebuggerでOGP情報の再取得ができます。
(以前はURL Linterという名前だったのですが、変わったようです。)

スマートフォン要素

viewport

<meta name="viewport" content="width=1024">

スマートフォンで見たときの表示領域を指定できます。

PCサイトにあるような横幅980px以上のコンテンツは、viewportを設定せずにスマートフォンで見ると、コンテンツがはみ出て隠れてしまう可能性があります。
このようなサイトではviewportを980px以上に指定して、コンテンツが隠れないようにすると良いです。
ちなみにAppleのサイトではviewportにwidth=1024が指定されています。(2011年8月現在)

viewportの指定には、他にも下記のようなプロパティがあります。

▼プロパティ ▼内容 ▼デフォルト値
width viewportの横幅 980px
height viewportの縦幅 デバイスの縦幅に応じる
initial-scale ページ読み込み時の拡大率 1.0
user-scale ユーザによる拡大縮小の許可 yes
minimum-scale 最小の拡大率 0.25
maximum-scale 最大の拡大率 1.6

スマートフォンでは、widthをdevice-width以外の設定(数値)にすると、landscape時(横向き時)にもその幅に固定されます。
そのため、スマートフォン専用のサイトでは一般的に
<meta name="viewport" content="width=device-width">

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
など、リキッドレイアウト用の指定が見られます。

※スマートフォンは端末によって仕様、動作にバラつきがあるので、設定しても思ったとおりの結果にならないことがあります。
必ず実機で表示を確認してください。

スマートフォンでPCサイトを見る人も増えてきているので、デフォルトで設定しておくと良いかもしれません。 

AndroidはOSのバージョンや、端末により動作が違う場合があるので注意が必要です。

format-detection

<meta name="format-detection" content="telephone=no">

数字の羅列が電話番号として扱われ、リンクが貼られるのを防ぎます。

逆にリンクを貼りたい場合は<a href="tel:00-0000-0000">00-0000-0000</a>で貼ります。

スマートフォンで見てみたら、予期せぬところがリンクになってしまうのを防ぐことができます。

※スマートフォンは端末によって仕様、動作にバラつきがあるので、設定しても思ったとおりの結果にならないことがあります。
必ず実機で表示を確認してください。

これもviewportと同じようにデフォルトで設定しておくと、スマートフォンユーザに親切だと思います。
iPhoneではリンクの下線がでるのですが、Androidでは下線がでない機種もあるようです。 

AndroidはOSのバージョンや、端末により動作が違う場合があるので注意が必要です。

既にこれらの要素を使用されているサイトが結構あるので、ご存知だった方も多いかもしれません。
まだ使用されたことがない方は、今からでも使える要素ばかりだと思うので、ぜひ試してみてはいかがでしょうか?


※8月26日(金)追記: 
og:imageのcontentを絶対パスに修正しました。

sanae.abe

Join Us
応募する

istisをご覧になって、博報堂アイ・スタジオでの仕事に興味を持った方、一緒に働いてみたいと思った方は、ぜひご連絡ください。お待ちしております。

【HTML】最近のPCサイトに見るテンプレ要素まとめにコメントする