kdoc - HTML

  • 作成日：2011-03-10 11:56:36
  • 修正日：2012-05-02 02:50:24

html5

↑ページトップへ

DOCTYPE

<!DOCTYPE html>

小文字でもOK。 <!doctype html>

HTML

<html lang="ja">
<html lang="en">

meta charset

<meta charset="utf-8" />

X-UA-Compatible

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<![endif]-->

stylesheet

<link rel="stylesheet" href="style-original.css" type="text/css" />

※html5としては、type="text/css" は省略可能(typeのデフォルトがtext/cssだから)。

feed

feed autodiscovery用。

<link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" />

icon

<link rel="shortcut icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.ico" sizes="16x16">

その他

<link rel="first" />
<link rel="prev" />
<link rel="next" />
<link rel="up" />

IE9より古いバージョンで、html5の要素を

<!--[if lt IE 9]>
<script>
  var e = ("abbr,article,aside,audio,canvas,datalist,details," +
    "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
    "progress,section,time,video").split(',');
  for (var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
  }
</script>
<![endif]-->

または、

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

終了タグ

  • 終了タグを書いてはいけない要素(NG: <br></br>)
    area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
  • 終了タグを省略できる要素(<img>でも<img/>でもどちらでも可)
    li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
  • 完全にタグの記述を省略できる要素
    html、head、body、colgroup、tbody

HTML4からの変更点

CDN(コンテンツデリバリーネットワーク)

httpとhttpsの両方が提供されている場合がある。
これをうまく使うには、 href="//example.com/resource.js" 等とするとよい。

CSS

↑ページトップへ

YUI3

<link rel="stylesheet" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.4.1/build/cssfonts/cssfonts-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.4.1/build/cssbase/cssbase-min.css">

Normalize.css

CSSをリセットするのではなく、ブラウザ間の差異を揃える。

背景グラデーション

Webフォント

<link href=’http://fonts.googleapis.com/css?family=Font+Name‘ rel=’stylesheet’ type=’text/css’>

CSS selector {
  font-family: 'Font Name', serif;
}

禁則

Safari/Chromeでは、

word-break: normal;

IEでは、

# ゆるい禁則(句読点、閉じかっこが行頭に来ない)
line-break: normal;
# 厳しい禁則(小さい「っ」長音「ー」も行頭に来ない)
line-break: strict;

CSS3(2010-10-05ドラフト(CSS Text Level 3))では、

line-break
(for CJK scripts)
auto | newspaper | normal | strict | keep-all

word-break
for non-CJK scripts
normal | break-all | hyphenate

JavaScript

↑ページトップへ

IE9.js

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->
  • first-child, last-child
  • header/nav/article/section等のHTML5要素(→html5.js不要)
  • 擬似クラス対応
  • 属性セレクタ対応
  • 透過PNG対応
  • position:fixed対応
  • margin:0 auto;対応
  • max-height,width対応
  • min-height,width対応
  • IE5/6のバグを修正

Webフォントが効かない？

IE9.jsを使った場合のclearfixは以下。

.clearfix:after{
  content: "";
  clear: both;
  display: block;
  height: 0;
}

ie9.jsを使うと出来ること、出来なくなること。:Toro_Unitより。

  • CSSハックが一部使えなくなる
  • 重くなる
  • :before,:afterで擬似要素を使うとき、どうやらここに1行分の高さを持った要素が生成される
  • 新しく生成されたHTML5要素には、やっぱりCSSが当たりません

jQuery

↑ページトップへ

Google APIから。
→Google Libraries API - Developer's Guide - Google Libraries API - Google Code

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.setOnLoadCallback(function(){
  // code...
});
</script>

バージョン指定は、例えば以下等もあり。

google.load("jquery", "1.4");
google.load("jquery", "1");

jQuery UIもOK。

google.load("jqueryui", "1.8.5");

あるいは、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>

圧縮

クロスブラウザメモ

↑ページトップへ

OGP

↑ページトップへ

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

type

  • article (個別の記事)
  • blog (ブログ(のトップ？))
  • book
  • external profile
  • movie
  • tv episode
  • tv show
  • video
  • website (ウェブサイト(のトップ？))

チェックツール

→デバッガー - Facebook開発者

その他の

↑ページトップへ

Twitter, Facebook, Google+1, Analytics等ソーシャルボタン

URL正規化 rel="canonical"

<a rel="author">, <a rel="me">

リッチスニペットチェック

Googleによる、メタデータチェッカ。