■学習目標
・Web標準を理解する
・シンプルなソースを書くために、XHTMLマークアップを理解する
■講義内容
0.はじめに
→学習の目的
1.基本概念について
1-1.XHTMLとは、何か。
→XHTMLとは、Extensible Hypertext Markup Languageのこと。
→HTMLに代わって、Webページを記述するために開発されたマークアップ言語のこと。
→XHTMLは、XML言語を基にXMLの技術の厳格性が求められる。
→XHTML：見栄えを指定するタグは利用しない。
→XHTML：タグ、属性は小文字、[""]で表記する。
→XHTML：タグの省略は禁止する。
→XHTML：空要素のタグの最後には[/]を追加する。
→XHTML：ソース表記にて、コンテンツの確認がしやすい。
→XHTML：SEOへの効果が高い。
1-2.CSS（Cascading Style Sheet）とは何か。
→文字の装飾（色・サイズ・装飾・行間など）をしたり、要素のレイアウトなどを指定するための技術。
→視覚的記述を表記するための言語。
→別紙にCSSでスタイリングすることで、単純化され、デザインの再調整が容易になる。
1-3.Web標準とは何か。
→Web標準 ＝ マークアップ（文書構造） ＋ スタイルシート（デザイン）のこと。
→マークアップ ＝ 言語・骨組。
→スタイルシート ＝ 内装・外装
→[!DOCTYPE]タグ：どの種類のマークアップ言語で記載するかどうかを宣言する必要がある。
→[meta]タグ：charasetで、文字コードを指定し、指定した文字コードで保存する。【文字化け対策】
1-4.マークアップ言語とは何か。
→マークアップ言語の種類は、複数ある。
→HTML4.01 Strict/Transitional、XHTML1.0 Strict/Transitional、HTML5.0の5種類がメジャー。
→StrictとTransitionalは、コーディングの制約基準が違う。
→Strictは厳しく、W3Cが推奨していない要素・属性、iframe、ターゲット属性が使えない。
→Transitionalを宣言しておいて、Strictの内容で記載していくのがベスト。
→Web標準による基本的な要素は2種類ある。
A.ブロック要素･･･段落に対してマークアップする。改行を含む。
[h1] [p] [ul] [ol] [dl] [table] [form] [div]
B.インライン要素･･･テキストに対してマークアップする。改行を含まない。
[a] [img /] [em] [strong] [br /] [address] [span]
→マークアップ言語ではいろんな種類があるが、基本的にはバグを回避するため、基本タグのみを利用する。
→CSSの組み込み方法は3種類。
A.外部CSSファイルにリンクする。
B.[head]タグに記述する。
C.タグのスタイル属性に記載する。（docomo携帯はCのみに対応）
2.実習
→原稿テキストに即したXHTMLタグのつけ方を学ぶ。
2-1.「見出し[hr]」「段落[p]」「箇条書き[ul][li][ol]」タグの使い方
→1.リストの決定（基本的には、[li]タグを利用。）
→2.見出しを決定[h1][h2][h3]タグ
→3.上記以外の文書にタグ付け[p]タグ
→4.その他の特殊要素を利用[table][dl][form]タグ
2-2.「リンク[a href]」タグの使い方
→アンカー設定にはid属性とname属性を使う必要がある。
本来ならば、ユニークなid属性を利用する。
但し、以前利用されていたname属性に対応したhtmlの場合もあるので、name属性を利用しておく必要がある。
2-3.文字サイズの扱い方
→「font-size」は、キーワード（small･･･）で指定すること。
○【xx-small／x-small／small／medium／large／x-large／xx-large／%／em】
→絶対サイズで指定すると、IE6・7でフォントサイズのコントロールができなくなる。
×【ptポイント／inインチ／pcパイカ／mmミリメートル／cmセンチ／pxピクセル…】
2-4.バリデーションチェック
http://validator.w3.org/
2-5.CSSの基本構造
------------------------------------------------------------
/* CSSのコメントアウト */
【どこの】{
【何を】:【どうする】;→プロパティ(～;)を一行として利用する場合も多い！
}
------------------------------------------------------------
2－6.代表的なプロパティと値
■単位
相対単位：%／em(全角1文字分の高さ)
絶対単位：pt(ポイント)／mm(ミリメートル)／cm(センチ)･･･
■ボックスの大きさ
widthボックス内容領域の幅数値
heightボックス内容領域の高さ数値
■余白(外側)
marginマージン(ボックス外側の余白)の一括指定
margin-top上マージンの指定数値
margin-bottom下マージンの指定数値
margin-left左マージンの指定数値
margin-right右マージンの指定数値
■余白(内側)
paddingパディング(ボックス内側の余白)の一括指定
padding-top上パディングの指定数値
padding-bottom下パディングの指定数値
padding-left左パディングの指定数値
padding-right右パディングの指定数値
■線
border線スタイルの一括指定
border-color線色の一括指定色コード／色名
border-style線の種類の一括指定solid(実線)／dotted(点線)／dashed(破線)･･･
border-width線の太さの一括指定数値
■背景
background背景関連のプロパティの一括指定
background-color背景色色コード、色名
background-image背景画像url(~ファイルパス~)
background-position背景画像の初期位置左右方向(left／center／right)
上下方向(top／center／bottom)
background-repeat背景画像の繰り返しrepeat(タイリング)、norepeat(繰り返しなし)
repeat-x(横方向)、repeat-y(縦方向)
■文字関連
fontフォント関連のプロパティの一括指定
font-familyフォント種類の指定
font-sizeフォントの大きさ【xx-small／x-small／small／medium／large／x-large／xx-large】
font-weightフォントの太さ【normal／bold】
font-styleフォントのスタイル【normal／italic】
text-decoration文字装飾【none／underline】
line-height行間【数値】
text-align行揃え【left／center／right】
letter-spacing文字間
■リストのマーカー
list-style-typenone(なし)／disc(黒丸)／circle(白丸)／square(四角)／decimal(アラビア数字)
3.終わりに
→アンケート実施
＜以 上＞
・Web標準を理解する
・シンプルなソースを書くために、XHTMLマークアップを理解する
■講義内容
0.はじめに
→学習の目的
1.基本概念について
1-1.XHTMLとは、何か。
→XHTMLとは、Extensible Hypertext Markup Languageのこと。
→HTMLに代わって、Webページを記述するために開発されたマークアップ言語のこと。
→XHTMLは、XML言語を基にXMLの技術の厳格性が求められる。
→XHTML：見栄えを指定するタグは利用しない。
→XHTML：タグ、属性は小文字、[""]で表記する。
→XHTML：タグの省略は禁止する。
→XHTML：空要素のタグの最後には[/]を追加する。
→XHTML：ソース表記にて、コンテンツの確認がしやすい。
→XHTML：SEOへの効果が高い。
1-2.CSS（Cascading Style Sheet）とは何か。
→文字の装飾（色・サイズ・装飾・行間など）をしたり、要素のレイアウトなどを指定するための技術。
→視覚的記述を表記するための言語。
→別紙にCSSでスタイリングすることで、単純化され、デザインの再調整が容易になる。
1-3.Web標準とは何か。
→Web標準 ＝ マークアップ（文書構造） ＋ スタイルシート（デザイン）のこと。
→マークアップ ＝ 言語・骨組。
→スタイルシート ＝ 内装・外装
→[!DOCTYPE]タグ：どの種類のマークアップ言語で記載するかどうかを宣言する必要がある。
→[meta]タグ：charasetで、文字コードを指定し、指定した文字コードで保存する。【文字化け対策】
1-4.マークアップ言語とは何か。
→マークアップ言語の種類は、複数ある。
→HTML4.01 Strict/Transitional、XHTML1.0 Strict/Transitional、HTML5.0の5種類がメジャー。
→StrictとTransitionalは、コーディングの制約基準が違う。
→Strictは厳しく、W3Cが推奨していない要素・属性、iframe、ターゲット属性が使えない。
→Transitionalを宣言しておいて、Strictの内容で記載していくのがベスト。
→Web標準による基本的な要素は2種類ある。
A.ブロック要素･･･段落に対してマークアップする。改行を含む。
[h1] [p] [ul] [ol] [dl] [table] [form] [div]
B.インライン要素･･･テキストに対してマークアップする。改行を含まない。
[a] [img /] [em] [strong] [br /] [address] [span]
→マークアップ言語ではいろんな種類があるが、基本的にはバグを回避するため、基本タグのみを利用する。
→CSSの組み込み方法は3種類。
A.外部CSSファイルにリンクする。
B.[head]タグに記述する。
C.タグのスタイル属性に記載する。（docomo携帯はCのみに対応）
2.実習
→原稿テキストに即したXHTMLタグのつけ方を学ぶ。
2-1.「見出し[hr]」「段落[p]」「箇条書き[ul][li][ol]」タグの使い方
→1.リストの決定（基本的には、[li]タグを利用。）
→2.見出しを決定[h1][h2][h3]タグ
→3.上記以外の文書にタグ付け[p]タグ
→4.その他の特殊要素を利用[table][dl][form]タグ
2-2.「リンク[a href]」タグの使い方
→アンカー設定にはid属性とname属性を使う必要がある。
本来ならば、ユニークなid属性を利用する。
但し、以前利用されていたname属性に対応したhtmlの場合もあるので、name属性を利用しておく必要がある。
2-3.文字サイズの扱い方
→「font-size」は、キーワード（small･･･）で指定すること。
○【xx-small／x-small／small／medium／large／x-large／xx-large／%／em】
→絶対サイズで指定すると、IE6・7でフォントサイズのコントロールができなくなる。
×【ptポイント／inインチ／pcパイカ／mmミリメートル／cmセンチ／pxピクセル…】
2-4.バリデーションチェック
http://validator.w3.org/
2-5.CSSの基本構造
------------------------------------------------------------
/* CSSのコメントアウト */
【どこの】{
【何を】:【どうする】;→プロパティ(～;)を一行として利用する場合も多い！
}
------------------------------------------------------------
2－6.代表的なプロパティと値
■単位
相対単位：%／em(全角1文字分の高さ)
絶対単位：pt(ポイント)／mm(ミリメートル)／cm(センチ)･･･
■ボックスの大きさ
widthボックス内容領域の幅数値
heightボックス内容領域の高さ数値
■余白(外側)
marginマージン(ボックス外側の余白)の一括指定
margin-top上マージンの指定数値
margin-bottom下マージンの指定数値
margin-left左マージンの指定数値
margin-right右マージンの指定数値
■余白(内側)
paddingパディング(ボックス内側の余白)の一括指定
padding-top上パディングの指定数値
padding-bottom下パディングの指定数値
padding-left左パディングの指定数値
padding-right右パディングの指定数値
■線
border線スタイルの一括指定
border-color線色の一括指定色コード／色名
border-style線の種類の一括指定solid(実線)／dotted(点線)／dashed(破線)･･･
border-width線の太さの一括指定数値
■背景
background背景関連のプロパティの一括指定
background-color背景色色コード、色名
background-image背景画像url(~ファイルパス~)
background-position背景画像の初期位置左右方向(left／center／right)
上下方向(top／center／bottom)
background-repeat背景画像の繰り返しrepeat(タイリング)、norepeat(繰り返しなし)
repeat-x(横方向)、repeat-y(縦方向)
■文字関連
fontフォント関連のプロパティの一括指定
font-familyフォント種類の指定
font-sizeフォントの大きさ【xx-small／x-small／small／medium／large／x-large／xx-large】
font-weightフォントの太さ【normal／bold】
font-styleフォントのスタイル【normal／italic】
text-decoration文字装飾【none／underline】
line-height行間【数値】
text-align行揃え【left／center／right】
letter-spacing文字間
■リストのマーカー
list-style-typenone(なし)／disc(黒丸)／circle(白丸)／square(四角)／decimal(アラビア数字)
3.終わりに
→アンケート実施
＜以 上＞