下記リストによるナビゲーションのソースコードがありますが、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>

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/08/25 10:56:40
  • 終了:2007/09/01 11:00:06

回答(4件)

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012007/08/25 11:11:19

ポイント23pt

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

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

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

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

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

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


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

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

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

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


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

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

id:tengen

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

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

2007/08/25 11:25:24
id:KUROX No.2

KUROX回答回数3542ベストアンサー獲得回数1402007/08/25 11:12:38

ポイント23pt

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

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

以下サイトからの情報

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

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

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

id:wizemperor No.3

wizemperor回答回数379ベストアンサー獲得回数522007/08/25 12:15:46

ポイント22pt

1)

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

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

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


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


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

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

id:Yota No.4

Yota回答回数453ベストアンサー獲得回数282007/08/25 12:28:25

ポイント22pt

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

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

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

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

http://dummy.com/

  • id:niwa-mikiho
    (1) なぜ li の display:block と widthの8em を外しても同じに見えるのか
    li の width:8em を外してもリンクの width と padding の合計値が 8em なので、li の大きさが変わらないように見えてるだけで、li そのものの大きさは変わっています。


    大きさが川手地内容に見える原因は、a に対して背景色を設定しているためで、li に背景色を (分かりやすく #ff0000 とかで) 設定してみれば、描画される内容が違うのが分かるかと思います。


    大きさの違いを見分ける1つの手段としては、サイズを知りたい要素に対して背景色を設定してみるというのがオススメです。
    border はサイズが変わってしまうので、デザインによってはデザインの崩れが生じるので確認用で設定するのに border は適していません。



    (2) li を使う理由
    まず、XHTML は文書の構造をあらわす事に重点を置かれたものです。
    ナビゲーションメニューは箇条書きされたリストと考えることが出来るため、li を使います。
    よって、デメリットはありませんが、メリットは 「ちゃんと XHTML の意図に沿っている」 という事でしょうか。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません