MB-Support

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

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

 文章の構造を示すためにリストを使いますが、表示はリスト形式にしたくない場合もあります。そんな時は、スタイルシートで list-style: none 、または、display: inline を使ってインラインレベルに変更します。


リストを表示する では、関連性の無い文章をリストとして表示する事で、文章とは関係が無い記号などを付加してリスト表示を形成する事ができます。 リストを使わなくても、見た目は変わらない様に書く事ができますが、リストであるとブラウザに認識させるためにホームページの構造として重要です。 下の例では、リスト表示で「・MB-Support」と表示されますが、文章としては「MB-Support」として認識されます。文章として「・MB-Support」と認識されてしまうと、「・」も文章に含まれるため、意図する文章とは異なってしまいます。



HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>題名</title>
</head>
<body>
<ul>
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li><a href="アドレス">ホームズ備忘録</a></li>
</ul>
</body>
</html>

ブラウザ



list-type

リスト表示は便利ではありますが、時には「・」などの記号が邪魔になるかも知れません。例えば、このサイトの左メニューでは、リスト表示であるものの「・」が付いてはページスペースの都合で困ります。 この場合は、スタイルシートで list-style: none; を指定すると、リスト表示を無効にできます。さらに、マージンを0pxにする事で、インデントも消す事ができます。


HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>題名</title>
<style type="text/css">
<!--
.nolist	{
	list-style: none;
	margin:0px 0px 0px 0px;
}
-->
</style>
</head>
<body>
<ul class="nolist">
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li><a href="アドレス">ホームズ備忘録</a></li>
</ul>
</body>
</html>

ブラウザ


[・]を消さずに他の記号に変更する事もできます。


dice circle square none
●黒丸 ○白丸 ■正方形 なし

HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>題名</title>
<style type="text/css">
<!--
.list_dice {
list-style: dice;
}
.list_circle {
list-style: circle;
}
.list_square {
list-style: square;
}
-->
</style>
</head>
<body>
<ul class="list_dice">
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li>ホームズ備忘録</li>
</ul>
<ul class="list_circle">
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li>ホームズ備忘録</li>
</ul>
<ul class="list_square">
 <li>MB-Support</li>
 <li>ワトソンのパソコン教室</li>
 <li>ホームズ備忘録</li>
</ul>
</body>
</html>

ブラウザ


margin

さらに、メニューの階層を表現するために、インデントの幅を調節するには以下。もちろん、左に入れる空間以外に、上下の間隔を変更する事ができます。


HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>題名</title>
<style type="text/css">
<!--
.nolist	{
	list-style: none;
	margin:0px 0px 0px 0px;
}
.li_year	{
	margin:0px 0px 0px 10px;
}
.li_month	{
	margin:0px 0px 0px 20px;
}
-->
</style>
<body>
<ul class="nolist">
 <li>MB-Support管理人の日記</li>
 <li class="li_year">2008年</li>
 <li class="li_month">1月</li>
 <li class="li_month">2月</li>
 <li class="li_month">3月</li>
 <li class="li_year">2007年</li>
 <li class="li_year">2006年</li>
</ul>
</body>
</html>

ブラウザ


display:none;

リストを横に表示させたい場合は、スタイルシートでインラインレベルに変更します。


HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>題名</title>
<style type="text/css">
<!--
.nolist	{
	list-style: none;
	margin:0px 0px 0px 0px;
}
.nolist li	{
	display: inline;
}
/*↑クラス「nolist」を指定されたUL内のLIに対して表示をインラインレベルに変更する*/
-->
</style>
<body>
<ul class="nolist">
 <li>1月</li>
 <li>2月</li>
 <li>3月</li>
</ul>
</body>
</html>

ブラウザ


スタイルシートを除去した場合、リストとして1月〜3月が表示されます。これも、単純に「1月2月3月」と入力した場合と意味が異なり、文章の構成を正しく示す事ができます。





戻る 一覧表示 次へ


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

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