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

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

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

↓

ソース

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

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>

Follow @hp_master_2003

■ その他の項目

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