MB-Support

パソコン初心者のサポートページ

リストを表示する UL LI

 文章に「・」を含めるか否かで、その意味は変わってしまいます。複数の文章をリスト形式で表示するならば、ブラウザがリストである事を認識可能なタグを使い、先頭に付く「・」や「1」などの数字は文章として認識させない方が、ホームページの構造がはっきりします。


順番を意識せずに文章をリスト表示させたい場合、各文章の先頭に「・」を入力すれば、見た目はリスト表示と同じになります。例えば以下。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<p>MB-Support</p>
<p>ワトソンのパソコン教室</p>
</body>
</html>

ブラウザ


<ul> <li> 〜 </li> </ul>

文章の先頭に「・」を入力すれば、リスト表示に見えますが、「・」も文章として認識され、ホームページの構造として意味が異ります。 これを、特定の部分をリスト表示であると指定するには、<ul> 〜 </ul> で囲みます。さらに、各文章を <li> 〜 </li> で囲みます。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<ul>
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li><a href="アドレス">ホームズ備忘録</a></li>
</ul>
</body>
</html>

ブラウザ


以上で、文章に「・」を挿入する必要がなくなり、ホームページの構造としては最適化され、リストにはインデントがつきました。 文章として「・」を含むか否かで、内容は全く異なります。例えば、名前である「MB-Support」に、「・」は関係ありません。 しかし、リストとして形成しない場合は、「・MB-Support」として一つの文章となってしまいます。



<ol> <li> 〜 </li> </ol>

「・」では無く、番号でリスト表示したい場合は、<ul> を <ol> に変更します。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<ol>
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li><a href="アドレス">ホームズ備忘録</a></li>
</ol>
</body>
</html>

ブラウザ

文章とは別に数字が表示されました。



type

数字の部分を type により変更できます。

type 表示型式 サンプル
A 大文字アルファベット A,B,C,D・・
a 小文字アルファベット a,b,c,d・・
I 大文字ローマ数字 T,U,V,W・・
i 小文字ローマ数字 @,A,B,C・・
1、または指定無し アラビア数字 1,2,3,4・・

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<ol type="A">
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li><a href="アドレス">ホームズ備忘録</a></li>
</ol>

<ol type="a">
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li><a href="アドレス">ホームズ備忘録</a></li>
</ol>

<ol type="I">
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li><a href="アドレス">ホームズ備忘録</a></li>
</ol>

<ol type="i">
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li><a href="アドレス">ホームズ備忘録</a></li>
</ol>
</body>
</html>

ブラウザ


start

カウントする順番をstartで指定できます。 例えば、type に大文字アルファベットを指定、startで5を指定すれば、1.A、2.B、3.C、4.D、5.E・・ E から始まります。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<ol start="5" type="A">
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li><a href="アドレス">ホームズ備忘録</a></li>
</ol>
</body>
</html>

ブラウザ


リストは、ページ上部にリンク形式のチャプターを表示する時に使いますが、スタイルシートを利用する事で、表示形式を変更する事ができます。 例えば、このサイトの左メニューと上部メニューは、リストとしてソースを書いていますが、スタイルシートで「・」を消し、左メニューでは各 <li> ごとに左からの空間を変更しています。上部メニューでは、ソースでリストを書いていますが、スタイルシートでリストスタイルを無しに設定して、横に表示させています。この方法はスタイルシートのカテゴリに掲載します。

リストに指定するスタイルシート UL LI




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項