人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

下記リストによるナビゲーションのソースコードがありますが、liのdisplay:blockとwidthの8emは必要でしょうか?なくても同様に表示されているように見えますが・・・。論理的に教えてください。
また、リストによるナビゲーションメニューを用いるメリット、デメリットを教えてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>ナビゲーション</title>
<style type="text/css">
ul{
list-style:none;
}
li{
display: block;
width: 8em;
margin-bottom: 1px;
}
a{
display:block;
width: 6em;
padding: 0.5em 1em;
text-decoration:none;
color: #ffffff;
background :#99d47f;
}
a:hover{
color: #000000;
background :#ffff00;
}
</style>
</head>
<body>
<ul>
<li><a href="#">リンク項目1</a></li>
<li><a href="#">リンク項目2</a></li>
<li><a href="#">リンク項目3</a></li>
<li><a href="#">リンク項目4</a></li>
<li><a href="#">リンク項目5</a></li>
</ul>

</body>
</html>


●質問者: tengen
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:#000000 :hover background COLOR DTD
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● kn1967
●23ポイント

(1)widthの8emは必要でしょうか?

メニュー項目の文字列変更時にデザインが崩れてしまう可能性があるため

あらかじめ決め打ちしておいたほうが後々のメンテナンスが楽になる。

全ての指定箇所においてemのように相対サイズ指定してあれば

ブラウザ側で文字サイズを変えた場合でも

全体的に大きさが変わるためデザインバランスが崩れる心配も無い。


(2)ナビゲーションメニューを用いるメリット、デメリット

クライアントサイトスクリプトを併用して必要な項目だけを

表示/非表示させる事が可能となるため縦に長いページになる事を防げる。

デメリットは特には無いでしょう。


URL必須ということで以下、余談ですが・・・。

第3回 サイト・ユーザビリティのチェックポイント(前編):ITpro

◎質問者からの返答

質問の意図が曖昧でした。aでwidth: 6em;、padding: 0.5em 1em;と設定していますが、liにもいるでしょうか?

また「クライアントサイトスクリプトを併用して必要な項目だけを表示/非表示」とはどういう意味でしょうか?


2 ● KUROX
●23ポイント

10em =文字の高さを基準とした1文字分の長さ

(emは文字Mの大きさに由来)

以下サイトからの情報

http://www.tohoho-web.com/css/basic.htm

意味はなくはないと思いますが、IE6で見る限り

表示が変わるようにも見えませんね。


3 ● wizemperor
●22ポイント

1)

a要素は 6em(width) + padding(1em) * 2 = 8em で、li要素の width

と同じなのでいらないでしょう。

ただ、一定の条件でIEでバグが発生することがあったような気はします。見た目が変わらないのならいらないでしょう。


li要素とa要素のフォントサイズが違う場合には、文字サイズ(1em)×8 となって実際の幅が異なるので注意が必要です。


2)デメリットは特にないでしょう。むしろ、リストでいいでしょう。

http://q.hatena.ne.jp/


4 ● Yota
●22ポイント

display:block;デフォルトなので、書いても書かなくてもいい。書き出すと全部書きたくなるから、やめたほうがよい。

width: 8em;なくても同じになるのは中身のaにwidthが指定されているため。両方指定ないと、ページ全体に広がってしまう。どちらかに指定する必要があるなら、liブロックのほうがいいと思うから、必要。ただし、実際にはリストの文字数が全部同じになるわけないので余裕を見て長めに取っておく。

リストによるナビゲーションメニューを用いるメリット、デメリットを教えてください

他のどんなナビゲーション方法をイメージしているか書いてみてください。

http://dummy.com/

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ