【XHTML＋CSS】01_XHTMLのキホン
CSS Nite ビギナーズに行ってきました。ブラウザの事情も日々変わっているので、XHTML+CSSの知識をアップデートするという意味で参加してみましたが、新たな発見がありまくりですね。 その連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。
XHTMLの書き方
マークアップのキホン
1 | <a href="URL" target="_blank">テキスト</a> |
の要素・属性・属性値（value）は、
1 | a（要素） href（属性）="URL（属性値）" target="_blank">テキスト</a> |
XHTMLの構造
XML宣言
XML宣言をすると、IE6が後方互換モードになってしまうので記述しない。
文書型宣言
HTML 1.0 Transition を選択するのが一般的。
1 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
html要素
xmlns属性、xml:lang属性、lang属性を指定しておく。
1 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> |
head要素
title要素、メタ情報（meta要素）、link要素など。
body要素
ブラウザで表示される部分。
基本情報を設定する要素
title要素
ページtitle。
meta要素
-
http-equiv属性のものは、一般的にtitle要素よりも前に指定する。
1 2
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" />
-
name属性のものは、一般的にtitleの後に指定する。
1 2
<meta name="keywords" content="キーワード1,キーワード2" /> <meta name="description" content="サイトの説明" />
1
<meta name="auther" content="株式会社○○" />1
<meta name="copyright" content="Copyright © ○○, Inc." />
文書間関係（link要素）
rel属性で関係、href属性でURL、type属性でMIMEタイプ、media属性でメディアタイプを指定。
-
スタイルシートファイルの指定
1
<link rel="stylesheet" type="text/css" href="css/import.css" media="screen, projection, tv" title="Default Style" /> -
RSSファイルの指定
1
<link rel="alternate" type="application/atom+xml" title="RSS 2.0" href="feed.rdf" /> -
トップページやヘルプページの指定
1 2
<link rel="contents" href="index.html" title="ホーム" /> <link rel="help" href="guide/index.html" title="ヘルプ" />
-
日本語以外の言語で制作したページの指定
1
<link rel="alternate" type="text/html href="index-en.html" hreflang="en" />
script要素
1 | <script type="text/javascript" src="js/common.js"></script> |
本文を構成する要素
ブロックレベル要素
- 見出し（h1〜h4要素）
- 段落（p要素）
- リスト（ul,ol,dl要素）
- 表（table要素）
- フォーム（form要素）など
インライン要素
- アンカー（a要素）
- 画像（img要素）
- 強調（em,strong要素）など
空要素
- <hr />（水平線）
- <br />（改行）
- <img />（画像）
- <input />（フォームパーツ）
div要素とID・クラス
ワイヤーフレームやデザインカンプを元にdiv要素を定義する。
ブロックレベル要素
見出し（h1〜h4要素）
h1は大見出し、h2は中見出し、h3は小見出し、h4〜h4は必要に応じて利用する。
段落（p要素）
文章ばかりでなく、見出しやリストなどもp要素としてマークアップする。
引用文（blockquote要素）
引用文。中身をp要素などのブロックレベル要素でマークアップする。
順不同リスト（ul要素）
項目を順不同で並列的に列挙するタイプのリスト
1 2 3 4 5 | <ul> <li></li> <li></li> <li></li> </ul> |
順序リスト（ol要素）
項目を順序や順番として定義するタイプのリスト
1 2 3 4 5 | <ol> <li></li> <li></li> <li></li> </ol> |
定義リスト（dl要素）
用語と説明で構成するタイプのリスト
1 2 3 4 5 6 | <dl> <td>用語</td> <dd>用語の説明</dd> <td>用語</td> <dd>用語の説明</dd> </dl> |
表（table要素）
1 2 3 4 5 6 7 8 | <table> <tr> <th></th> </tr> <tr> <th></th> </tr> </table> |
フォーム（form）要素
input要素で埋め込み、テキスト入力欄（text）や送信ボタン（submit）、チェックボックス（checkbox）などのtype属性でパーツの種類を指定。
水平線（hr要素）
フッタと、それまでの内容を区別するためにhr要素を入れるなど。一般的にはあまり使われなくなってきている要素
汎用ブロックレベル（div要素）
div要素にIDやクラスを振って範囲を示す。IDやクラスを手がかりにCSSでスタイルを適用する。
インライン要素
アンカー（a要素）
リンク。
1 | <a href="URL" target="_blank">○○</a> |
画像（img要素）
画像。
1 | <img src="URL" alt="" /> |
改行（br要素）
改行。
1 | <br /> |
強調（em要素とstrong要素）
em要素は通常の強調、strong要素はより強い強調。
削除と追加（del要素とins要素）
削除はdel要素（取消線）、追加はins要素（下線）。
汎用インライン要素（span要素）
CSSを適用させるために利用するのが一般的。
オブジェクト（object要素）
Flashや動画コンテンツを埋め込むなど。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','100','height','100','src','img/top','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','/○○/' ); //end AC code </script> <noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100" height="100"> <param name="movie" value="○○.swf" /> <param name="quality" value="high" /> <embed src="○○.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="100"></embed> </object> </noscript> |
コメントと文字参照
コメント
1 | <!-- ○○ --> |
文字参照/実体参照
- >（>）大なり
- “（"）二重引用符
- &（&）アンド記号
- （ ）改行禁止スペース
- ©（©）著作権マーク
- ®（®）登録商標
- ™（™）商標
外部リンク
