XHTML(HTML)をもっと理解しよう

箇条書きで見やすく整理する

ここで使うタグ

<ul></ul>

囲んだ範囲がリストであることを示す

<li></li>

リストの中で1つの項目を作る

箇条書きをするときは<lu><li>を使うと、見やすくリスト化することができます。文章の頭に「・」を付けて箇条書きする方法もありますが、長文の場合非常に見にくくなるため、<lu>がとても便利です。 <li>で箇条書きにするときは、まず全体を<ul>で全体を囲み、箇条書きする段落ごとに<ul>で囲みます。箇条書きのリストマークは「・」ですが数字にしたり、画像にしたりすることもできます。 今回は、サイドメニューの各ページへのリンクに使用してみましょう。

???


ホームページ ソース
XHTML(HTML)

<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=shift_jis" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>タイトル</title>
</head>

<body>
<div id="body">

<div id="box-1">
<h1>h1 サイトタイトル</h1>
ホームページの説明文 <br />
テキスト テキスト テキスト テキスト テキスト テキスト
</div>

<div id="box-2">
<ul>
<li>ページ1</li>
<li>ページ2</li>
<li>ページ3</li>
<li>ページ4</li>
<li>ページ5</li>
</ul>

<ul>
<li>ページ1</li>
<li>ページ2</li>
<li>ページ3</li>
<li>ページ4</li>
<li>ページ5</li>
</ul>


</div>

<div id="box-3">
<h2>h2 ページタイトル</h2>
<p>テキスト テキスト (省略)</p>

<h3>h3 見出し</h3>
<p>テキスト テキスト (省略)</p>

<h3>h3 見出し</h3>
<p>テキスト テキスト (省略)</p>
</div>

<div id="box-4">
copyright (c) ~~~.com All right reserved.
</div>

</div>

</body>

</html>


CSS(スタイルシート)

#body {
      width :800px ;
      border: 1px solid #9acd32;
      }

#box-1 {
      border-bottom: 1px solid #9acd320;
      background-image: url("img/top.png");
      }

#box-2 {
      float : left;
      width :200px;
      }

#box-3 {
      float : right;
      width :600px;
      }

#box-4 {
      clear: both;
      width: 800px;
      background-color : #9acd32;
      }

inserted by FC2 system