ページ上部にある横並びリストを表示する解説です。 リストの枠線の表示の仕方によっては見え方にデメリットが 生じる点も紹介します。

このページではFirefox47.0.1のヴァージョンで メニューバーの「表示」→「ズーム」→「文字サイズのみ変更」 にチェックが入っている状態を前提として拡大した場合の見え方の 解説となります。

■ CSSでの横並びリスト　その1

リストタグをCSSのfloatを使用して横に並べます。 リストマークは幅を取るので消しています。 この例を見ると問題なく表示されていますがFirefoxでキーボードの「Ctrlキー　+ホイールを前に転がす」 で拡大して見ると下の図のように文字数が多い2番目と4番目が改行され各リストの大きさが違って見えてしまいます。

• サイト概要
• リンクについて
• ヘルプ
• お問い合わせ

↓

ソース

<ul class="yokonarabi">
<li>サイト概要</li>
<li>リンクについて</li>
<li>ヘルプ</li>
<li>お問い合わせ</li>
</ul>

ul.yokonarabi{
margin:0px;
padding:0px;
list-style-type:none;
}
ul.yokonarabi li{
float:left;
width:150px;
padding:5px;
border:1px black solid;
}

■ CSSでの横並びリスト　その2

今度はリストタグに高さを指定します。 高さは20pxとします。 先程同様にFirefoxで拡大した場合、今度はリストの外枠から文字が はみ出てしまいます。

• サイト概要
• リンクについて
• ヘルプ
• お問い合わせ

↓

ソース

<ul class="yokonarabi2">
<li>サイト概要</li>
<li>リンクについて</li>
<li>ヘルプ</li>
<li>お問い合わせ</li>
</ul>

ul.yokonarabi2{
margin:0px;
padding:0px;
list-style-type:none;
}
ul.yokonarabi2 li{
float:left;
width:150px;
height:20px;
padding:5px;
border:1px black solid;
}

■ CSSでの横並びリスト　その3

今度は高さを指定したdivタグのボックスの中に高さを指定した リストを入れます。 リストに線は指定せずdivタグのボックスにのみ線を指定します。 同様にFirefoxで拡大するとdivタグのボックスの外枠からはみ出ます。

↓

ソース

<div class="gaiwaku">
<ul class="yokonarabi3">
<li>サイト概要</li>
<li>リンクについて</li>
<li>ヘルプ</li>
<li>お問い合わせ</li>
</ul>
</div>

div.gaiwaku{
width:660px;
height:30px;
border:1px black solid;
}
ul.yokonarabi3{
margin:0px;
padding:0px;
list-style-type:none;
}
ul.yokonarabi3 li{
float:left;
width:150px;
height:20px;
padding:5px;
}

■ CSSでの横並びリスト　その4

今度は<li>要素にdisplay:inline;を指定して表示します。 <Ul>～</Ul>はリストが改行されますが この指定をすることによりブロック要素がインライン要素にかわりリストは横に 並べて表示することができます。 このパターンではFirefoxで拡大するとfloatを使用した時とは違い下にはみ出ません。

• サイト概要
• リンクについて
• ヘルプ
• お問い合わせ

↓

ソース

<ul class="yokonarabi4">
<li>サイト概要</li>
<li>リンクについて</li>
<li>ヘルプ</li>
<li>お問い合わせ</li>
</ul>

ul.yokonarabi4{
margin:0px;
padding:0px;
list-style-type:none;
}
ul.yokonarabi4 li{
display:inline;
width:150px;
padding:5px;
border:1px black solid;
}

この続きは下のその他の項目の「横並びリスト　解説その2」のページに移動して下さい

Follow @hp_master_2003

■ その他の項目

HTMLタグ一覧
スタイルシート一覧