初心者のためのホームページ作成動画解説付

リストについて

<ul><li>~</li></ul>


リストとはどのような時に使用するかですが、何か項目を列挙するとき(つまり箇条書き)に主に使用します。
リストを使用した場合はその部分はひとつの塊=ブロックとみなされます。
リストを使用する場合は下記のように書きます。
<ul>と</ul>のタグの間に<li>と</li>を記述します。
<ul>
<li>りんご</li>
<li>ぶどう</li>
<li>みかん</li>
<li>いちご</li>
<li>なし</li>
</ul>
(ブラウザ表示は下記)
  • りんご
  • ぶどう
  • みかん
  • いちご
  • なし
このように、<ul>で記述すると、リストマークは「・」になります。
<ol>で記述すると、リストマークは「数字」になります。
<ol>
<li>りんご</li>
<li>ぶどう</li>
<li>みかん</li>
<li>いちご</li>
<li>なし</li>
</ol>
(ブラウザ表示は下記)
  1. りんご
  2. ぶどう
  3. みかん
  4. いちご
  5. なし
また、画像を指定することによってリストマークを画像にすることもできます。
htmlファイル
<ul>
<li>りんご</li>
<li>ぶどう</li>
<li>みかん</li>
<li>いちご</li>
<li>なし</li>
</ul>
cssファイル
ul{list-style:square url(画像ファイル名)}
(画像がの場合)

  • りんご
  • ぶどう
  • みかん
  • いちご
  • なし
(※リストマークを表示させたくない時はul{list-style:none}とすれば表示されません。)
ブロック要素とインライン要素
基本的にはリストは下に1行ずつ箇条書きになりますが、横に連続して表示させることもできます。

hx(xは数字)タグやpタグはdivタグ等はブロック要素と言われるものです。
言い方はよくありませんが、ブロック要素とは簡単に言うと横幅をめいっぱい取って、勝手に改行されてしまうものです。

ブロック要素に対する要素はインライン要素と言います。
aタグとかspanタグとかimgタグ等は勝手に改行されませんよね(^^)
んでリストはブロック要素なわけです。だから、勝手に改行されてしまいます。

さて、ではブロック要素をインライン要素にするにはどうすれば良いかですが・・・
cssのdisplayプロパティを使用すればブロック要素をインライン要素にすることができます。
では、やってみましょう。
htmlファイル
<ul class="list">
<li>りんご</li>
<li>ぶどう</li>
<li>みかん</li>
<li>いちご</li>
<li>なし</li>
</ul>
cssファイル
.list li{display:inline;}
  • りんご
  • ぶどう
  • みかん
  • いちご
  • なし
上記の表示のようにリストを横に表示させることができました(^^)
少し間隔が狭いので広げてみましょう。
htmlファイル
<ul class="list">
<li>りんご</li>
<li>ぶどう</li>
<li>みかん</li>
<li>いちご</li>
<li>なし</li>
</ul>
cssファイル
.list li{
display:inline;
padding:10px 30px;
}
  • りんご
  • ぶどう
  • みかん
  • いちご
  • なし
間隔で広がったので見やすくなったと思います(^^)


このエントリーをはてなブックマークに追加

(゜д゜メ)ゴルァ
リストは箇条書き時に使用と書きましたが、グローバルナビやサイドナビ等にも使用されます。

グローバルナビとは何かですが、
「webサイト内の各 ページに共通して設置されるサイト内の各コンテンツを案内するためのメニューのこと」です。
よくwebサイト上部に横に連なったリンクがあるとも思いますが、あれです。
サイドナビはこれが横にあるやつです。

では、サイドナビの例を見てみましょう。
htmlファイル
<ul class="sidenavi">
<li><a href="~">りんご</a></li>
<li><a href="~">ぶどう</a></li>
<li><a href="~">みかん</a></li>
<li><a href="~">いちご</a></li>
<li><a href="~">なし</a></li>
</ul>
cssファイル
.sidenavi li{
list-style:none;
width:50px;
padding:5px;
background:#eee;
margin-bottom:3px;
}
さて、この場合はリンク文字にカーソルをもっていかないとクリックできません。
ここで、aタグ(本来はインライン要素)をブロック要素にすることによって、リンク文字までカーソルをもっていかなくても
クリックできるようになります。
htmlファイル変わらず・・・
<ul class="sidenavi">
<li><a href="~">りんご</a></li>
<li><a href="~">ぶどう</a></li>
<li><a href="~">みかん</a></li>
<li><a href="~">いちご</a></li>
<li><a href="~">なし</a></li>
</ul>
cssファイル
.sidenavi li{
list-style:none;
background:#eee;
width:60px;
}
.sidenavi li a{
display:block
padding:5px;
}
このように記述することによって、背景が灰色の部分にカーソルを合わせてもリンクが効くようになりました(^^)
しかし、これだとどこからどこまでが項目のリンクかわからないので、カーソルを合わせたときに背景が変わるようにしたいと思います。
htmlファイル変わらず・・・
<ul class="sidenavi">
<li><a href="~">りんご</a></li>
<li><a href="~">ぶどう</a></li>
<li><a href="~">みかん</a></li>
<li><a href="~">いちご</a></li>
<li><a href="~">なし</a></li>
</ul>
cssファイル
.sidenavi li{
list-style:none;
background:#eee;
width:60px;
}
.sidenavi li a{
display:block
padding:5px;
}
.sidenavi li a:hover {background:#ccc;}
では最後に画像を使ってさらに応用を・・・
htmlファイルまたしても変わらず・・・
<ul class="sidenavi">
<li><a href="~">りんご</a></li>
<li><a href="~">ぶどう</a></li>
<li><a href="~">みかん</a></li>
<li><a href="~">いちご</a></li>
<li><a href="~">なし</a></li>
</ul>
cssファイル
.sidenavi li{
list-style:none;
background-image:url(画像ファイル名①)
width:60px;
}
.sidenavi li a{
display:block
padding:5px;
}
.sidenavi li a:hover {background-image:url(画像ファイル名②)}
ちょっと見づらいですがご勘弁を(^^;)