第4章 画像，テーブル，リストの配置
Download
Report
Transcript 第4章 画像，テーブル，リストの配置
第４章 画像，テーブル，リストの配置
4.1 画像の配置
4.1.1 画像の挿入
4.1.2 画像の大きさの指定
4.1.3 画像のレイアウト
4.1.4 画像にリンクを張る
4.1.5 背景に画像を表示する
4.1.6 テキストと画像の位置
4.1.1 画像の挿入
（１）指定方法
<img> タグのsrc 属性で画像ファイルの場所（パス），
<alt>属性で代替文字列を指定。
■<img> タグは，インライン要素のひとつなので<p> タグで
囲む必要がある。「img」は「image」の略。
■「src」は「source」の略。
■「alt」は「alternative」の略。画像を表示できないブラウザ
への対応，画像読込みに失敗したときや画像を表示しな
い設定にしているときに表示する文字列を指定する。
（２）指定例
<body>
<p><img src="img001.jpg" alt="ゼニアオイ"></p>
<p>道端にひっそり咲いたゼニアオイを見つけました</p>
</body>
4.1.2 画像の大きさの指定
（１）指定方法
<img> タグ中のwidth属性とheight属性で指定する。
■ピクセルで指定するが，単位px は不要。
■必須の属性ではないが，指定することによって，ブラウザ
によるページレイアウトの崩れを防ぐことができる。
（２）指定例
<body>
<p><img src=“img001.jpg” alt=“ゼニアオイ”
width=100 height=80></p>
<p>道端にひっそり咲いたゼニアオイを見つけました</p>
</body>
■大きさ指定なしの場合
■上記の指定の場合
サムネイルを配置して，画像のクリックすると画像を拡大表示するLitebox というソフト
がよく使われている。このソフトについては，以下の説明が分かりやすい。
http://journal.mycom.co.jp/articles/2007/06/14/lightbox/menu.html
4.1.3 画像のレイアウト
（１）指定方法
■floatプロパティでテキストの回り込みを指定する。
値
right
left
説明
要素が右に，テキストは左に配置される。
要素が左に，テキストは右に配置される。
（２）指定例
<p style="float:right;"><img src="img003.jpg" alt="シダ"
width=120 height=100></p>
<p>アスファルトとコンクリートの間に
シダ類が元気に育っていました。
ど根性植物かも？元気をもらいました。</p>
<p>雑草だからこそでしょうが，逞しいですね。</p>
（３）回り込みさせた要素とテキストの間隔
<p style="float:right;margin-left:20px;margin-bottom:20px">
<img src=“img003.jpg” alt=“シダ” width=120 height=100></p>
<p>アスファルトとコンクリートの間に
シダ類が元気に育っていました。
ど根性植物かも？元気をもらいました。</p>
<p>雑草だからこそでしょうが，逞しいですね。</p>
■間隔を指定しない場合
■間隔を指定した場合
（４）回り込みを解除
<p style="float:right;margin-left:20px;margin-bottom:20px">
<img src=“img003.jpg” alt=“シダ” width=120 height=100></p>
<p>アスファルトとコンクリートの間に
シダ類が元気に育っていました。
ど根性植物かも？元気をもらいました。</p>
<p style="clear:right;">雑草だからこそでしょうが，逞しいですね。
</p>
■回り込み解除なし
■途中で回り込み解除
（５）スタイル属性を使ったことを指定
■最後にstyle属性をHTML文書中に直接記述したことを
<META>タグ中に記述しておこう!!
<head>
<META http-eqiuv="Content-Type" content="text/html">
<META http-eqiuv="Content-Style-Type" content="text/css">
</head>
4.1.4 画像にリンクを貼る
（１）指定方法
■<img>タグを<a>タグで囲んで指定する。
<a href="040107.html">
<p style="float:right;margin-left:20px;margin-bottom:20px">
<img src="img003.jpg" alt="シダ"
width=120 height=100></p></a>
左のように
リンクが貼られたことを示す
枠線が表示される
（２）リンクの確認
【0450107.htmlの内容】
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0//EN">
<html lang="ja">
<head>
<META http-eqiuv="Content-Type"
content="text/html">
</head>
<body>
<p>
<img src="img004.gif" alt="シダ"
width=80 height=100></p>
<p>反復関数をExcelで定義して
シダの葉の絵を描いてみました。</p>
</body>
</html>
画像をクリック
（２）枠線を消す
HTML
<head>
<META http-eqiuv="Content-Type" content="text/html">
<META http-eqiuv="Content-Style-Type" content="text/css">
<link href="040108.css" rel="stylesheet" type="text/css">
</head>
040108.cssの内容
img{ border: none;}
枠線が消えている！！
4.1.5 背景に画像を表示する
（１）指定方法
■スタイルシートで背景画像を指定する
body{ background-image:url(img005.gif);}
<head>
<META http-eqiuv="Content-Type"
content="text/html">
<META http-eqiuv="Content-Style-Type"
content="text/css">
<link href="040109.css"
rel="stylesheet" type="text/css">
</head>
<body>
（２）背景画像の繰返しの指定（background-repeat）
値
repeat
repeat-x
repeat-y
no-repeat
説明
要素の背景一面に敷き詰める（デフォルト）
横一列に敷き詰める
縦一列に敷き詰める
繰り返さない
body{
background-image:url(img005.gif);
background-repeat: repeat-x;
}
body{
background-image:url(img005.gif);
background-repeat: repeat-y;
}
（３）背景画像の位置指定（background-position）
値
top
right
bottom
left
center
説明
上寄せ
右寄せ
下寄席
左寄せ
中央寄せ
body{
background-image:url(img005.gif);
background-repeat: no-repeat;
background-position:center bottom;
}
4.1.6 テキストと画像の位置
テキスト中に画像を表示する場合，画像の下端がテキスト
のベースラインに揃うように表示される。これを調整するに
は，vertical-alignプロパティを指定する。
値
baseline
説明
ベースライン
（デフォルト）
top
上端
middle
中央
bottom
下端
text-top
テキストの上端
text-bottom テキストの下端
super
上付き文字の位置
sub
下付き文字の位置
super
top
text-top
middle
baseline
text-bottom
bottom
x y
sub
4.2 テーブル作成
4.2.1 テーブル用タグ
4.2.2 テーブルとセルの大きさ
4.2.3 テーブルの枠線
4.2.4 セル内余白と表示位置
4.2.5 行や列の連結
4.2.6 背景色・背景画像
4.2.1 テーブル用タグ
（１）テーブル用タグの種類
<table>
<tr>
<th>
<td>
テーブル要素
テーブルの行（table row）
テーブル見出し（table header）
テーブルデータ（table data cell）
table
tr
th
th
th
tr
td
td
td
tr
td
td
td
（２）指定方法
■テーブルのborder属性で枠線を指定
■summary属性でテーブルの概要を指定（表示には表れ
ないが，音声ブラウザを使う人には役立つ）
（３）テーブル例
<table border="1" summary="著作権">
<tr><th>項目</th><th>権利の性格</th><th>譲渡</th><th>権利者</th></tr>
<tr><td>著作権</td><td>財産的権利</td><td>可能</td><td>著作者または権利継
承者</td></tr>
<tr><td>著作者人格権</td><td>人格的権利</td><td>不可能</td><td>著作者
</td></tr>
<tr><td>著作隣接権</td><td>財産的権利</td><td>可能</td><td>実演家，CDやレ
コード製作者，放送事業者など</td></tr>
</table>
（４）scope属性
■テーブルの見出しに関する情報が行，列のどちらにあるのかを示す。
値
row
Col
説明
行（右）方向に見出しに関する情報がある。
列（下）方向に見出しに関する情報がある。
【例】
<tr>
<th scope=“col”>ISBN</th>
<th scope=“col”>書名</th>
<th scope=“col”>著者</th>
<th scope=“col”>発行所</th>
</tr>
見出しとセルに含まれた情報との関係を明確にするために利用する。
（見た目は変わらない）
（５）画像をセルデータとする（その１）
<table border="1" summary="フラクタル">
<tr><th>画像</th><th>名前</th><th>説明</th></tr>
<tr><td><img src="image/DragonCurve.jpg" alt="ドラゴンカーブ"
width=100 height=80></td>
<td>ドラゴンカーブ</td><td>紙テープを同じ向きに何回も折り曲げて，
折り目を直角になるように開けばできる曲線</td>
</tr>
<tr><td><img src="image/mandelbro.jpg" alt="マンデルブロー集合"
width=100 height=100></td>
<td>マンデルブロー集合</td><td>複素数の漸化式で定義される複素数列
のうち収束する複素数だけを集めた集合</td>
</tr>
<tr><td><img src="image/Mengar.jpg" alt="メンガーのスポンジ"
width=100 height=100></td>
<td>メンガーのスポンジ</td><td>シェルピンスキーのカーペットを３次
元に拡張した集合</td>
</tr>
</table>
（５）画像をセルデータとする（その２）
4.2.2 テーブル・セルの大きさ
■スタイルシートのwidth, heightプロパティ値で指定
する。
■設定値は，単位付き数値か，%付きの割合で示す。
【例】
table { width:700px; height: 500px;}
td{font-size: 80%;}
th{font-size: 80%}
4.2.2 テーブル・セルの大きさ
■スタイルシートのwidth, heightプロパティ値で指定
する。
■設定値は，単位付き数値か，%付きの割合で示す。
【例】
table { width:700px; height: 500px;}
td{font-size: 80%;}
th{font-size: 80%}
4.2.3 テーブルの枠線
（１）枠線（border）
■borderプロパティを利用する
table { border: solid 2px green;}
th
{ border: solid 2px green;}
td
{ border: solid 2px green;}
（２）枠線の余分な隙間をなくす（border-collapse）
■border-collapse(つぶすという意味)
table { border: solid 2px green; border-collapse: collapse;}
th
{ border: solid 2px green; border-collapse: collapse;}
td
{ border: solid 2px green; border-collapse: collapse;}
（３）セル間の隙間を調整する（border-spacing）
■border-collapseをseparateにしてスペースを指定
table { border: solid 2px green; border-collapse: separate;
border-spacing: 20px；}
th
{ border: solid 2px green; border-collapse: separate;
border-spacing: 20px；}
td
{ border: solid 2px green; border-collapse: separate;
border-spacing: 20px；}
4.2.4 セル内余白と表示位置
（１）セル内余白（padding）
■paddingプロパティを使う
table { border: solid 2px green; border-collapse: collapse;}
th
{ border: solid 2px green; border-collapse: collapse;
padding:10px;}
td
{ border: solid 2px green; border-collapse: collapse;
padding:10px;}
（２）縦方向位置（vertical-align）
■vertical-alignプロパティを使う
table { border: solid 2px green; border-collapse: collapse;}
th
{ border: solid 2px green; border-collapse: collapse;
padding:10px;}
td
{ border: solid 2px green; border-collapse: collapse;
padding:10px;}
（３）テキストの折り返しをなくす（white-space）
■white-spaceプロパティを使う
table { border: solid 2px green; border-collapse: collapse;}
th { border: solid 2px green; border-collapse: collapse;
padding:10px;}
td { border: solid 2px green; border-collapse: collapse;
padding:10px;vertical-align: top;white-space: nowrap;}
4.2.5 行や列の連結
（１）縦方向の連結（rowspan）
■rowspan 属性を使用する
<table border="1" summary="縦方向連結">
<tr><td rowspan="2">セル11と21</td><td>セル12</td><td>セル
13</td></tr>
<tr><td>
セル22</td><td>セル
23</td></tr>
<tr>
<td>セル31</td>
<td>セル32</td><td>セル
33</td></tr>
</table>
（２）横方向の連結（colspan）
■ colspan 属性を使用する
<table border="1" summary="横方向連結">
<tr><td colspan="3">セル11と12と13</td></tr>
<tr><td>セル21</td><td>セル22</td><td>セル23</td></tr>
<tr><td>セル31</td><td>セル32</td><td>セル33</td></tr>
</table>
（３）横方向と縦方向連結
■ colspan と rowspan 両方とも使用する
<table border="1" summary="横方向と縦方向連結">
<tr><td>セル11</td><td>セル12</td><td>セル13</td></tr>
<tr><td colspan="2" rowspan="2">セル21, 22,31, 32</td>
<td>セル23</td></tr>
<tr><td>セル33</td></tr>
</table>
4.2.6 背景色・背景画像
■background-color, background-imageを使用する
table { border: solid
th
{ border: solid
padding:10px;
td
{ border: solid
padding:10px;
2px green; border-collapse: collapse;}
2px green; border-collapse: collapse;
background-color : #CDCDCD;}
2px green; border-collapse: collapse;
background-image : url(img005.gif);}
4.3 リスト作成
4.3.1 リストタグ
4.3.2 順序付きリストタグ
4.3.3 定義リスト
4.3.4 入れ子リスト
4.3.5リストのデザイン
4.3.1 リストタグ
（１）指定方法
■リスト（箇条書き）の作成
<ul>タグと<li>タグ
（リストの頭にマーカが付けられ，インデントされる）
ul
li
項目
li
項目
<body>
<h1>増殖する不正プログラム</h1>
<p>増殖する不正プログラムには以下の種類があります。
<ul>
<li>コンピュータウィルス</li>
<li>コンピュータバクテリア</li>
<li>コンピュータワーム</li>
</ul>
</p>
</body>
（２）例
（３）リストマーカの種類（list-style-type）
■ulまたはliセレクタにlist-style-typeを指定
値
disc
circle
square
non
マーカ
●
○
■
説明
黒丸（デフォルト）
白丸
四角
マーカ非表示
4.3.2 順序付きリストタグ
（１）指定方法
■順序付きリスト（箇条書き）の作成
<ol>タグと<li>タグ
（リストの頭に番号が付けられ，インデントされる）
ol
li
項目
li
項目
<body>
<h1>増殖する不正プログラム</h1>
<p>増殖する不正プログラムには以下の種類があります。
<ol>
<li>コンピュータウィルス</li>
<li>コンピュータバクテリア</li>
<li>コンピュータワーム</li>
</ol>
（２）例
【補足】<li value=“3”>等と指定することで好きな番号から開始できる。
（３）番号表示の種類
■Olセレクタまたは，liセレクタにlist-style-type
プロパティを指定することで番号表示を変更する
ことができる。
値
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
説明
1， 2， 3，…
ⅰ，ⅱ，ⅲ,…
Ⅰ，Ⅱ，Ⅲ，…
a，b，c，…
A，B，C，…
4.3.3 定義リスト
（１）指定方法
■見出しとその内容がひとつのセットになったもの
<dl>タグで，<dt>タグと<dd>タグを交互に書いた
一連の記述を囲む。
dl
dt
見出し
dd
内容
dt
見出し
dd
内容
・
・
・
<body>
<dl>
<dt>メソポタミア</dt>
<dd>ギリシャ語で「川と川の間の地」という意味。
チグリス川とユーフラテス川に挟まれた地域やその周辺を指し，
古代にシュメール文化が花開きました。</dd>
<dt>くさび形文字</dt>
<dd>今から5000年以上前，メソポタミアでは，
ものの形に似た象形文字が発明され，
それが簡略化されてくさび形文字に発展しました。
紀元前3000年頃には，
くさび形文字が広く使われるようになりました。</dd>
<dl>
</body>
（２）例
4.3.4 入れ子リスト
（１）リストの中にさらにリスト
<ul>
<li>青森・冬の三大まつり<ul>
<li>八戸えんぶり</li>
<li>十和田湖冬物語</li>
<li>弘前城雪燈篭まつり</li>
</ul></li>
<li>青森周辺の文化遺産<ul>
<li>三内丸山遺跡</li>
<li>青森自然公園ねぶたの里</li>
<li>宗像志功記念館</li>
</ul></li>
</ul>
（２）定義リストの中にリスト
<dl><dt>青森の名湯</dt>
<dd><ul>
<li>酸ヶ湯温泉（千人風呂で有名）</li>
<li>蔦温泉（浴槽の真下に源泉がある）</li>
<li>浅虫温泉（青森の奥座敷）</li>
<li>谷地温泉</li>
<li>奥入瀬渓流温泉</li>
<li>十和田湖畔温泉</li>
<li>獄温泉</li>
</ul></dd>
</dl>
4.3.5 リストのデザイン
（１）マークを入れる
<p>青森の名湯</p>
<ul>
<li>酸ヶ湯温泉（千人風呂で有名）</li>
<li>蔦温泉（浴槽の真下に源泉がある）</li>
<li>浅虫温泉（青森の奥座敷）</li>
<li>谷地温泉（日本三秘湯のひとつ）</li>
<li>奥入瀬渓流温泉（奥入瀬渓流を眺めながら）</li>
<li>十和田湖畔温泉（湖を紅く染める夕日を眺めながら）</li>
<li>獄温泉（津軽藩時代から湯治場）</li>
</ul>
ul { list-style-image: url(mark002.gif);}
（２）リストのインデントを調整する
■Firefox 等では，インデントとしてpaddingが設定されるので，
paddingを0設定すること。
ul { list-style-image: url(mark002.gif);
margin-left: 100px; padding-left: 0px;
}
Margin-leftを指定していないとき
（３）リストの背景色
■以下はInternet Exploreの場合。Firefoxでは背景色のマーカ部分にも
背景色が表示される。
ul { list-style-image: url(mark002.gif);
margin-left: 100px; padding-left: 0px;
background-color: #FFFF00;
}
（４）マーク部分も背景色
■list-style-positionプロパティでinsideを指定する
ul { list-style-image: url(mark002.gif);
margin-left: 100px; padding-left: 0px;
background-color: #FFFF00;
list-style-position: inside;
}
【insideを指定しない場合】
（５）背景色の左側に余裕を持たせる
■liのmargin-leftを指定する.
ul { list-style-image: url(mark002.gif);
margin-left: 100px; padding-left: 0px;
background-color: #FFFF00;
list-style-position: inside;
}
li { margin-left: 30px;}
【liのマージンを指定しない場合】
（６）スタイルの別の表現
■list-style-position, list-style-image, list-style-typeは
list-styleで一括して指定できる.
list-style-type
: circle;
list-style-image
: url(mark002.gif);
list-style-position: inside;
以下は，上記と同じ
list-style: circle url(mark002.gif) inside;
（７）入れ子リストへのスタイルの指定
■例題HTMLを以下のとおりとする。
<ol>
<li>ドラマ<ol>
<li>ラブロマンス<ol>
<li>ローマの休日</li>
<li>カサブランカ</li>
<li>終着駅</li>
</ol></li>
<li>伝記・歴史物語<ol>
<li>グレン・ミラー物語</li>
<li>楽聖ショパン</li>
<li>キューリー夫人</li>
</ol></li>
<li>ミュージカル<ol>
<li>二人で御茶を</li>
<li>錨を上げて</li>
<li>巴里のアメリカ人</li>
</ol></li>
<li>サスペンス<ol>
<li>シャレード</li>
<li>ガス燈</li>
<li>ニノチカ</li>
</ol></li>
</ol>
スタイルの指定
■子孫セレクタを，それぞれ指定する。
ol li{list-style-type:upper-alpha;}
ol ol li{list-style-type:upper-roman;}
ol ol ol li{list-style-type:decimal;}