|
リスト番号をつけよう！
リスト種類
リストって聞いても「何？」「どんなもの？」って疑問に思うかもしれません。
そこでまずはリストの見本を見てください。
上がマークつきリスト、下が番号つきリストです。
では、番号つきリストをつかってケーキを作る手順を書いてみましょう。
<html>
<head>
<title>MY HOMEPAGE</title>
</head>
<body>
<center>
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<font size="4" color="#0000FF">スポンジのつくり方</font>
<p>
<table width="350" border="1">
<tr>
<td colspan="2" align="center">＜材料＞（例）18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td align="center">３個</td>
</tr>
<tr>
<td>砂糖</td>
<td align="center">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td align="center">90g</td>
</tr>
<tr>
<td>バター</td>
<td align="center">25g</td>
</tr>
</table>
<p>
<b>＜スポンジのつくり方＞</b>
<ol>
<li>卵を卵白と卵黄に分けます。</li>
<li>小麦粉をふるいにかけます。</li>
<li>卵黄に分量の砂糖の1/3を加え、白っぽくなるまで混ぜ合わせます。</li>
<li>卵白に残りの砂糖を少しずつ加え、十分に泡立てます。</li>
<li>４に３を加え、軽く混ぜてから小麦粉を一気に加えます。</li>
<li>泡をつぶさないように、ゴムベラで切るように混ぜます。</li>
<li>８割ほど混ざったら、バターを加え、手早く混ぜ合わせます。</li>
<li>180度のオーブンで、20分ほど焼きます。</li>
</ol>
</center>
<body>
</html>
まずリスト番号の開始タグ <ol> を書きます。
次に各行に番号をつけていきます。
各行に番号をつけるには <li> </li> ではさみます。
<li> </li>
ではさむと自動的に1番から番号がつきます。
最後に終了タグ</ol> で閉じます。
では、これをブラウザで表示してみましょう。
リスト番号はつきましたが、レイアウトがなんだか変ですね。
これに少し手を加えて下の画像のようにレイアウトを整えてみましょう。
見えないテーブルで囲む
どうして文字が全部真中に寄ってしまうんでしょう？
覚えていますか？
「表示位置を変える」で全体をセンタリングをしましたよね。
このために全体がセンタリングされているのです。
では、どうすればいいのでしょう？
答えは「見えないテーブルで囲む」です。
「表示位置を変える」でセンタリングしましたが、テーブルで囲んでしまえば、テーブルの中まではセンタリングされないので左寄せのままで表示されるようになります。
見えないテーブルってどうやってつくるの？
見えないテーブルをつくるには、テーブルの線の太さを「0」にしてしまえばいいんです。
（テーブルのTips参照）
では、＜スポンジのつくり方＞から作り方の手順の部分を見えないテーブルで囲んでみましょう。
初めからテーブルの線が見えないと表が正しくできているかわからないので、はじめはテーブルの線を表示して作業します。
＜例題15＞
<html>
<head>
<title>MY HOMEPAGE</title>
</head>
<body>
<center>
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<font size="4" color="#0000FF">スポンジのつくり方</font>
<p>
<table width="350" border="1">
<tr>
<td colspan="2" align="center">＜材料＞（例）18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td align="center">３個</td>
</tr>
<tr>
<td>砂糖</td>
<td align="center">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td align="center">90g</td>
</tr>
<tr>
<td>バター</td>
<td align="center">25g</td>
</tr>
</table>
<p>
<table border="1">
<tr>
<td>
<b>＜スポンジのつくり方＞</b>
<ol>
<li>卵を卵白と卵黄に分けます。</li>
<li>小麦粉をふるいにかけます。</li>
<li>卵黄に分量の砂糖の1/3を加え、白っぽくなるまで混ぜ合わせます。</li>
<li>卵白に残りの砂糖を少しずつ加え、十分に泡立てます。</li>
<li>４に３を加え、軽く混ぜてから小麦粉を一気に加えます。</li>
<li>泡をつぶさないように、ゴムベラで切るように混ぜます。</li>
<li>８割ほど混ざったら、バターを加え、手早く混ぜ合わせます。</li>
<li>180度のオーブンで、20分ほど焼きます。</li>
</ol>
</td>
</tr>
</table>
</center>
</body>
</html>
これをブラウザで表示すると下の画像のようになります。
では、テーブルの線を見えなくしましょう。
テーブルの線を見えなくするには「border="0"」を使えばよかったですね。
<html>
<head>
<title>MY HOMEPAGE</title>
</head>
<body>
<center>
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<font size="4" color="#0000FF">スポンジのつくり方</font>
<p>
<table width="350" border="1">
<tr>
<td colspan="2" align="center">＜材料＞（例）18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td align="center">３個</td>
</tr>
<tr>
<td>砂糖</td>
<td align="center">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td align="center">90g</td>
</tr>
<tr>
<td>バター</td>
<td align="center">25g</td>
</tr>
</table>
<p>
<table border="0">
<tr>
<td>
<b>＜スポンジのつくり方＞</b>
<ol>
<li>卵を卵白と卵黄に分けます。</li>
<li>小麦粉をふるいにかけます。</li>
<li>卵黄に分量の砂糖の1/3を加え、白っぽくなるまで混ぜ合わせます。</li>
<li>卵白に残りの砂糖を少しずつ加え、十分に泡立てます。</li>
<li>４に３を加え、軽く混ぜてから小麦粉を一気に加えます。</li>
<li>泡をつぶさないように、ゴムベラで切るように混ぜます。</li>
<li>８割ほど混ざったら、バターを加え、手早く混ぜ合わせます。</li>
<li>180度のオーブンで、20分ほど焼きます。</li>
</ol>
</td>
</tr>
</table>
</center>
<body>
</html>
これをブラウザで表示すると下の画像のようになります。
▲このページのトップに戻るTop
Tips
リストの種類には、マークつきのリスト、番号つきのリストにはいろいろな種類があります。
|
|
|
- リスト1
- リスト2
- リスト3
|
- リスト1
- リスト2
- リスト3
|
このように表示をするには <ul> もしくは <ol> の部分に
<ul type="circle"> などとオプションを指定すれば表示を変更することができます。
上の表のリストは、左上から
<ul type="circle">
<ul type="square">
<ol type="I">
<ol type="A">
となっています。
|
はじめに
HP作成に必要なもの