• ベストアンサー

WEBサイトのメニューバーを画像で作るのがいいのか、それともテキストと

yambejpの回答

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

画像: ・環境依存しにくく再現性がたかい ・任意のフォントが使えるのでデザイン性がたかい テキスト+CSS+画像: ・パーツの再利用ができるためデータ量がへる ・新しいメニューを作るときにデザイナーに頼まないで済む ・文書構造としてきちんとしているため階層メニューなど比較的つくりやすい

lovesms
質問者

お礼

ご回答ありがとうございます。 大変参考になりました。頑張ります。

関連するQ&A

  • WEBデザイン ナビゲーションメニュー 画像

    初歩的な質問失礼します。 最近?よく見かける、横並びのナビゲーションメニューバーがウィンドウ幅いっぱいに広がっているwebサイトのデザインについて教えていただきたいことがあります。 サイト全体がセンタリングされて、幅が固定されている横並びメニューバーは作れるのですが、 http://www.sapporoholdings.jp/ このサイトのようなナビゲーションバーを作りたいと思ったところ、自分なりに調べて幅を指定しない、などのレイアウト自体の理屈は理解しました。 しかしいざ作ろうと思ったときに画像の用意の仕方で戸惑ってしまいました。 上記のサイトのように、メニューのテキストを画像で表示させる場合、通常時の画像/マウスオーバーの画像はどのように用意するのが効率がいいでしょうか? メニュー全体の背景画像をrepeat-xでウインドウ幅いっぱいに繰り返し指定して、各メニューのテキスト(画像)と区切りのラインを透過画像で用意しているのでしょうか? 一番左と一番右のメニューだけに背景画像repeat-xを指定しているのでしょうか? 質問がわかりにくくてすいません、本当に知りたくて困っています。 ちなみに私の流れとしてはphotoshopを使用して、先にカンプを作ってから画像をスライスして作っています。 どなたかわかりやすく説明して頂けないでしょうか?? いろいろな方法があるのでしょうが、みなさんのおすすめを教えて頂きたいです。 どうかよろしくお願いします。

    • ベストアンサー
    • CSS
  • WEBサイトの背景に画像を付けたい

     今晩は、HTML初心者です、宜しくお願いします。  WEBサイトの背景に画像を付けたいのですが、そのサイトにテキストボックスとかがあると、背景 画像を付けることは出来ないのでしょうか。  何故かうまく表示されません、出来るとすれば何か、特別なやり方(HTMLの書き方)があるので しょうか。  宜しくお願いします。

    • ベストアンサー
    • HTML
  • 画像で背景透明のテキストがにじむのです

    こんにちは。 いつもお世話になります。 webのバーをイラストレーターCS3で作成してます。 別途、背景に模様の画像を配置しておるので ここは背景が透明のテキストだけの「画像」にしたいのですが gifで保存をいくら試しても文字がぎざぎざしてしまいます。 pngでも変わらず。 背景の画像が黒っぽいので、テキストは白で 0.5~1ほど黒の縁取りをしたりしても同じです。 画像にせずテキストのみのバーにしてもいいのですが デザイン上ちょっと避けたいのです。 なんとか解決策は無いでしょうか。 もしかしたらとんでもなく初歩的なことを聴いてて恥ずかしいのですが ちょっと急ぎで困ってます。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • アメブロ タイトル画像の下にメニューバーを設置したいです

    アメブロ タイトル画像の下にメニューバーを設置したいです 今HPを作っている関係でアメブロでブログを作っています。 CSSが全くの初心者ですが、いろんなサイトを参考に、それとなく理解はできるようになりました。 HPでCSSを使ってメニューバー(ロールオーバーのもの)を作ることができたので、同じメニューバーをアメブロにも使いたいと考えていますが、htmlが使えないということで、どうすればいいのかわかりません。 ちなみにHPは以下のサイトのページを参考にメニューバーを作りました。 http://www.stylish-style.com/csstec/basic/l-rollover6.html これをアメブロでタイトル画像下に設置するにはどうすればいいのでしょうか。 html部分をどう変えたらいいのかわかりません。 あと、それをどの部分に入力したらいいのかも教えていただけると助かります。 初歩的な質問・わかりにくい文章ですみません。 よろしくお願いします!

  • ポップアップのメニューバーの作り方

    メニューバーをポップアップで作成したいのですが、HTMLとCSSだけで作ること可能でしょうか。可能であれば、ソースや、おすすめの本、サイトなどをご教示お願いいたします。 作りたいメニューバーは、親メニューをマウスオーバーするとサブメニューがポップアップで表示されて、サブメニューをクリックするとリンク出来るメニューバーです。 ネットで検索したところ、ジェイクエリー モバイルや、JavaScrip を使用した方法は見つけたのですが、私は初心者で、HTMLとCSSしか知識がありません。 HTMLとCSSだけでは作成が難しい場合、他の方法(ジェイクエリー モバイルや、JavaScrip 等)で初心者でも出来そうなやり方(おすすめのやり方)があれば、ご教示お願いいたします。

    • ベストアンサー
    • CSS
  • アメブロ タイトル画像の下にメニューバーを設置したいです

    初めて質問させていただきます。 今HPを作っている関係でアメブロでブログを作っています。 CSSが全くの初心者ですが、いろんなサイトを参考に、それとなく理解はできるようになりました。 HPでCSSを使ってメニューバー(ロールオーバーのもの)を作ることができたので、同じメニューバーをアメブロにも使いたいと考えていますが、htmlが使えないということで、どうすればいいのかわかりません。 ちなみにHPは以下のサイトのページを参考にメニューバーを作りました。 http://www.stylish-style.com/csstec/basic/l-rollover6.html これをアメブロでタイトル画像下に設置するにはどうすればいいのでしょうか。 html部分をどう変えたらいいのかわかりません。 あと、それをどの部分に入力したらいいのかも教えていただけると助かります。 初歩的な質問・わかりにくい文章ですみません。 よろしくお願いします!

  • Spryでメニューバーを作成について

    自分はHP作成初心者です。 早速質問ですが、Spryでメニューバーを作成したとき メインのメニュー項目だけ、テキストの行揃えを中央にして サブメニューを左揃えにしたいです。 あと、メニューの文字がHTMLのではなくて 画像で作りたいのですが、メインのメニュー項目は 出来たのですが、サブメニューが出来ません。 SpryのCSSを編集すると思いますが、 どうしてもわかりません。 お分かりの方がいらっしゃいましたら 教えて下さい。 よろしくおねがいします。 http://www.goincase.com/ ↑のサイトみたいにしたいです。 私はOSがmacでDW CS4を使用しています。

  • スマートフォンでWebサイトの背景画像が縮小する

    お世話になります。 現在自社にて公開しているWebサイトがあるのですが、背景にはかなり大きめの一枚画像(2500×2500px)を使用しています。そのせいか、iPhoneやiPadなどのスマートフォン関連の端末で閲覧してみると背景だけ縮小して表示され、レイアウト的に少しおかしなことになります。 これは解決する方法はあるのでしょうか。ネットで少しだけ調べてみましたら、背景画像は大きな画像は使わず、小さな画像をrepeatして使用するようにということでした。 それで質問なのですが、スマートフォン向けの画像とCSSを別途用意して、スマートフォンなどで閲覧するユーザーだけにCSSを適用する、そういったことは可能なのでしょうか。 もし可能ならどのように記述すればいいのか教えていただけないでしょうか。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • CSSを編集して、ブログにメニューバーを取り付けようと思っているのです

    CSSを編集して、ブログにメニューバーを取り付けようと思っているのですがなかなか思うとおりにできません。 一応プレビューでは添付画像のように表示されます。 ですが、メニューバーがブログタイトルよりも上部にきてしまってますよね? あれをブログタイトル画像の下に持ってくる方法はないんでしょうか? それと、メニューバーはタイトル画像と同じ幅にしたいです。 ちなみにライブドアでブログをしてます。 質問が分かりにくくてすいません、、、   詳しい方よろしくおねがいします。

  • メニューのロールオーバーについて

    メニューボタンをロールオーバーさせようと思った時 現在の主流テクニックはどのような方法なのでしょう? 一時期cssで背景画像を変える方法が流行りましたが、 text-indent; -9999pxを使って文字を消すようなやり方は もう古い(意味がない)でしょうか。 素直に画像を埋め込んで使おうかなーとも思っています。 そうすると、Javascriptを使うやり方が無難でしょうか? cssを使うなら、ロールオーバーで、透明画像をかぶせるのもいいかな?とか考えていますが。 ご意見お聞かせくださいませ。

    • 締切済み
    • CSS