1章Web標準とは何か。
機関や団体
ECMA
ECMA 262：java script標準規格
ECMA 357：xml標準規格
w3c（http://www.w3c.org）
草案（Working Drafts）
最終草案（Working Drafts Last Call）
勧告（Candldate Recommendations）
勧告候補（Proposed Recommendation）
勧告（Recommendations）
Web標準の利点
変更と管理が容易（コンテンツ構造と視覚表現の統一）
ウェブアクセシビリティの向上（多様なユーザーに高いアクセシビリティを提供）
SEO（検索エンジン最適化）の代替（SEOを利用した文書の構造を明確に）
ファイルサイズの縮小とサーバーストレージスペースの節約（効率的にソースを作成でき、サーバーの負担の最小化）
下位互換性と上位互換性（古いページでもコンテンツを正常に表示されて上、下位互換性と相互運用性が確保）
構造言語
html4.0：Strict、Transitional、Frameset DTDの三つの文書型を使用可能
XHTML 1.0：Strict、Transitional、Frameset DTDの三つの文書型を使用可能
XHTML 1.1：Strictのみ使用可能
その他の言語
mathML：数式記述言語で、近年（HTML5）<Canvas>タグを利用して、頻繁に使用される
SVG：2次元ベクトルグラフィックス記述言語でヅジョムの間の距離を利用するために画像変換時のイメージの損傷が少ない。
RDF / RDFS：メタデータを表現するための言語
ウェブアクセシビリティ（WCAG1.0）：（現在2.0）のドキュメントがうまく変換されるように、コンテンツを理解でき、操作可能に2つのテーマを基に検査項目で構成
2章文書構造 - XHTMLのWebページの構築を開始
HTML、URI、HTTP、
HTTP：文書の転送プロトコルとしてTCP / IP（双方向接続指向、信頼性が高い）に関連する1つのアプリケーションプロトコル
HTMLでの応答要求は、HTTPヘッダ（HTML文書を解釈する方法）とHTTP文書で応答要求を実行します。
URI：= URL（アドレス）+ URM（リソース名）
絶対URI：URIスキームでパスまで全部書くこと（一般的なURI）
相対URI：自分のファイル、フォルダを起点とした他のファイルとのパス（主に自分のサイトなら、フォルダやファイルを参照するときに使用）
XHTMLの全体的な外観と書式
html要素をルートとするツリー構造でました
内容をタグで囲むことでマークアップするのが特徴（<要素名>の内容</要素名>）
要素の属性を付与すると、<要素名属性名= "属性値">の形式で記述
親要素と子要素の関係を適切に指定
エンコード属性UTF-8：（標準）8bitの可変マルチバイトに文字表現
ISO-LATIN-1：8bitで一文字を表現
ASCII：7bitに一文字表現
EUC-KR：（ISO-LATIN-1 +東亜巻文字）で古着の文字表現
文書型宣言：<！DOCUMENT html（文書）PUBLIC（予約語） " - / / W3C / / DTD XHTML 1.0 Strict / / EN"（公認URI）
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"（システム識別子）>として宣言
strict：下位互換性が厳しい。
transition：上位互換性がよくできる
frameset：frameタグを使用すると、ドキュメントに宣言
名前空間：<htmlxmlns="http://www.w3.org/1999/xhtml"(네임스페이스)xml:lang="ko"lang="ko"(オンオコドゥ)>
メタデータ属性の定義
MIMEタイプと文字のソースコード：metaタグ内のhttp-equiv = "Content-Type"（MIMEタイプ）content = "application / xhtml + xml; charset = UTF-8"（文字ソースコード）
検索ロボットの制御：name属性に "ROBOTS"の指定
contentプロパティ（複数指定可）：ALL（デフォルト、INDEX、FOLLOW同じ）、NONE（ "NOINDEX、NOFOLLOW"同じ）、INDEX（そのページを収集対象とする）
、FOLLOW（そのページ+リンクページ収集対象）、NOINDEX（そのページを収集対象から除外）、NOFOLLOW（そのページを含むリンクのページを収集対象から除外）
表の
グループ化要素（<thead>、<tbody>、<tfoot>）
<table>
<thead>
<tr>
<td> ... </ td>
....
</ tr>
</ thead>
<tbody>
<tr>
<td> ... </ td>
.....
</ tr>
</ tbody>
<tfoot>
<tr>
<td> ... </ td>
....
</ tr>
</ tfoot>
- >>表がサイズが大きくなるギョンユスクロールバーを提供し、複数の印刷ページなど、ユーザーに便利なインターフェイスは、提供可能にしてくれる。
熱結合
<thead>
<tr>
<th id="brs"axis="ファミョンピョシ"abbr="ブラオジョ">ブラウザ</ th>
<th id="ver"axis="ファミョンピョシ"abbr="ボジョン">バージョン</ th>
<th id="pct"axis="ビユル"abbr="ビユル">率</ th>
</ tr>
</ thead>
<tbody>
<td headers="brs ver" colspan="2">合計</ td>
...........................
=>上記の式のようにtheadで宣言したid値をheadersを利用して二つのthタグを使用することができる。
* tabindex属性accesskey属性（現実性が落ちる）
tabindex：tabキーを押したときのフォーカスの移動順序を指定する
accesskey：アクセスキーを押したときのフォーカスを指定
イメージ要素使用時のalt属性は必ず記載（属性名=画像の説明）
第3章視覚表現 - cssで自由にデザインする
CSS
：ウェブページの視覚的な表現を制御します。
：滝構造で上位の要素 - （電波） - >サブ要素
CSS基本ルール
[書式]セレクタ{属性：値}
コンマで区切って複数セレクタについて記述可能（h1、h2、h3 {color：green}）
小文字で記述する。
コメント= / *コメントの内容* /
絶対単位：表示のままpt（ポイント、1/72であるㅊ）
相対位置：画面等に応じて変換されるpx（ピクセル）、em（既定のプロパティ値を1にして0.1（1/10倍）、2（倍）技術
URI：CSSの値にURIを指定するときに使用（@ import.ur（URL））
継承Table（<Table> <tr> <td> </ td> </ tr> </ table>）tr、tdタグ、<div> <span> </ span> </ div>（spanの親は、div ）にプロパティの値にinhreit属性名を指定
CSSを適用する方法と優先順位
適用方法
個々の要素（<p style="margin:15px">）
<head>範囲内にstyle要素を指定<style type="text/css"> p {margin：15px}
<head>範囲内linkを利用して、外部スタイルシートを参照（<link rel="stylesheet" href="./css/default.css"/>）
<head>範囲内@ importを使用して、外部スタイルシートを参照<style teyp="text/css"> @ import.url（URL）</ style>
<meta http = equiv = "Context-Style-Type" content = "text / css"
優先順位
セレクタに含まれているユーザーIDが
仮想クレスとクラス属性
セレクタに含まれている要素名
！importantを利用して最優先の定義可能
セレクタと擬似クラス、仮想要素
完全セレクタ：セレクタに*技術と、すべての要素にスタイルを指定が可能
タイプセレクタ：選択私に要素名を記入すると、記入した要素にスタイルを指定する
classセレクタ：要素名。class名付与してスタイルを指定する。また、要素名なし。class名に対応するclass名が定義された要素にスタイルを指定することができる。
idセレクタ：要素名＃id値を記入して（idは一意の値）のスタイルを指定します。単一の要素のスタイルを定義するときに使用
class、idを選択として使用可能な文字：アルファベット（a〜z、A〜Z）で始まり、数字（0〜9）、 - 、Unicode（ISO 10646）で認められている一部の文字で構成
セレクタの組み合わせ
セレクタ（親）セレクタ：親要素にポラムされたすべての子要素を基にスタイルを適用する方法
セレクタ（親）>セレクタ：親要素の直後の子要素を対象にスタイルを適用する方法
セレクタ+セレクタ：ツリー構造と同じ親要素を持つchildNodes要素を対象にスタイルを適用させる方法
セレクタ、セレクタ：複数の要素にスタイルを一度に適用
CSS3に追加予定セレクタ
要素名[属性名^ = "属性値"]：要素名、属性名、属性値と前部が一致するように含まれている要素
要素名[属性名$ = "属性値"]：要素名、属性名、属性値と後半が一致するように含まれている要素
要素名[属性名* = "属性値"]：要素名、属性名、属性値が少なくとも1つポホムされた要素
要素名〜要素名：要素の間接的な弟要素をターゲットにスタイルを適用する方法
仮想クレス
：first-child：親要素：first-child親要素で最初に登場する子要素のみスタイルを適用する
リンク仮想クレス：リンク制御：link（開かれたことのないページへのリンクに適用）、：visited（既に開かれたことのある敗アザロのリンクに適用）
順序=> link - > visited-> hoverの順だ。
ボックスモデル
内容、ボーダー、パディング（その内容とボーダーの間の距離）、マージン（ボーダーと他の要素の距離）で成り立つ
視覚整形モデル
displayプロパティ
none：視覚的に表示されない
block：その要素をブロックボックスとして作成
inline：その要素をインラインボックスとして作成
inline-block：要素をブロックボックスとして作成しますが自体は置換要素のように一つのインラインボックスとして配置
positionプロパティ
static：通常の配置（要素間の影響あり）
relative：相対配置（本来の位置から相対的に移動）
absolute：絶対配置（要素間の影響なし）
fixed：固定配置（+ absolute）
フロート
要素のボックスを移動させることをフロートとする。
clear：フロート解除
display、position、floatプロパティの階層的な規則
displayプロパティがnoneアミョンpositionプロパティとfloatプロパティを無視
positionプロパティの値がabsolute、fixedの場合、displayプロパティの値は、block、floatプロパティの値はnone
floatプロパティの値がnone以外の場合displayプロパティの値は、block
displayプロパティの値がこの設定されてそのまま適用
z-index：要素の重なりで重なる順序の指定（高い値が早い順）
テキスト表記の方向
direction：テキスト基本表記方向（ltr：左>右、rtl：右>左）
unicode-bidi
nomal：デフォルトではUnicodeの表記方向
embed：directonプロパティで設定した方向
bidi-override：インライン、<ブロック> <インライン/> </ブロック> unicode表記方向設定無効
width、height属性の規則
ビーチ環インライン要素にはwidth、height属性適用不可（高さline-heightプロパティで指定）
絶対配置されたブロックレベルの要素の含まブロック式で決定
幅=
インラインボックスの高さ：line-heightプロパティで指定
インラインボックスの垂直位置：vertical-alignに指定
視覚効果
overflowプロパティ：要素のサイズが外れた場合の処理方法
visible：ボックス外に出る内容を切るボックスの外側にも表示0
hidden：ボックス外に出る内容を切るボックス外側の表示x
scroll：ボックス外に出る内容を切るスクロールバーを作成スクロールバーを使用したコンテンツを見ることができる。
auto：ブラウザに依存して流動的に見せる
clipプロパティ：要素の一部を抽出
rect：要素中心に四角形を利用して抽出（+要素の中、 - 要素の外側）
auto：要素と同じサイズで指定
visibility属性：要素ボックスが見えるんであるかも指定ヨクヨクx（visible見えるようにする、hidden：見えないようにする。レイアウトに影響を及ぼす）
文字色
colorプロパティ：テキスト要素に色を指定
テキストを含まない要素に色属性の意味：colorプロパティの値を参照してできるように指定
背景
background-color：要素の背景に色、画像の指定
背景は、要素が生成するボックスの内容、パディング、ボーダー領域に適用
マージンは常に透明
規定値はtransparentデフォルトの設定は、親要素の背景に映る
明度差：文字色と背景色のそれぞれのRGB値を0〜255の10進数で表記して{（R * 299）+（G * 587）+（B * 114）} / 1000の計算式で計算
色差：文字色と背景色のそれぞれのRGB値を0〜255の10進数で表記して（max（R、R）+ {max（G、G）-min（G、G）} + max（B、B）-min （B、B））の計算式で計算
background-repeat属性：背景画像の繰り返しを指定
repeat：垂直、水平方向の繰り返し、repeat-x：水平方向に繰り返し、repeat-y：垂直方向に繰り返し、no-repeat：繰り返しx
background-attachment：背景画像の移動、固定を指定
scroll：スクロールと一緒に背景画像の移動
fixed：ブラウザ表示、永遠に対して固定
background-position：背景画像の初期位置を指定
backgroundプロパティを一括指定することができる
フォント
font-family：グルゴルファミリ名を指定して代表ファミリ名を指定する
フォントファミリ：MS Pゴシック、MS Pゴシック........ etc。
代表ファミリー：serif、sans-serif、cursive、fantasy、monospace
font-variant：フォントの変換プロパティ
nomal：通常のフォント
small-caps：小文字を大文字に変換フォントのサイズ、位置占めはそのまま
font-weight：フォントの太さを指定
100〜900：サイズが大きいほど、太字
nomal：400のような太さ
bold：700のような太さ
bolder：継承した太さの最大値を反映
lighter：継承した太さの最小値を反映
font-stretch：文自爆指定する属性
font-size：フォントのサイズを指定する
絶対単位指定時、一部のブラウザユーザーが設定を変更して、フォントサイズを変えることができないアクセシビリティが低下する。
font-size-adjust：フォントサイズを調整
テキスト
text-indent：テキストの最初に登場する行のインデント幅を指定
text-align：テキスト精霊を指定
right、left、center：右、左、中央に配置
justify：テキストの両端揃え、インラインボックス自体を減らしたり、増える
text-decoration：テキストの装飾を指定（下線、上層部、取り消し線）
text-shadow：テキストの影を入れる。（色、長さの指定）
letter-spacing：テキストの文字間隔を指定
word-spacing：テキストの単語間隔を指定
text-transform：テキストの大文字小文字変換
capitalize：各単語の最初の文字が大文字に変換
uppercase：すべての文字を大文字に変換
lowercase：すべての文字を小文字に変換
white-space：エレメントの中の空白文字の処理方法を指定
pre：連続する空白文字の圧縮を禁止（指定されたスペースだけ見せています）
nomal：連続する空白文字のものに圧縮
nowrap：連続する空白文字のもので、圧縮、改行なくなる（Aで強制改行）
表の
table：ブロックレベルの表
inline-table：インラインレベルの表
table-row：tr要素で行を作成
table-row-group：行グループから成っている（tbody）
table-header-group：要素をヘッダ行グループにする（thead）
table-footer-group：要素をフッター行のグループから成っている（tfoot）
table-column：その要素を列作る（col）
table-column-group：要素を列グループにする（colgroup）
table-cell：要素をセルに作る（td、th）
table-caption：その要素をキャプションにする（caption）
テーブル視覚整形モデル
___________________
| <キャプション要素> |
--------------------
| <テーブル要素ボックス> |
--------------------
cation-side：キャプションの位置を指定
table-layout：テーブル関連要素にレイアウト方法を指定します。
border-collapse：ボーダーの表示モデルを指定
separate：分離ボーダーモデルを使用する表全体のボーダーと各セルのボーダーが分離
callapse：結合ボーダーモデルを使用し、表とボーダーが結合
結合ボーダーモデル時衝突
border-style値がhiddenである場合、優先順位の最もよいになる。
border-style値がnoneのボーダーは優先順位最下位になる。
border-styleの値がhiddenがない場合、幅が広いボーダーが優先順位になる。
border-stylle値がborder-widthの値が一致する場合、セルの指定が最優先される。
border-spacing：分離モデル時隣接するセルのボーダー領域を指定
empty-cells：分離モデルで、空のセルのボーダーと背景の表示方法を指定する（show、hide）
生成内容：before、after '疑似要素を組み合わせて、文書の中に任意のテキストを生成しないことによって私引用符を生成
リスト
list-style-type：リストのマーカーを指定
list-style-image：リストのマーカー画像の指定
list-style-position：リストマーカーの位置をマーカーボックスを基本ブロックボックスの内側（inside）、基本ブロックボックスの外側（ouside）
@ルールとメディアコントロール
mediaタイプ
all：すべてのメディア、screen（pcディスプレイ）、print（印刷出力）、aural（音声出力）、handhold（携帯端末）
@ import：外部スタイルシートを参照する際に使用
@ import url（ "URL"）;、@ import "URL"
@ charset：外部スタイルシートの文字コードセットを指定
外部スタイルシート一番最初に技術
一つの外部スタイルシートに複数指定不可
style要素で文書内に作成されたスタイルシートは指定できない
第4章相互作用 - ウェブサイトを飾る様々なコンテンツ
フォームのインストール
フォームとは？
ユーザーがコンテンツを入力して、サーバー内のプログラムにデータを送信するための装置である。
動的に文書を生成/処理する
フォームの定義
atrion = "URL"：URLにデータをメソッド方式で送信する
method = "メソッド"：フォームの内容を処理する方法（基本get）
get：データをURLを介して送信する。
post：データをカプセル化を介して送信する。
enctype：ファイルを転送するときに使用される属性
name：フォームを訴えできる識別子を使用するときに使用
input要素
type属性
text：単一行のテキスト入力フィールド
password：text要素ランだが英数字に限定され、 "*"などで内容を隠して表示
checkbox：複数選択が可能な入力ボックス
adio：単一選択可能な入力ボックス
submit：フォームに保存された内容をactionに記入されたurlを通って送信
reset：フォームのすべてのデータを初期化
buttom：ボタン要素のスクリプトやプログラムに任意の指示をする。
hidden：フォームに隠しフィールドで実際の表示せずにデータを転送するときに使われる。
hiddneフィールド使用時の画面に表示されませんが、重要なデータを送信する際には避けるようにする。
textare：複数行のテキストフィールドを作成し、インライン要素の使用
select要素、option要素
セレクトメニューを生成するのにインライン要素であるselect、option要素を使用します。
label要素
要素に対してアクセシビリティを強化するためのタグで、画面では確認できませんが要素にコントロールと関連させることができ、同期が可能
明示的ラベル付与：label属性に要素のid値をfor属性が記入する。
暗黙のラベル付与：特定の要素をlabelで囲ん要素を含んでいる方法である。
複数のラベルを付けることができません。
fieldset、legend要素
fieldset：フォームの中に複数の要素をグルム化してフォームをより精密に構造化
legent：fieldsetでグループ化したもののタイトル
スクリプト挿入
スクリプトは動きのあるインタラクティブなコンテンツを実装するためのプログラミング言語で、主にクライアント内で処理される。
java script _：スクリプト言語の事実上の標準として今までCGIを使用していなければ不可能な処理がjava scriptによって実装される
ECMA script：欧州電子計算機ECMAが標準化されたjava scriptの標準規格である。
J script：microsoft社が独自にjavascriptを独自拡張したスクリプト言語である。ため、IE以外のブラウザでは、安定した動作が保証されない。
VB script _：Visual Basicのサブセットであるスクリプト言語でIE以外のブラウザでは、安定的ではない。
Tcl：カリフォルニア大学バークレー校で開発されたスクリプト言語、UNIX環境でのGUIやマクロで同じに処理するために開発
スクリプト言語の指定
meta要素にスクリプト言語を指定してくれる必要があります（<meta http-equiv="Content-Script-Type" content="text/javascript"/>）
スクリプトの指定：type（スクリプトのMINEタイプを指定）は、src（外部スクリプトのURIを指定）は、charset（外部スクリプトの文字コードセット）
スクリプト書き込み時<！[CDATA [Javaスクリプトの内容部]]>（ジャバスクリプトの内容部は一般的なcharactorです。）指定
/ / <！[CDATA [
内容部
/ /]]>
noscript要素：スクリプトを使用できない環境でスクリプトの実行ができない場合は、代替要素である。アクセシビリティの向上に役立ちます。
イベントハンドラ
onload：このプロパティ要素が読み取り差し上げた後、イベントが発生し
onunload：このプロパティ要素から別の文書に移動するときに発生
onclick：入力デバイスで、ボタンクリック時に発生するイベントを指定
onmousedown：その要素にマウスカーソルが押されたときに発生
onmouseup：その要素にマウスカーソルが押されたサントから浮いた時に発生
onmouseover：その要素にマウスカーソルがあげと時に発生
onmousemove：その要素にマウスカーソルが動いた場合に発生
onmouseout：その要素にマウスカーソルが外れた場合に発生
onfocus：その要素にフォーカスがアクティブになると発生
onblur：その要素にフォーカスを無効にした場合に発生
onkeypress：その要素に特定のキーが押された場合に発生
onkeydown：その要素に特定のキーが押されているときに発生
onkeyup：その要素に特定のキーが押されているが放したときに発生
onsubmit：フォームの範囲で内容が送信されるときに発生
onreset：フォームの範囲で内容が初期化さドゥェトウルときに発生
onselect：テキストフィールド、テキストエリアのテキストが選択ドゥェルテ発生
onchange：フォームコントロールの内容が変更された後、フォーカスが解除されたときに発生
イベントハンドラ属性アクセシビリティ
キーボード、マウスの動きのターゲットの属性を使用している場合アクセシビリティ低下させないために、キーボード、マウスの動きのターゲット属性を一緒に指定してくれる。
ondblclick属性やマウスカーソルに依存する属性は、代替キーボードのプロパティがないため、指定を避ける。
フレームの挿入
フレームは、文書の他の文書を挿入する機能をする。 （使用を推奨していない）
フレームを使用している場合は、文書定義（DTD）にFrameset文書型を宣言する。（XHTMLでは使用できません）
iframe要素を指定する場合と、使用時titleにタイトルを指定する。
他の文書の挿入は、iframe要素のほかに、object要素でも実装が可能である。
object挿入
オブジェクト要素（インライン要素である。）
画像：img要素
<object data="/images/mg.gif" tyle="image/gif"title="イミジ">内容部</ object>
他の記事：iframe
object要素の子要素による階層化：object要素には子要素（object）を入れることができる。
優先されたオブジェクトの順に階層的に指定が可能です。
特定のブラウザやデータ形式に対応していないブラウザは代替できない。
<object data="/movie/overview.mpg" type="video/mpeg"title="ビディオオブジェクトゥ">
<object data="/image/overview.gif" type="image/gif"title="イミジオブジェクトゥ">
内容部。、..
</ object>
</ object>
第5章リディジャイン - Web標準にスムーズな移行
XHTML1.0とXHTML1.1の違い
文書型宣言と違い
XHTML 1.0：html4.01ようにStrict、Transitional、Frameset 3種類の使用可能
XHTML 1.1：Strictに対応する形式のみ使用可能
html要素の言語コードを指定する方法
XHTML 1.0：lang属性、xml：lang属性で言語コード支障
XHTML 1.1：xml：lang属性のみを指定
name属性とid属性を指定する方法の違い
XHTML 1.0：name属性とid属性でフラグメント識別子を指定
XHTML 1.1：name属性を廃止してid属性を指定
htmlからxhtmlに切り替え
XML宣言
XHTMLでは、文書の先頭にXML宣言をする：<？xml version = "1.0" encoding = "euc-kr"？>
versionはxmlバージョン、encodingは文字コードセット
XML名前空間、言語コード
XHTML 1.0
<html xmlns=http://www.w3.org/1999/xhtml xml:lang="ko" lang="ko">
XHTML 1.1
<html xmlns=http://www.w3.org/1999/xhtml xml:lang="ko">
MIMEタイプ
XHTMLでは、<meta http-equiv=""/>指定
サーバーがHTTPヘッダーなどの情報を追加的または優先的に出力するように指定
XHTML1.1では使用を認めていない。
script、style要素
script、style要素の内容は、 "＃CDATA"であり、注釈を処理ですが、XHTMLでの内容は、 "＃PCDATA"に変更されていて、技術外す必要性がある。
/ / <！[CDATA [
内容部
/ /]]>
要素と属性は必ず小文字で作成する
XHTMLでは、大文字と小文字を区別し、また、要素と属性は小文字で定義されているので、小文字で定義
属性値は必ず引用符で囲む
空の要素の試食
HTMLは空の要素に終了タグが必要なく、特に記述していアンアトが（ex <br>）、XHTMLでは、タグジョンピョを表示しなければならない（ex <br/>）
タグは省略できない
XHTMLでは、開始タグと終了タグを必ず省略せずに記述しなければならない。
タグは、整形式（well-formed）で技術
整形式：開始タグと終了タグの位置が厳しく、XMLの書式に準拠ヒン香っ;ア
属性は、薬酒ことができない（ex）<input type="radio" checked (x)>）
空白文字は、スペース、タブ、ラインフィード、キャリッジリターンの四つの空白文字で考慮される
name属性とid属性
HTMLでは、各要素に対してname属性とid属性の役割を混用したが、XHTML1.0は、form、img要素のname属性が廃止されXHTML1.1 a、map要素のname属性が廃止される
そのほかの主な違い
属性値の最初の文字と最後の空白文字は無視するまた、属性値の中に連続した二つ以上の空白文字は一つの空白文字として扱わ
a要素にa要素を含むことができない
pre要素にimg、object、big、small、sub、sup各要素を含むことができ
button要素に、input、select、textarea、label、button、form、fildset、iframe、isindexの各要素を含むことができ
label要素に別のlabel要素を含むことができない
form要素にform要素を含めることができない。
XHTML廃止要素の代替
applet要素 - > object要素で代替
basefont要素 - > CSS的のfont-size要素で代替
center要素 - >インライン要素、テキストに対して親要素のブロックレベル要素にtext-alignプロパティにcenterに置き換え
dir要素 - > ul要素に置き換え
font要素 - > CSSのcolor、font-size、font-familyに代替
menu要素 - > ul要素に置き換え
XHTML廃止属性の代替
lang属性 - > xml：lang属性に置き換え（1.0では二つのプロパティを使用、1.1でのxml：lang属性のみを使用）
第6章クロスブラウザレイアウト - ブラウザを差別していないレイアウトテクニック
ブラウザの実装と互換性
CSS基本ルール
IE 5/5.5/6、で子セレクタ ">"は、隣接セレクタ "+"、属性セレクタを無視
IE 5、Opera7でクラスセレクタの大文字、小文字は区別しません。
IE 5、Opera7でIDセレクタの大、小文字を区別しない。
ブラウザの独自拡張（Web標準を守らないように実装したブラウザ）
下位互換性と上位互換性
下位互換性：既存の、過去に作られたブラウザと自分のコードが問題なく表現されて動作すること
上位互換性：今後、将来に作成されるブラウザと自分のコードが問題なく表現されて動作すること
過渡期の上位互換性
正しいXHTMLを利用したマークアップを使用
正しいCSSを利用したフォント/テキスト、色、余白などの制御
レイアウトを構成するために、テーブル要素を少し使用
ネストされたテーブルx、CSSで同じ効果グヒャン
厳しい上位互換性
正しいXHTML 1.0 StrictやTransitionalマークアップの使用
正しいCSSレイアウトの使用
視覚表現の構造を分離
構造の強調、視覚表現のための手法をマークアップに使用していないか、なるべく使用しない。
文書形式の切り替えと表現方法
二種類の表現方法をガチュンブラウザ
標準的な方法（Standards）：Web標準に準拠表現方法
互換方式（quirks）：下位互換性を優先表現した方式
三種類の表現方法を備えたブラウザ
標準的な方法（Standards）：Web標準に準拠表現方法
ほぼ標準的な方法（almost standards）：基本的に、Web標準に準拠して表現しますが、表または中央揃えなど、一部の表現では、下位互換性を維持した表現方法。
互換方式（quirks）：下位互換性を優先表現した方式
CSSハック
非標準、しかし核を介して一部のブラウザを除外して、CSSを適用する方法
スター核：セレクタの前にhtmlを付けてIE4-6などのスタイルが適用され、他のブラウザには適用されません。
アンダースコア核：属性最も前部にアンダースコア（_）を付ける。 IE 4-6にスタイルが適用され、他のブラウザでは適用されません
外部スタイルシートを作成する
ブラウザの初期化：セレクタの前に "*"を付けて初期のスタイルを指定（* {プロパティの変更}）
属性を指定する手順
表現や位置などの可視化に関する属性
マージンやパディング、ラインなどボックスモデルに関する属性
背景や色に関する属性
フォントとテキストに関するプロパティ
生成内容に関する属性....の順だ。
レイアウト技法
文書本体
中央揃え
ブロック要素：左、右マージンにauto値を指定
インライン要素：text-align要素にcenter値を指定
画像の代替手法
img要素使用時の検索が不可能となり、メンテナンス面でのテキストよりも効率が落ちる。（なるべくイメージ要素を使用するには、避けてください。）
displayを用いた画像の代替手法
ex）<div>
<p> 1 / </ p>
</ div>
.... divにイメージを加えp要素は隠しとしてCSSの適用がされると画像を負わせたdivが表現されてそうでない場合はp要素が表現される。
text-indentプロパティ
text-indentプロパティを使用してロゴの表現領域にリンクを設定（余白を減らすためにa要素にblock指定、ロゴの幅と長さに匹敵テキスト属性なしで、ボーダーマージン、パディング属性0を指定するとすっきりとしたリンクが表示されたロゴを作ることができる。）
多段レイアウト
floatを使ったレイアウト構成
ブロック要素にfloat続々とを利用してレイアウトを展開する方法
ex）中央揃えされたレイアウト展開
body {
text-align：center;
}
div＃header {
width：400px;
margin-right：auto;
margin-left：auto;
}
div＃footer {
clear：both ;/ /フロートしなくても両脇に付けられるスペースがないので下に降りていく。
width：400px;
margin-right：auto;
margin-left：auto;
}
div＃conteiner {
width：400px;
margin-right：auto;
margin-left：auto;
}
div＃content {
width：400px;
float：right
}
div＃sidebar {
width：120px;
float：left;
}
ポジショニングを利用したレイアウト展開
絶対位置と相対位置の組み合わせ
一つのボックス要素を絶対位置に配置して、[貼り質の要素を相対的に位置させて実装
絶対位置とフロートの組み合わせ
一つのボックス要素を絶対位置に配置して、[貼り質の要素をfloatプロパティを利用して、目的の場所に（左、右）の実装
絶対位置とマージンの組み合わせ
一つのボックス要素を絶対位置に配置して、[貼り質の要素を左、右marginプロパティを使用して配置します。
fixed：非標準なので、使用を推奨しません
第7章さまざまなユーザーのための設計
アクセシビリティ
アクセシビリティを守らなければならない理由
0 件のコメント:
コメントを投稿