前回の続き、ページ上部にある横並びリストを表示する解説その2になります。■ CSSでの横並びリスト その5CSSのヴァージョン3で使用されるFlexコンテナを利用して 横並びリストにします。 Firefoxで拡大してもdivボックスの枠からはみ出しません。 Safariのブラウザ用に-webkit-flex;を指定します。
↓ 拡大した場合
ソース
<div id="gaiwaku2">
div#gaiwaku2{ ■ 横並びリスト その6テーブルタグだけでリストを表示します。リストタグもCSSも使用しません。 もっともシンプルな表示の仕方でFirefoxで拡大しても枠からはみ出ません。 HTML5 + CSS3でのトップページのデザインの場合、テーブルタグは一切使用せずに レイアウトを組むことが可能ですが全てのブラウザで意図したレイアウトで ユーザーに見てもらうことはできません。 各ユーザーごとに昔のブラウザで閲覧したり拡大機能をつかっていたりと異なる環境でページを閲覧している可能性が有り 崩れたレイアウトになっているケースもあります。 IEの古いブラウザや新しくできたブラウザまで幅広い互換性を 考慮したデザイン(見栄え)にするには一部のみテーブルタグを使用するなどした方が無難です。 IEの古いヴァージョンの見え方の確認に関してはメニューバーの ツール→開発者ツールから右下の各ヴァージョンを選択することで可能に なります。
↓ 拡大した場合ソース
<table border="1" width="660">
■ その他の項目・ 横並びリスト |
HOME
Copyright (C) 2003-2024 ホームページマスター All rights reserved.