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

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

●質問者: funnywalk_5
●カテゴリ:ウェブ制作 学習・教育
✍キーワード:CSS スタイルシート テキスト 意図 画像
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Lu-such
●10ポイント

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

例えば

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

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



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

http://www.tagindex.com/

◎質問者からの返答

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

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


2 ● Redstock
●60ポイント

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

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

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

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

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

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

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

やらないのが支流です。

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

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




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

◎質問者からの返答

ありがとうございます。

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

リストタグ使ってます。

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

関連質問


●質問をもっと探す●



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