初心者のためのホームページ作り 第12号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第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>

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
上記HTMLの結果は下記の通りです。なお、青色の文字色にした理由は、HTML文を実行した結果を分かりやすくするために、スタイルシートで色付けしたものです。念のため。

ブラウザの種類

<li> で囲まれたものがリストの項目になります。通常一般的なブラウザではインデント(字下げ)されて表示します。ul要素のデフォルトは上記のようにマーカーが黒丸で示されます。

◆番号付きリスト 項目のマーカーに数字で連番として表示させる要素は、<ol>〜</ol> を使います。先ほどのHTMLの <ul>、</ul> を入れ替えてみます。

  1. Microsoft Internet Explorer
  2. Netscape
  3. iCab
  4. Opera
  5. Mozilla
  6. Lynx
  7. IBM HomePage Reader
このように順番の数字が表示されます。順番が重要なリストを作る時は、ol要素を使います。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆画像を利用したマーカーを表示させる
次に、画像を利用しましょう。第10、11号でダウンロードした画像を利用します。
(まだ、入手していない方は当サイトの教材からダウンロードしてください。)

今までのHTMLとほとんど変わらないのでヘッダ部にスタイルシートを追加します。
下記のようにタイプしてください。

<style type="text/css">
<!--
ul { list-style-image: url("images/maker.gif") }
-->
</style>

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
上記スタイルシートの結果はこの通りです。 皆さんも小さな画像を作って試してみてください。

なお、詳しくはCSSリファレンスのリストを参照してください。詳細な説明とサンプルがあります。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆定義リストの作成
定義リストとは、定義したい用語とその説明などで形成されたリストのことです。
今まで作っていたリストは単純に箇条書きリストでしたが、項目に説明が必要な
場合に、定義リストを作成します。
 使用するタグは、dl、dt、dd の3つです。

<!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の実行結果はこの用に表示されます。

ブラウザの種類
Microsoft Internet Explorer
マイクロソフト社製で、WindowsのOSに標準でバンドルされています。
Netscape
Mosicより独立したメーカーです。文法には厳しいブラウザです。
最近のWindows版Netscapeは、重くて起動に時間がかかります。
iCab
Macintosh専用のドイツ製のブラウザで開発途上です。
Opera
ノルウェー製のブラウザで、今後はIBMと開発する予定。
Mozilla
このブラウザのエンジンは多くのブラウザをサポートしています。
これも軽いのが特徴です。一見Netscape風ですが、中身は違います。
Lynx
ご存知テキストブラウザの雄、日本語では山猫と訳すらしい。
Web制作者は持っていたほうが良いブラウザです
IBM HomePage Reader
目に障害を持つ方のための音声ブラウザです。

定義付リストにはマーカーはつきません。スタイルシートを利用してもマーカーをつけることは不可能です。また、一般的なブラウザでは、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>
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
上記のスタイルシートの実行結果を下記に示しました。定義付リストもスタイル無しでは、平べったい感じがしますが、スタイルシートによって大きく見栄えが変わります。
ブラウザの種類
Microsoft Internet Explorer
マイクロソフト社製で、WindowsのOSに標準でバンドルされています。
Netscape
Mosicより独立したメーカーです。文法には厳しいブラウザです。
最近のWindows版Netscapeは、重くて起動に時間がかかります。
iCab
Macintosh専用のドイツ製のブラウザで開発途上です。
Opera
ノルウェー製のブラウザで、今後はIBMと開発する予定。
Mozilla
このブラウザのエンジンは多くのブラウザをサポートしています。
これも軽いのが特徴です。一見Netscape風ですが、中身は違います。
Lynx
ご存知テキストブラウザの雄、日本語では山猫と訳すらしい。
Web制作者は持っていたほうが良いブラウザです
IBM HomePage Reader
目に障害を持つ方のための音声ブラウザです。


Copyright(C) 2002-2003 banban@scollabo.com