ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >横並びリスト

横並びリスト

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

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

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

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

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

拡大した場合

拡大したリスト

ソース

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

CSSの外部ファイル

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>

CSSの外部ファイル

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タグのボックスの外枠からはみ出ます。

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

拡大した場合

divbox内で拡大したリストははみ出る

ソース

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

CSSの外部ファイル

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>

CSSの外部ファイル

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


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

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

■ その他の項目

横並びリスト 解説その2

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


HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.