第4回HTML講座（Ⅲ）

Pａｒｔ３　画像、テーブル、リストを配置しよう
Lesson-1　画像を配置しよう: ◆Webページで使用できる画像形式は、通常のGIF形式、JPEG形式、PNG形式の3種類のみ。Webページに画像を挿入する
　には、<img>タグを使用する。<img>タグは、src属性とalt属性を必ず記入する必要がある。
◆src属性（sourceの略）の属性値には画像ファイルのパス（場所）を記述する。<img>タグはインライン要素の1種なので、p要
　素などのブロックレベル要素で囲む必要がある。
◆alt属性（alternativeの略、代替えの意味）の属性値には、「画像に代わって表示する文字列」を記述する。
◆画像の大きさを指定するには、<img>タグにwidth属性（幅）とheight属性（高さ）を追加する。属性値には一般的にpxで表示
　サイズを指定する（スタイルシートと違い、単位の"px"の記述は必要はない。
　　　　　　例、<p><img src="img/shrine.jpg" alt="神倉神社" width="250" height="188"></p>
◆画像をレイアウトするには、テキストの回り込みを設定する。スタイルシートで回り込みをさせるにはfloatプロパティを使用す
　る。値には「right」または「left」を指定する。floatプロパティを設定したそれ以降の要素が回り込む。たとえば、画像を
　「float:right」で設定した場合、テキストはその左に流し込まれる。
◆回り込ませた要素とテキストの間隔は、回り込ませた要素にmarginプロパティを使って指定する。
◆回り込みを解除するには、回り込みを解除したい要素にclearプロパティを設定する。通常の状態時に戻す時に設定するが
　、値には「right」「left」「both」がある。スタイルをHTML文書に入れた例として
　　　　<p style="float: right; margin-left: 10px; margin-bottom: 10px; "><img src……></p>
　　　　<p>テキスト文</p>
　　　　<p style="clear: right;">テキスト文、</p>
◆画像をクリックしたときに別のWebページに飛ばしたいときは、<img>タグを<a>タグで挟む。
　　　　例、<p><a href="http:gihyo.jp><img src="gihyo.gif alt="gihyo.jp" width="142" height="27" </a></p>
◆スタイルシートを使って画像を表示させるには、ブロックレベル要素の背景としてbackground-imageプロパティを使って指
　定できる。背景画像の場所を示すことになる値は、URL（パス）で指定する。通常、ブロック要素の範囲内で、縦方向と横方
　向に繰り返し敷き詰められるが、指定する（repeat、repeat-x、repeat-y、no-repeat）こともできる。
◆テキスト中の画像の縦方向の位置を調整するにはvertical-alignプロパティを使用する。値にbaseline、middleやbottomな
　どいろいろあるが、英文の「g」「j」「p」などはベースラインの位置が異なるので注意要。
Lesson-2　テーブルを配置しよう: ◆HTML文書中でテーブルを作成するには、<table>タグを使用する。中身を構成するタグとして行は<tr>タグを、セルは
　 <td>タグを使用する。<table>→<tr>タグ→<td>タグの順に入れ子にして表示する。<th>タグは表の見出しを表すときに使
　われる特別のタグで、<th>タグに囲まれたセルのテキストはセンターリングされ太字になる。
◆<table>タグだけではテーブルのボーダーが表示しないので、border属性を追加し、「border="1"」を付けておけば良い。
◆summary属性を使って、テーブルの概要を記述することができる。ただし、ブラウザ上には表示されず、音声ブラウザを使っ
　ている人のために、summary属性を付けることが推奨されている。
◆scope属性で、見出しとセルに含まれた情報との関係を明確にすることができる。属性値に「row」（行方向に見出しに関する
　情報がある）または「col」（列方向に見出しに関する情報がある）を使う。例、<th scope="col">名前</th>
◆テーブル全体のサイズのデフォルトは、セル内に含まれるテキストや画像の表示サイズによって自動調整される。テーブル
　のサイズを指定したい場合は、スタイルシートのwidthプロパティで横幅を、heightプロパティで高さを設定できる。設定値に
　は単位つき数値か、％を使った割合を使用する。
◆<table>タグの内のborder属性を追加して表示させたボーダーのデザイン変更は、スタイルシートのborderプロパティを利
　用する。tableセレクタだけでなく、tdセレクタとthセレクタにもborderプロパティを記述する必要がある。
◆各セルの隙間を調整するためにはborder-collapseプロパティを使用する。「border-collapse: collape; 」で余分な隙間を
　無くすことができる。
◆隙間をなくすのではなく、間隔を自由に調整したい場合は、border-spacingプロパティを使用する。
　　　　　　例、table{ border-collapse: separate; border-spacing: 20px; }
◆セル内の余白や表示位置を調整するには、paddingプロパティでセル内のテキストと枠線との間隔を調整することができ、
　 text-alignプロパティでセル内の行揃えができる（値として「right」「center」「left」「justify」）。　
◆セル内テキストの縦方向の位置調整はvertical-alignプロパティで（値として、「top」「mddle」「bottom」）で、セル内の折り返
　しをなくするにはwhite-spaceプロパティ（値として、nowrap）で、調整ができる。
◆複数のセルを連結するには、横方向に連結させるにはcolspan属性を、縦方向はrowspan属性を使用する。属性値として、
　セルの数を入れる。例、3つの横方向のセルを結合する場合は、<td colspan="3">
◆スタイルシートのプロパティを使うと、テーブルやセルの背景に色を付けたり、画像を挿入することができる。背景色には
　 background-colorプロパティを、背景画像にはbackground-imageプロパティを使用する。
　　　　　　　例、　　th { background-color: #E1E1FF; } 　　　td { background-image: url(img/bg.gif); }
Lesson-3　リストを配置しよう: ◆リスト（箇条書き）を作成するには、<ul>タグと<li>タグを使用する。<ul>タグでリスト全体、<li>タグで各項目を設定する。ブラ
　ウザ表示ではリストの頭に「・」が付けられ、リスト全体は字下げされる。ul要素、li要素ともブロックレベル要素である。
◆リストのマークは変更できる。例、ul { list-style-type: disc; }、ul { list-style-type: circle; }など。
◆順序つきリストタグを作成するには<ol>タグ、<li>タグを使用する。番号表示はol { list-style-type: lower-roman }
　 ol { list-style-type: upper-alpha }など5種類を指定することができる。
◆定義リストは「見出し」と「その内容」が1つのセットになったもので、<dl>タグ（定義リストの範囲を決める）、<dt>タグ（見出し）
　、<dd>タグ（その内容）で構成される。例、<dl><dt>見出し</dt><dd>内容</dd></dl>

Pａｒｔ３ 画像、テーブル、リストを配置しよう

Lesson-1 画像を配置しよう

Lesson-2 テーブルを配置しよう

Lesson-3 リストを配置しよう

Pａｒｔ３　画像、テーブル、リストを配置しよう

Lesson-1　画像を配置しよう

Lesson-2　テーブルを配置しよう

Lesson-3　リストを配置しよう