スタイルシート(CSS)についての初歩的な質問です。

ナビゲーションをテキストではなく、文字付きの画像を使って作りたいです。
ただしそれぞれのメニューの横幅は、見栄えを考慮して意図的に不揃いにしてあります。
つまづいている箇所ですが、
もし幅が均等ならば、通常、a要素の
display: block;
の指定の後にheightとwidthの値を指定するところを、横幅が不揃いのためにwidthの値を指定できず、どうしたものかと困っています。
(指定すると均等に位置されるので、意図していた表示と違ってくる)
かといってwidthの指定をしないでいると、text-indent: -9999px; のため、なぜか画像までも画面から見えなくなってしまいます。
width: 100%;も通用しないようです。上と同じく画像が表示されなくなります。
やはり横幅が不揃いのナビを作るのは難しいのでしょうか。
(どの本を見ても、画像の横幅は揃っていますね・・・)
見栄えは諦めたほうがいいのでしょうか。
もし解決策があれば教えていただけますか。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/12/12 07:59:38
  • 終了:2007/12/16 14:48:43

回答(2件)

id:Lu-such No.1

Lu-such回答回数22ベストアンサー獲得回数12007/12/12 09:52:43

ポイント10pt

ナビゲーションの文字に応じて、その都度CSSのclassをあてていくのはどうでしょうか。

例えば

  • testtesttesttesttesttest
  • test

で対応できると思います。

でも手間かもしれません。



URLは関係ないですが、自分がよく参考にするサイトです。

http://www.tagindex.com/

id:funnywalk_5

一括で指定できないなら個別にと、各メニューのwidthを個別に指定してみたらうまく行きそうです。

なぜこんな単純なことに気付かなかったんだろう・・・。

2007/12/12 19:51:29
id:Redstock No.2

Redstock回答回数8ベストアンサー獲得回数12007/12/12 11:38:38

ポイント60pt

文面からの想像するに・・・

>widthの指定をしないでいると、text-indent: -9999px; のため、なぜか画像までも画面から見えなくなってしまいます。

画像が背景に指定しtextを排除する手法ですので背景に指定している画像分のwidthの指定は必要かと思います。

サイトはありませんがお勧めの本です。

少し前の本になりますが「速習Webテクニック スタイルシート 上級レイアウト」に詳しくやり方が

書いています。amazonで検索してみてください。

ただ現在は「text-indent: -9999px;」などを利用した手法はUI的によろしくない為に

やらないのが支流です。

リストタグと画像を使ってする方法をおすすめします。

そちらの方が簡単ですし。




http://www.amazon.co.jp/

id:funnywalk_5

ありがとうございます。

もしかすると説明不足だったかもしれませんね。

リストタグ使ってます。

ul#gnavi li a{

display: block;

height: 27px;

width: ;(←問題箇所)

text-decoration: none;

text-indent: -9999px;

リストタグでもtext-indentでtextを排除する必要があるのでは?

それともメニューの文字はイメージではなく、テキストを使ったほうがいいという意味でしょうか。

#今日発見したのですが、このサイト、メニューが文字入りの画像でさらに不揃いですね。

http://weblogs.nikkeibp.jp/topics/2007/12/1210_ad20.html

2007/12/12 19:35:40
  • id:Redstock
    こんばんわ。
    >リストタグ使ってます。
    すいません、私の説明不足でした。
    私が言いたかったのはtextをtext-indent排除する手法は
    最近UI的に問題があるのでリストに直接画像を使い(背景では無くイメージとして)
    ナビゲーションを実現すると言う方法をお勧めしたかったのです。m(_ _)m

    ロールオーバーにa:hoverは使えませんが、JavaScriptでするのが最近の傾向なようです。


  • id:funnywalk_5
    Redstock様
    ありがとうございます。
    確かにテキストをtext-indent排除する手法は
    完全とは言えないようで
    問題も色々あるようですね。

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

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

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

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