初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。
初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。今週のおさらいバックナンバーはこちらから
第１号 第２号 第３号 第４号 第５号 第６号 第７号 第８号 第９号 第10号
第11号 目次
プレーンテキスト版バックナンバー
＜第12号＞マガジンのおさらい
まず、記事から抜書きでおさらいします。
毎週金曜日配信 What's New 2002/8/2 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 今週の課題■ リストを作る ◆リストを作る <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title>リストを表示する</title> </head> <body> <div>ブラウザの種類</div> <ul> <li>Microsoft Internet Explorer</li> <li>Netscape</li> <li>iCab</li> <li>Opera</li> <li>Mozilla</li> <li>Lynx</li> <li>IBM HomePage Reader</li> </ul> </body> </html> ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
ブラウザの種類
<li> で囲まれたものがリストの項目になります。通常一般的なブラウザではインデント（字下げ）されて表示します。ul要素のデフォルトは上記のようにマーカーが黒丸で示されます。
◆番号付きリスト
項目のマーカーに数字で連番として表示させる要素は、<ol>〜</ol> を使います。先ほどのHTMLの <ul>、</ul> を入れ替えてみます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆画像を利用したマーカーを表示させる
次に、画像を利用しましょう。第10、11号でダウンロードした画像を利用します。
（まだ、入手していない方は当サイトの教材からダウンロードしてください。）
今までのHTMLとほとんど変わらないのでヘッダ部にスタイルシートを追加します。
下記のようにタイプしてください。
<style type="text/css">
<!--
ul { list-style-image: url("images/maker.gif") }
-->
</style>
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
なお、詳しくはCSSリファレンスのリストを参照してください。詳細な説明とサンプルがあります。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ◆定義リストの作成 定義リストとは、定義したい用語とその説明などで形成されたリストのことです。 今まで作っていたリストは単純に箇条書きリストでしたが、項目に説明が必要な 場合に、定義リストを作成します。 使用するタグは、dl、dt、dd の３つです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title>定義リスト</title> </head> <body> <div>ブラウザの種類</div> <dl> <dt>Microsoft Internet Explorer</dt> <dd>マイクロソフト社製で、WindowsのOSに標準でバンドルされています。</dd> <dt>Netscape</dt> <dd>Mosicより独立したメーカーです。文法には厳しいブラウザです。</dd> <dd>最近のWindows版Netscapeは、重くて起動に時間がかかります。</dd> <dt>iCab</dt> <dd>Macintosh専用のドイツ製のブラウザで開発途上です。</dd> <dt>Opera</dt> <dd>ノルウェー製のブラウザで、今後はIBMと開発する予定。</dd> <dt>Mozilla</dt> <dd>このブラウザのエンジンは多くのブラウザをサポートしています。</dd> <dd>これも軽いのが特徴です。一見Netscape風ですが、中身は違います。</dd> <dt>Lynx</dt> <dd>ご存知テキストブラウザの雄、日本語では山猫と訳すらしい。</dd> <dd>Web制作者は持っていたほうが良いブラウザです</dd> <dt>IBM HomePage Reader</dt> <dd>目に障害を持つ方のための音声ブラウザです。</dd> </dl> </body> </html> ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
上記定義付リストを表示するHTMLの実行結果はこの用に表示されます。
定義付リストにはマーカーはつきません。スタイルシートを利用してもマーカーをつけることは不可能です。また、一般的なブラウザでは、dd要素は数文字分インデント（字下げ）されて表示されます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆定義つきリストを魅力的なレイアウトに整える
先ほどの定義つきリストのHTMLの実行結果は、味気ないものがあります。そこで
スタイルシートを利用して、もう少し体裁を整えたいものです。
先ほどのHTML分のヘッダ部、<head>〜</head> の中に下記のスタイルシートを
挿入します。コロン「：」、セミコロン「；」を間違えないように。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>定義リスト</title>
<style type="text/css">
<!--
dl { margin-left: 2em }
dt { margin-right: 65%;
margin-top: 1em;
font-weight: bold;
color:#009;
border-bottom: 2px double #fc0 }
dd { margin: 0px;
text-indent: 1em }
-->
</style>
</head>
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■