リスト番号をつけよう！
では、番号つきリストをつかってケーキを作る手順を書いてみましょう。
＜例題14＞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>
<style type="text/css">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}
.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
.blue {
color:#0000FF;
font-size:120%;
margin-bottom:20px;
}
.sell {
text-align:center;
}
.strong {
font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="center">
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<span class="blue" >スポンジのつくり方</span>
</div>
<div align="center">
<table width="350" border="1">
<tr>
<td colspan="2" class="sell">＜材料＞（例）18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td class="sell">３個</td>
</tr>
<tr>
<td>砂糖</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>バター</td>
<td class="sell">25g</td>
</tr>
</table>
<p>
<span class="strong">＜スポンジのつくり方＞</span>
<ol>
<li>卵を卵白と卵黄に分けます。</li>
<li>小麦粉をふるいにかけます。</li>
<li>卵黄に分量の砂糖の1/3を加え、白っぽくなるまで混ぜ合わせます。</li>
<li>卵白に残りの砂糖を少しずつ加え、十分に泡立てます。</li>
<li>４に３を加え、軽く混ぜてから小麦粉を一気に加えます。</li>
<li>泡をつぶさないように、ゴムベラで切るように混ぜます。</li>
<li>８割ほど混ざったら、バターを加え、手早く混ぜ合わせます。</li>
<li>180度のオーブンで、20分ほど焼きます。</li>
</ol>
</div>
<body>
</html>
まずリスト番号の開始タグ <ol> を書きます。
次に各行に番号をつけていきます。
各行に番号をつけるには <li> </li> ではさみます。
<li> </li>
ではさむと自動的に1番から番号がつきます。
最後に終了タグ</ol> で閉じます。
では、これをブラウザで表示してみましょう。
リスト番号はつきましたが、レイアウトがなんだか変ですね。
では、これに少し手を加えて下の画像のようにレイアウトを整えてみましょう。
見えないテーブルで囲む
どうして文字が全部真中に寄ってしまうんでしょう？
覚えていますか？
「表示位置を変える」で全体をセンタリングをしましたよね。
このために全体がセンタリングされているのです。
では、どうすればいいのでしょう？
答えは「見えないテーブルで囲む」です。
「表示位置を変える」でセンタリングしましたが、テーブルで囲んでしまえば、テーブルの中まではセンタリングされないので左寄せのままで表示されるようになります。
見えないテーブルってどうやってつくるの？
見えないテーブルをつくるには、テーブルの線の太さを「0」にしてしまえばいいんです。
（HTMLのテーブルTips参照）
では、＜スポンジのつくり方＞から作り方の手順の部分を見えないテーブルで囲んでみましょう。
初めからテーブルの線が見えないと表が正しくできているかわからないので、はじめはテーブルの線を表示して作業します。
＜例題15＞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>
<style type="text/css">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}
.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
.blue {
color:#0000FF;
font-size:120%;
margin-bottom:20px;
}
.sell {
text-align:center;
}
.strong {
font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="center">
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<span class="blue" >スポンジのつくり方</span>
</div>
<div align="center">
<table width="350" border="1">
<tr>
<td colspan="2" class="sell">＜材料＞（例）18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td class="sell">３個</td>
</tr>
<tr>
<td>砂糖</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>バター</td>
<td class="sell">25g</td>
</tr>
</table>
<p>
<table border="1">
<tr>
<td>
<span class="strong">＜スポンジのつくり方＞</span>
<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>
</div>
</body>
</html>
これをブラウザで表示すると下の画像のようになります。
では、テーブルの線を消しましょう。
テーブルの線を消すには「border="0"」を使えばよかったですね。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>
<style type="text/css">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}
.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
.blue {
color:#0000FF;
font-size:120%;
margin-bottom:20px;
}
.sell {
text-align:center;
}
.strong {
font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="center">
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<span class="blue" >スポンジのつくり方</span>
</div>
<div align="center">
<table width="350" border="1">
<tr>
<td colspan="2" class="sell">＜材料＞（例）18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td class="sell">３個</td>
</tr>
<tr>
<td>砂糖</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>バター</td>
<td class="sell">25g</td>
</tr>
</table>
<p>
<table border="0">
<tr>
<td>
<span class="strong">＜スポンジのつくり方＞</span>
<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>
</div>
</body>
</html>
これをブラウザで表示すると下の画像のようになります。
▲このページのトップに戻るTop
|
スタイルシートについて
基本のページ