文章のリスト表示・箇条書き

文章をいろいろ書いていくと箇条書きにしたい部分が出てくると思います。もちろん改行するだけでも良いのかもしれませんが、その1行が長くなると左側がそろわなくなってきます。リスト表示(箇条書きのタグを使いましょう。リストにもいろいろ種類があります。

マークのついたリスト表示

文頭に・や●や○や□をつけて箇条書きにします。以下のように書いてみましょう。

<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
<ul>
<li>花の写真
<li>北海道から九州までの日本100名山を中心とした名峰、そして何処にでもありそうな目立たない小さな山の写真数千枚の中から厳選した写真を季節ごとにまとめて紹介
<li type=”circle”>海の写真
<li type=”disk”>空の写真
<li type=”square”>建物の写真
<li>動物の写真
<li>流氷の写真
</ul>
</body>
</html>

するとこんな風に表示されます。長い文章でもすべての文頭の左側がそろっていますね。
またごらんのように
<li type” ~ ”>のように~の部分にマークの形を指定してやることも出来ます。

番号のついたリスト表示

続いて、マークではなく番号の着いたリストの書き方です。<ul></ul>ではなく<ol></ol>になるだけです。
以下のように書いてみましょう。

<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
<ol>
<li>花の写真
<li>北海道から九州までの日本100名山を中心とした名峰、そして何処にでもありそうな目立たない小さな山の写真数千枚の中から厳選した写真を季節ごとにまとめて紹介
<li>海の写真
<li>空の写真
<li>建物の写真
<li>動物の写真
<li>流氷の写真
</ol>
</body>
</html>

これをブラウザで見てみるとこのようになります。 そして番号のタイプもいろいろ選べます。

<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
<ol type=”A”>
<li>花の写真
<li>海の写真
<li>北海道から九州までの日本100名山を中心とした名峰、そして何処にでもありそうな目立たない小さな山の写真数千枚の中から厳選した写真を季節ごとにまとめて紹介
</ol>
<ol type=”a”>
<li>花の写真
<li>海の写真
<li>北海道から九州までの日本100名山を中心とした名峰、そして何処にでもありそうな目立たない小さな山の写真数千枚の中から厳選した写真を季節ごとにまとめて紹介
</ol>
<ol type=”I”>
<li>花の写真
<li>海の写真
<li>北海道から九州までの日本100名山を中心とした名峰、そして何処にでもありそうな目立たない小さな山の写真数千枚の中から厳選した写真を季節ごとにまとめて紹介
</ol>
<ol type=”i”>
<li>花の写真
<li>海の写真
<li>北海道から九州までの日本100名山を中心とした名峰、そして何処にでもありそうな目立たない小さな山の写真数千枚の中から厳選した写真を季節ごとにまとめて紹介
</ol>
</body>
</html>

さてどうなりますか?ブラウザで確認しましょう。さて、ここまで出来てくるとだいぶ文章にメリハリがつけられるようになってきました。
今度は文章を中央に寄せたりしてみましょう。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録