ホームページ制作ガイド
XHTML1.0
HTML4.01で使用可能な要素や属性をそのまま利用して、XMLの規格に従って定義し直したもの。基本的にはHTML4.01と同じように記述することができる。XMLの文書ともなる。
関連事項:
SGML(Standard Generalized Markup Language)=国際標準規格(ISO8879)
関連する単語
Standard,Generalized,Markup,Language
XML(eXtensible Markup Language)=SGMLの不必要な機能を取り除き、web上で必要となる機能を追加した新しい規格。
関連する単語
eXtensible,Markup,Language,SGML,web
SVG,SMIL,MathML,RDF等=XML言語
関連する単語
S,V,G,I,Math,R,D,F,M,L,XML
XML宣言
XMLのバージョンと使用する文字コードを宣言する。文書の先頭に配置される。
XHTMLの制約
要素名、属性名は必ず小文字で書く。タブは省略できない。属性値は必ず引用符で囲う。属性は最小化できない。識別子にはname属性ではなくid属性を使う。XHTML文書は必ずウェルフォームドにする。
XHTMLのモジュール化
XHTML1.0は、その内容を基にして、関連する機能別のモジュール(テキスト、リスト、テーブル、画像など)に分割されている。「XHTMLのモジュール化(Modularization of XHTML)」とは、それに加えて、新しいモジュールの定義方法や、それらを組み合わせて新しい文書型を定義する方法なども定義した仕様である。これにより、多種多様な環境に合わせた相互運用性の高い文書型を比較的簡単に作成できるようになる。
XHTML1.1
XHTML1.0のモジュールを組み合わせてXHTML1.0を再現し、それにルビのモジュールを追加したもの。
XHTML Basic
携帯電話、PDA、テレビなどで使われることを想定し、必要最小限のモジュールを組み合わせて作られた文書型。
XHTMLのモジュール
モジュール
構造、テキスト、ハイパーテキスト、リスト、メタ情報、関連ファイル、基準URI、表示、編集、ルビ、双方向テキスト、基本フォーム、フォーム、基本テーブル、テーブル、画像、クライアントサイドイメージ・マップ、サーバーサイド・イメージマップ、オブジェクト、アプレット、スクリプト、スタイルシート、フレーム、インライン・フレーム、レガシー、target属性、name属性、style属性、イベント属性
TITLE
文書のタイトルを記述する要素。head要素内に配置される。ここで記述した名前(タイトル)は、多くのブラウザでウインドウのタイトルバーに表示される。
META
メタデータ(文書に関する情報)を指定するための要素。head要素内に記述する。
property
content,name,http-equiv,scheme
http-equiv
メタデータをHTTPヘッダとしてサーバーから送信させたい場合に、name属性の代わりに使用する。→HTTPヘッダ(HTTP response message headers)値はHTTPヘッダ用プロパティ名。
scheme
値は値の形式。プロパティの値を正しく解釈するための補助的な情報として、値の形式を指定する。
HYPER-LINK in the Page
ページ内をハイパーリンクを使って移動する方法。
<a name="任意の文字列">任意の文字列や画像</a>
↑ ↑ ↑
以上のソースコードをハイパーリンク先となる文書ソース内の任意の箇所に貼り付ける。
以下のソースコードをハイパーリンク元となる文書ソース内の任意の箇所に貼り付ける。
↓ ↓ ↓ ↓ ↓
< a href="#<a name="任意の文字列">任意の文字列や画像</a>のname属性に指定した値(文字列)">任意の文字列や画像</a>
完了。
ruby
ルビ。
rb要素、rt要素、rp要素、rbc要素、rtc要素はruby要素の開始タグから終了タグの間に含まれることになる。
RUBY (ルビ)
ルビには、単一ルビと複合ルビの二種類がある。
rb
ruby base
ルビを振る基底の文字や文字列をmarkupする要素。
rt
ruby text
ルビとなる文字や文字列をmarkupする要素。
rp
ruby parenthesis
ルビとなる文字や文字列をくくる括弧をmarkupする要素。括弧でとじられたルビとなる文字や文字列はルビの基底部分の隣に現れる。
rbc
ruby base container
ルビを振る基底の文字や文字列が複数になる場合、グループ化する。
rtc
ruby text container
ルビが複合ルビになる場合、グループ化する。
HTML
HyperTextMarkupLanguage
WEB文書の記述言語の一つ。SGMLによって作られた。おもとしてWEB文書の構造を記述する言語。デザインもこの言語によって表現していた。
CSS等スタイルシート言語がデザインを担当することになる。デザインを整えるための要素や属性も残されている。
KEYWORD(Oneparts)
HTML4.01 CSS1 HTML4.0 DTD XHTML SGML
DTD
DocumentTypeDefinition
正しい文法や構文スタイルを厳密に定義したもの。HTMLのバージョンごとに存在する。そのバージョンのHTMLで使用可能な要素や属性、
また要素の配置に関した用法などがまとめられている。
HTML4.01には三種類のDTDがある。
DTD of HTML4.01
Strict DTD
Transitional DTD
Frameset DTD
KEYWORD
DOCTYPE宣言
Strict DTD
理想的なHTML4.01を作成するためのDTD。非推奨の要素や属性、フレームは使用できない。
厳密度…高 フレームの使用…不可 非推奨要素の使用…不可 非推奨属性の使用…不可
要素の配置の自由度…低
Transitional DTD
非推奨の要素や属性を使用できる。フレームは使用できない。
厳密度…中 フレームの使用…不可 非推奨要素の使用…可 非推奨属性の使用…可
要素の配置の自由度…高
Frameset DTD
非推奨の要素や属性を使用できる。フレーム関連の要素を使用できる。
厳密度…低 フレーム関連の要素の使用…可 非推奨要素の使用…可 非推奨属性の使用…可
要素の配置の自由度…高
SUP
上付き文字(べき等)をmarkupする要素。
X2
HEAD
heading
HTML開始タグの直下に存在する要素。この要素の開始タグから終了タグの間に、TITLE要素、META要素、LINK要素などが配される。
STYLE要素やSCRIPT要素を配することもできる。
BODY
HEAD要素終了タグの直下に存在する要素。文書本体。この開始タグから終了タグの間に、DIV要素、SPAN要素、P要素などが配される。
ブロックレベル要素
ブロック(ひとつのまとまった要素)としてあらわされる要素。
address blockquote center div dl
fieldset form h1~h6 hr noframes
ol p pre table ul
インライン要素
おもとしてブロックレベル要素の中で使用される要素。
a abbr acronym applet b
basefont big br button cite
code dfn em font i
iframe img input kbd label
object q ruby s samp
select small span strike strong
sub sup textarea tt u
置換要素
要素自体がimg objectなどによって置き換えられてあらわされる要素。
img input object select textarea
汎用属性
id
class
lang
title
style
dir
id
固有の名前。要素に対して固有の名前(識別子)を付けるための属性。一つの文書中の複数の要素に対して同じ名前をつけることはできない。
大文字と小文字が区別される。
class
分類名。要素に対して分類上の名前をつけるための属性。同一の文書中で複数の要素が同じクラス名を持つことができる。
大文字と小文字が区別される。
lang
言語コード。要素の内容やそれに関連する属性値などの言語を示すための属性。
title
補足情報。補足的な情報を要素に対し与える。与えられた情報は要素にマウスカーソルを合わせるとポップアップして表示される。
style
スタイルシート。スタイルシートを属性値として直接記述できる。XHTML1.1では非推奨の属性。XHTML Basicでは使用不可。
dir
文字表記の方向。UNICODEによって文字表記の方向が決められていない場合に、文字表記の方向を指定する。
ltr 左から右へ
rtl 右から左へ
XHTML Basicでは使用不可。
sub
下付き文字をmarkupする要素。
CO2
MIMEタイプ
「text/html」
「text/css」
「text/javascript」
「image/gif」
「video/mpeg」等。
URI
HTML3.2までの仕様では「URL(Uniform Resource Locator)」という用語が使用されていた。現在では「URI(Uniform Resource Identifier)」という用語が使用されている。
URL(OLD)
リソースの場所を示す。
URN(OLD)
リソースの名前を示す。
URL,URN(NOW)
2008/6/22NOW.「http:」はURLに属し、「isbn:」はURNに属するといったような階層構造になっていると考えられていたが、その後、「http:」や「isbn:」などのさまざまなスキームをURLやURNとして分類する必要はないと考えられるようになり、それらはいずれもURIスキームのひとつとしてあらわされるようになった。
URLという言葉は非公式の概念という位置付けとなっている。
keywords
URL URN 「http:」 「isbn:」 階層構造 スキーム URIスキーム
リンクタイプ
別文書の属性や、別文書から見た文書の属性を示す場合に指定する。
リンクタイプ 意味
aiternate 別バージョンの文書
stylesheet 外部スタイルシート
start 最初の文書
next 次の文書
prev 前の文書
contents 目次
index 索引
glossary 用語集
copyright 著作権に関して書かれた文書
chapter 章
section 節
subsection 項
appendix 付録
bookmark 文書内のhyper-link先
メディアタイプ
media属性を使用する。メディアを指定する場合に使用する。
メディアタイプ 意味
all すべてのメディア
screen 一般のコンピュータの画面
tty 文字幅が固定の機器(テレタイプ、端末、ポータブル機器等)
tv テレビ
projection プロジェクタ
handheld 携帯用機器
print プリンタ
braille 点字で出力を行うもの(点字ディスプレイ等)
aural 音声による出力(スピーチ・シンセサイザ等)
FORM
FORM
property="value":
action="URL"
method="HTTPメソッド"
enctype="MIMEタイプ"
accept-charset="文字コード"
accept="MIMEタイプ"
name="名前"
target="フレーム名"
textarea
property="value":
rows="行数"
cols="幅"
name="名前"
button
property="value"
name="名前"
input(empty element)
property="value":
type="形式"
形式:
{
text,password,checkbox,radio,
submit,reset,button,
image,file,hidden
}
name="名前"
value="値"
size="幅"
type="形式"
形式:
{
submit,reset,button
}
value="値"
select
property="value"
name="名前"
size="行数"
multiple/multiple="multiple"
maxlength ="最大文字数"
checkd/checkd="checkd"
disabled/disabled="disabled"
readonly/readonly="readonly"
accept="MIMEタイプ"
tabindex="tab移動順"
accesskey="ショートカットキー"
src="URL"
alt="代替テキスト"
usemap="URL"
ismap
align="文字との位置関係"
文字との位置関係:
{
top,middle,bottom,left,right
}
property
disabled/disabled="disabled"
readonly/readonly="readonly"
tabindex="タブ移動順"
accesskey="ショートカットキー"
汎用property
class,id,title,style,lang,dir,
xml:lang
option
property="value"
selected/selected="selected"
value="値"
lavel="選択肢"
optgroup
property="value"
lavel="選択肢"
lavel
property="value"
for="部品のID"
fieldset
legend
property="value"
align="位置"
位置:
{
top,bottom,left,right
}
isindex(empty element)
property="value"
prompt="ラベル"
SRC
property。SRC="外部ファイルのURL"
P
blocklevel eliement。PARAGRAPH
A
HYPER-LINK設定用element。HYPER-LINKの開始点と終了点を同時に設定できる。
href
Aのproperty。href="リンク先のURL"
HTML
最上位element。
TITLE
header内element。TITLEタグ内に書き込んだ内容がTITLE BARに反映される。
H1
重要度=1等
H2
重要度=2等
H3
重要度=3等
H4
重要度=4等
H5
重要度=5等
H6
重要度=6等
META
empty element。header内element。メタ情報を記述する。
< META property="value" property="value">
NAME
property
< META name="value(property名)" property="value">
keywords
value
< META name="keywords" property="任意のkeyword,任意のkeyword,任意のkeyword,…">
description
value
< META name="description" property="任意のdescription">
content
property
< META name="keywords" content="任意のkeyword,任意のkeyword,任意のkeyword,…">
< META name="description" content="任意のdescription">
HEAD
準最上位element
TITLE elementやMETA elementを記述する。
coords
property
imagemapのproperty。imagemap適用範囲の領域座標を指定する。
alt
property
画像の代替テキスト。画像の描写を記述する。
q
inline eliment
引用文をmarkupする。
HR
empty element
サイズや色を変更できる。
LI
リスト項目の各項目をmarkupする。
blockquote
block level element
引用文をmarkupする。
align
property
3~4(3~8)のvalueを持つ。
FONT
サイズ、色、書体、字体を変更できる。
COLOR
property
前景色を変更できる。
CENTER
alignの一つのvalueと同じ効果を持つelement。
BR
empty element
BODY
本体。
HTML OUTLINE
DIV
blocklevel element
主項目=グループ化
SPAN
inline element
主項目=グループ化
em
強調。構造を記述するelement。
STRONG
より強調。構造を記述するelement。
b
主項目=font weight bold体
cite
出典、参照先をmarkupする。
img
empty element
主項目=画像
< img src="画像ファイルのURL" title="画像のタイトル" alt="任意のalt">
big
主項目=font size 大
small
主項目=font size 小
width
property
主項目=size X座標の範囲を指定する。
height
property
主項目=size Y座標の範囲を指定する。
left
value
主項目=横 alignのvalue。 関連キーワード=左
right
value
主項目=横 alignのvalue。 関連キーワード=右
justify
value
主項目=横 alignのvalue。 関連キーワード=両端
middle
value
主項目=縦 alignのvalue。 関連キーワード=中段
top
value
主項目=縦 alignのvalue。 関連キーワード=上段
bottom
value
主項目=縦 alignのvalue。 関連キーワード=下段
abbr
略語をmarkupするelement。
acronym
頭字語をmarkupするelement。
http-equiv
property
META elementのproperty。
< META http-equiv="Content-Style-Type" content="css">
< META http-equiv="Content-Script-Type" content="javascript">
robots
value(property名)
< META name="robots" content="value">
all
value
< META name="robots" content="all">
LINK
empty element header内element
文書と別の文書を関連付けるelement。
< LINK property="value" href="別の文書のURL">
rel
property
主体=自文書
< LINK rel="value" href="別の文書のURL">
rev
property
主体=他文書
< LINK rev="value" href="別の文書のURL">
prev
value
rel,revのvalue。前の文書を表わすvalue。
< LINK rel="prev" href="前の文書のURL">
< LINK rev="prev" href="前の文書のURL">
next
value
rel,revのvalue。次の文書を表わすvalue。
< LINK rel="prev" href="次の文書のURL">
< LINK rev="prev" href="次の文書のURL">
style
< style type="text/css">~</style>
script
< script type="text/javascript">~</script>
< script type="text/javascript" src="外部スクリプトファイルのURL"></script>
marquee
主項目=テキスト 効果=SCROLL
テーブル
TABLE
property:
summary
width
border
frame
{
value:
void.adove.below.hsides.lhs.rhs.vsides.
box.border
}
rules
{
value:
none.groups.rows.cols.all
bgcolor
caption
表タイトル・説明文
property:
align
{
value:
top.bottom.left.right
}
TR
横行
}
cellspacing
cellpadding
align
{
value:
left.right.center
}
colgroup
縦列のグループ化
property:
span
width
TH
ヘッダセル
TD
データセル
thead
表ヘッダ
tfoot
表フッタ
tbody
表本体
col(empty element)
縦列の属性値共有
property:
span
width
property
summary
element:TABLE
サマリー情報
property
rowspan
element:TH,TD
下方向の連結セル数
colspan
element:TH,TD
右方向の連結セル数
abbr
element:TH,TD
セルの内容を短くしたもの
axis
element:TH,TD
セルの分類名
headers
element:TH,TD
関連するヘッダセルのid
scope
element:TH,TD
ヘッダセルの対象となるデータセルの範囲
value:
{
row.col.rowgroup..colgroup
}