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

横並びリスト 解説その2

前回の続き、ページ上部にある横並びリストを表示する解説その2になります。

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

CSSのヴァージョン3で使用されるFlexコンテナを利用して 横並びリストにします。 Firefoxで拡大してもdivボックスの枠からはみ出しません。 Safariのブラウザ用に-webkit-flex;を指定します。

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

拡大した場合

拡大したリストflex

属性説明
display:flex; この指定をUl要素にすることによりリストが横に並ぶ
flex-direction:row; 左から右へ並ぶ。値をrow-reverseと指定すると リストの項目が右から左へ逆に並ぶ。
flex:1; リストが右端まで伸びます。値を0とすると縮んで表示されます。

ソース

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

CSSの外部ファイル

div#gaiwaku2{
width:660px;
margin:0px auto;
}
ul.yokonarabi5{
display:-webkit-flex;
display:flex;
flex-direction:row;
padding:0px;
margin:0px;
list-style-type:none;
}
ul.yokonarabi5 li{
padding:5px;
flex:1;
border:1px black solid;
}

■ 横並びリスト その6

テーブルタグだけでリストを表示します。リストタグもCSSも使用しません。 もっともシンプルな表示の仕方でFirefoxで拡大しても枠からはみ出ません。 HTML5 + CSS3でのトップページのデザインの場合、テーブルタグは一切使用せずに レイアウトを組むことが可能ですが全てのブラウザで意図したレイアウトで ユーザーに見てもらうことはできません。 各ユーザーごとに昔のブラウザで閲覧したり拡大機能をつかっていたりと異なる環境でページを閲覧している可能性が有り 崩れたレイアウトになっているケースもあります。

IEの古いブラウザや新しくできたブラウザまで幅広い互換性を 考慮したデザイン(見栄え)にするには一部のみテーブルタグを使用するなどした方が無難です。

IEの古いヴァージョンの見え方の確認に関してはメニューバーの ツール→開発者ツールから右下の各ヴァージョンを選択することで可能に なります。

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

拡大した場合

拡大したテーブル使用のリスト

ソース

<table border="1" width="660">
<tr>
<td>サイト概要</td>
<td>リンクについて</td>
<td>ヘルプ</td>
<td>お問い合わせ</td>
</tr>
</table>

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

■ その他の項目

横並びリスト

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


HOME

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