第２章 HTML プログラミング
2.3 基本的なタグパラメータの設定
HTML 構文に対して設定される主なパラメータの設定値（主な項目の概要のみ）は以下のとおりです。
属性 主な設定値 意味
alink “#ffffff”,”red”,”yellow”,…… リックテキストをクリックしてい るときのカラーの値、又はカラー名 の設定
align “left”,”center”,”right”
“top”,”middle”,”center”,”bottom”
,”texttop”,”absmiddle”,”baseline”,
“absbottom”
並びの設定
autostart “true”,”false” 自動再生可否の設定
alt “xxxxxxx” 画像が見つからない場合に、画像の
代わりに表示する文字列の設定 表示された画像を上にカーソルを 置いた場合も表示されます。
accesskey “x” ハイパーリンク操作での、
“Alt+x”で起動するコードの設定
abbr “xxx” テーブル表示における、ヘッダ情報
の簡略コードの設定
action “xxx” フォームデータ送信先の設定
background “xxxxx.gif”,"xxxxx.jpg",…… 背景に表示する画像の設定 behavior “scroll”,”slide”,”alternate” MARQUEE コマンドに対するパター
ンの設定
border “99” 境界線の太さの設定
bordercolorlight “#ffffff”,”カラー名“ 外枠の明るい線に対する設定 bordercolordark “#ffffff”,”カラー名“ 外枠の暗い線に対する設定
bgcolor “#ffffff”,”カラー名“ 背景色の設定
balance “-10000”～”10000” 音声左右バランスの設定
bordercolor “#ffffff”,”カラー名“ フレームボーダの色の設定
content “text/html;charset=shift_jis”,
“text/html;charset=EUC-JP”,
“text/html;charset=unicode”,
http-equiv=”content-type”と対 として使用され、当該ページが使用 する漢字コードを定義します。
“9;url=http://www.xxxxxxxx/yyyy.html” http-equiv=”refresh”と対とし て使用され、指定時間（９秒）後に 指定された URL に自動的に切り替 える構文です。
cols “99” 段数の設定、画面を横分割するサイ
ズの設定
入力欄の横幅の設定 color “#ffffff”,”red”,”yellow”,”black”,
“blue”,”brown”,”gray”,”pink”,…
カラーの値、又はカラー名の設定
cite “xxxxx” 引用元を示す URL の設定
clear “all”,”left”,”right” テキスト回り込み解除の設定
coods “xx,xx,xx,xx,xx,xx,,,,,,” リンクボタンの範囲の設定
cellspacing “99” セル同士の感覚の設定
cellpadding “99” セル内余白サイズの設定
colspan “99” セルの横方向連結の設定
class “xxxx” クラス名の設定
direction “left”,”right” スクロール方向の設定
dynsrc “xxxxx”
enctype “multipart/form-data”,
“application/x-www-form-urlencoded”,
“text/plain”
フォームデータ送信形式の設定
face “xxx,xxx,xxx” フォント（書体名）の設定
frame “box”,”border”,”void”,”hsides”,
“vsides”,”above”,”below”,”lhs”,
“rhs”
テーブルボーダーの個別設定
frameborder “0”,”1”,”yes”,”no” 境界線の表示有無の設定
framespacing “99” フレーム間の間隔の設定
href “url”
“tel:xxxx”,”mailto:xxxx”
リンク先の URL の設定
height “99” 高さの設定
hspace “99” 左右の余白数の設定
hidden “true”,”false” フラグインディケータ表示/非表示
の設定
headers “xxxxx” 対応するセルに対するヘッダ情報
を持つ別セルの ID の設定 lang “ja”,”en”,”fr”,”de”,”zh”
link “#ffffff”,”red”,”yellow”,…… リンクが設定された文字列のカラ
ーの値、又はカラー名の設定 leftmargin “99”
language “Javascript”
loop “99”,”inifinite”
“true”,”false”
繰り返し回数の設定 繰り返し再生可否の設定
lowsrc “xxxx.gif”,,,, 表示する仮画像の設定
marginwidth “99” 左右マージンの設定
marginheight “99” 上下マージンの設定
method “post”,”get” フォームデータの送信形式の設定
maxlength “999” 最大入力文字数の設定
name
nowrap セル内改行の禁止の設定
noresize フレームリサイズ禁止の設定
qutter “99” 段と段の間のスペースの設定
rel “next”,”prev”,”index”
rules “all”,”none”,”groups”,”rows”,
“cols”
テーブルの内罫線表示の設定
rawspan “99” セルの縦方向連結の設定
rows “99” 画面を横分割するサイズの設定
入力欄の縦幅の設定
size “1”～“７”、“-6”～”+6”,”99”
“999”
文字のサイズ、又は線の太さの設定 入力欄のサイズ
src “url” スクリプトファイルの定義
表示する画像の定義 サウンドファイルの定義
scrollamount “99” 移動距離間隔の設定
scrolldelay “99” テキスト移動遅延時間の設定
start “99”
“fileopen”,”mouseover”
リスト表示の最初の数値の設定 再生開始方法の定義
shape “rect”,”circle”,”poly” リンクボタンの形状の設定
span “99” 表のグループ化の設定
summary “xxxxxx” 表内容表記
scope “row”,”col”,”rowgroup”,
”colgroup”
ヘッダ情報影響範囲の設定
scrolling “yes”,”no”,”auto” スクロール有無の設定
style “font:xxxx”,”propertu:xxx”,,,, スタイル属性の設定
text “#ffffff”,”red”,”yellow”,…… カラーの値、又はカラー名の設定 topmargin “99”
type “text/javascript”,”text/css”
“disk”,”circle”,”square”
“A”,”a”,”I”,”i”,”1”
“holizontal”,”vertical”
“checkbox”,”radio”,”text”,
”file”,“hidden”,”submit”,
”reset”,”buttom”
“password”
言語の設定
リストに表示するマーカの設定 リストに表示するコードの設定 縦横スペースの設定
フォームオブジェクトの設定
入力に対するパスワードの設定
title “xxxxx” タイトルの設定
target “xxx”,”_self”,”_blank”,”_top”,
“_parent”
リンク先ターゲットの設定
“xxx”はウインド名
usemap “#xxxxx” イメージマップの設定
vlink “#ffffff”,”red”,”yellow”,…… リンク先がアクセス済みの文字列 のカラーの値、又はカラー名の設定
vspace “99” 上下の余白の設定
volume “-10000”～”0” 音量の設定
valign “top”,”middle”,”bottom”,
”baseline”
上下位置の設定
value “xxxxx” 入力欄に表示する規定値の設定
選択識別子（選択内容）の設定
width “99” 線の長さの設定
width “99” 幅の設定
wrap “hard”,”soft”,”off” 改行を設定します
2.4 スタイルシートの活用（CSS：CascadingStyleSheet）
スタイルシートとは、Web ページの「見栄え」を定義するもので、HTML 構文上で使用されるタグ毎に、
一括して同じ要素（色やサイズなど）を定義することができます。
このスタイルシートを使用すれば、ブラウザの文字サイズの変更（「表示」⇒「文字のサイズ」）などの
影響を受けない表示ができます。
このスタイルシートの定義方法には、外部ファイルを埋め込む方法、HTML タグ埋め込む方法、及び HTML ファイルの中で定義する方法の３種がある。
補足：
ブラウザの種類やバージョンによっては異なる動作をしたり、正常に動作しないものもある。
設定する要素は、”：”で要素のないよう定義、”；”で要素の定義の終了を表す。
例＞color：red；fonto-size：16pt
2.4.1 外部ファイルとして定義する方法
sample.css
HTML
別ファイルにスタイルを定義したファイルを作成しておき、HTML 本文で、そのスタイル を参照します。
2.4.2 HTML タグ埋め込む方法
HTML
タグ構文の中で、style 構文を使ったスタイル定義を行います。
H1{color:red;background-color:blue;font-size:20pt;}
H2{color:white;background-color:black;font-size:32pt;}
<HEAD>
<link rel="stylesheet" href="sample.css" type="text/css">
</HEAD>
<H1 style="font-size:20pt"> 20pt の文字列表示 </H1>
<SPAN style="font-size:20pt;color:blue">フォントサイズ２０で青色文 字</SPAN>
2.4.3 HTML ファイルの中で定義する方法
HTML
H1,H1 などのようなタグ名に対して、そのスタイルを定義します。
2.4.4 スタイルとして定義できる主な内容
対象 スタイル定義例 主な設定内容 意味
フォント color:red font-size:14pt font-variant:normal font-family:serif font-weight:bold font-style:normal text-decoration:none text-transform:none
blue,red,,,
14pt,large,small,,, normal,small-caps,,, MS 明朝,MS P ゴシック,,,,, bold,normal,,,,
normal,italic,,,, none,underline,,, none,capitalize,,,,
色指定 サイズ スタイル フォント名 太さ スタイル 装飾 表示方法等 テキスト text-align:center
line-height:18pt letter-spacing:normal vertical-align:base-align text-indent:1em
margin:1px
center,right,left,,, 18pt,normal,150%,,, normal,1em,1px,,, baseline,middle,top,,, 1em,1in,10%,,,,
1px,,,,,
段落の左右揃え 行間の幅 文字間隔 上限間隔 インデント位置 上下左右の幅
<HEAD>
<style type="text/css">
<!--
H1 {font-size:20pt;color:white;}
H2 { font-size:16pt;color:black;}
-->
</style>
</HEAD>
<BODY>
<H1>２０ｐｔ、白文字</H1>
<H2>１６ｐｔ、黒文字</H2>
<BODY>
背景の設定 background-color:red background-image:url background-repeat:
background-attachment:
background-position:
black,rgb(99,99,99),,, image1.jpg,,,,,
repeat-x,no-repeat,,,, fixed,scroll,,,,, left,right,center,,,,,,
背景色 背景画像 並び順 表示方法 左右位置 表示領域 width:50px
height:50px overflow:scroll float:none clear:both
border:thin dotted red margine:1px
padding:1px position:relative top:1px
bottom:1px right:1px left:1px clip:auto display:none cursor:default
auto,1px,,,, auto,1px,,,, none,,,,
left,right,none,,,,, left,right,both,none,,,, midium solid black,,,,, 1px 2px 3px 4px,,,,, 1px 2px 3px 4px,,,,, absolute,fixed,,, 1px,1pt,,,,,, 1px,1pt,,,,,, 1px,1pt,,,,,, 1px,1pt,,,,,,
rect(1px,4px,,1px,4px),,,, block,inline,list-item,,, auto,pointer,text,,,,
横幅 縦幅 表示方法 回り込み指定 解除方法
太さ、線種、線色 上 /右 /下 /左マージ ン
上/右/下/左の余白 配置方法
領域の位置 領域の位置 領域の位置 領域の位置 範囲指定 表示設定 ポインター形状 リスト list-style-type:disc
list-style-image:url
list-style-position:outside
circle,square,decimal,,, sampleimg.jpg,,,,,, inside,outside,,,,,
マーカータイプ 画像マーカー指定 マーカ表示位置 テーブル width:1px
border:thin dotted red table-layout:auto vertical-align:baseline text-indent:1em
1px,1pt,1em,,,,
midium solid black,,,,, fixed,auto,,,,,
sub,super,text-top,,,,, ipx,1pt,,,,,
横幅 線色と太さ 表示形式 上下位置 インデント位置
補足：
HTML が扱える長さの単位
in インチ（１in＝2.54cm）
cm センチメートル mm ミリメートル
pt ポイント（1pt=1/72in）
pc パイカ（1pc=12pt）
em 現在使用中のフォントサイズを１とした相対値 px ピクセル
% パーセント
2.4.5 クラスの定義と ID の定義
スタイルの中でクラスや ID を定義することにより、スタイルを HTML プログラムに中でダイナミックに 切り替えることができます。以下にその例を示します。
class-id.htm
<HTML>
<head>
<style type="text/css">
<!--
.color1{color:red;}
.color2{color:green;}
.color3{color:blue;}
h1.color4{color:orange;background-color:yellow;}
h2.color4{color:white;background-color:black;}
h3.color4{color:pink;background-color:orange;}
#color6{color:blue}
p#color5{color:red}
h1#color5{color:orange;background-color:yellow;}
-->
</style>
</head>
<body>
<h1 class="color1">color1</h1>
<h2 class="color2">color2</h1>
<h3 class="color3">color3</h1>
<h1 class="color4">h1.color</h1>
<h2 class="color4">h2.color</h1>
<h3 class="color4">h3.color</h1>
<p id="color5">p#color</p>
<h1 id="color5">h1#color</h1>
<h1 id="color6">h1</h1>
</body>
</HTML>
クラスは、以下のように定義します。
クラス名｛属性：値；｝
又は、
要素名・クラス名｛属性：値；｝
ID は、以下のように定義します。
#ID 名｛属性：値；｝
要素名#ID 名｛属性：値；｝
スタイルシートで定義されたクラスを 使って文字を描画します。
スタイルシートで定義された ID 名を使 って文字を描画します。