<ul>タグを横並びにしてメニューに使う
CSSでWEBデザインをしていると、上記のように、よくメニューに使われるのが、<ul>タグです。
なんで、<ul>タグを使用するのかというと、理由の一つに、アクセシビリティがあります。
<p>タグで、メニューを作成するのも、見た目的には問題ないのですが、音声ブラウザによっては、例えば、「ホーム最新情報会社概要商品紹介採用情報」と区切りなく連続で読まれる場合があります。
<ul>タグでメニューを作成すれば、音声ブラウザは、「ホーム、最新情報、会社概要、商品紹介、採用情報」と区切って読んでもらえます。
また、CSSを適用しないときの見た目もあります。下記のように、<p>タグよりも
メニュー
<ul>タグのほうが、メニューらしく見えませんか？
メニュー
こういう事情により、以前からCSSでレイアウトを組む場合は、メニューは、<ul>タグで組むということが一般的になりました。
では<ul>タグで、上記のようなメニューを作成するには、以下のように記述します。これは、一例です。
HTMLファイル
<ul id="menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー1</a></li>
</ul>
CSSファイル
ul#menu{
list-style: none;
color: #333;
border: 0;
height: 39px;
}
ul#menu li {
display: block;
float: left;
padding: 0;
margin: 10px;
}
- 投稿者:トモちゃんヌ
- 日時:20:42
comments