ベストアンサー フォトショップで作ったナビゲーションバーについて。 2010/12/06 12:46 以下の画像のようにフォトショップで作ったナビゲーションバーに、それぞれにリンクを設定する方法がまったくわかりません。css、javascript?を使うのですか?ざっくりとでいいので、どなたか教えてください。 画像を拡大する みんなの回答 (1) 専門家の回答 質問者が選んだベストアンサー ベストアンサー Hoyat ベストアンサー率52% (4897/9300) 2010/12/06 13:03 回答No.1 古典的ですが「イメージマップ」ですね。 やり方は下記をどうぞ。 http://www.tagindex.com/html_tag/img/img_map.html 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 カテゴリ パソコン・スマートフォンソフトウェアホームページ作成ソフト 関連するQ&A ナビゲーションバーについて HP作成(HTML+css)の超初心者です。 文法に四苦八苦しながらメモ帳で作っています。 なんとかナビゲーションバーを作成しましたが、これをテンプレートとしてhtmlファイルをいくつも作り、リンクさせていったのですが、ナビゲーションバーの項目を修正するときは、すべてのhtmlファイルをいちいち修正しないとダメなことがわかりました。 トップページのindexのナビゲーションバーを直せばすべて変更できるようにしたいのですが。方法がわかりません。 うまく説明できてないかもしれませんが、教えてください。 よろしくお願い致します。 画像を使ったナビゲーションバー 本を読んだりwebを検索したりしながら、足掛け10年以上HPを作っている素人です。 ナビゲーションバーについて質問なのですが、 今までマウスオーバーで画像が変わるナビゲーションバーを 1枚の画像を使用する方法で作っていました。 cssで通常時とロールオーバー時の画像の位置を指定し、 「text-indent: -9999px;」と記入して、テキストリンクは画面外に隠すような方法です。 でもなんとなくナビゲーションバーについて検索していたら 「text-indent: -9999px;」などの方法は隠しテキストにあたり、あまり良くないことを知りました。 通常時もマウスオーバー時も画像を使ってのナビゲーションバーにしたい場合 どのような方法が適当になるのでしょうか? ほとんどの検索結果では、テキストインデントにマイナスの値を振ったものが該当してしまい 解決策が見当たりません。 よろしくお願いいたします。 ナビゲーションバーの作り方について 今までは1コづつ単体でボタンを作り(イラストレーターで)ホームページビルダーに貼り付けてリンクを挿入してホームページを作成していましたが、ボタンを単体ではなくナビゲーションバーに作り変えたいのです。作業工程を教えてください。 ナビゲーションバーってもしかして素材を同じ色・大きさで作って並べてるだけ? 素材作成ソフトはフォトショップかイラストレーターです。そしてImage Readyも必要でしょうか?使ったことないですが、あります。 オンマウスでロールオーバーさせたりしたら分りやすい見だしになる と思うのですが・・・Image Readyで出来るのですか??? はてなマークばかりですいませんっ よろしくお願いします。 携帯料金を賢く見直す!格安SIMと端末選びのポイントは? OKWAVE コラム ナビゲーションバーが動かない? 以下のようなサイトをdreamweaverCS4で作りました。 http://www.geocities.jp/de_chirico_1911/navi_futyou 左側にメインのナビげーション、右側にサブナビゲーションを付けてナビゲーションの間の画像を入れ替えようとしています。 リンク自体は有効になるのですが、オンマウスで文字が光るようにしたはずなのに光らなくなっています。 ナビゲーションバー単独でアップロードすると光るので、ナビゲーションバーそのものに問題あるわけではなさそうです。 配置が悪いのでしょうか? 以前、ナビゲーションバーの右と左を入れ替えたものを作ったときは問題なく作動しました。 お分かりになる方、いらっしゃいましたら教えていただけませんか? DW8でのナビゲーションバーのテンプレート Dreamweaverでナビゲーションバー(の機能)を使ってナビゲーションバー(リンクボタンのほう)を作り、そのページをテンプレートにして、そこから各ページを作ります。 ページごとにダウン状態のボタンを変えたいのですが、ナビゲーションバーに編集可能領域を設定していても、変更が出来ません。 ナビゲーションバーを使ったものはhead部分にjavascriptを書き込む為、デザインビューでボタンの部分だけ編集可能にしても、head部分は編集可能にならないようです。 どうすればナビゲーションバーをテンプレートにしても編集できるようになるのでしょうか? htmlとフォトショップのフォントについて 初めてwebサイトを作成しているのですが、テキストの表示はCSSでsans-serifを指定しております。 そしてフォトショップで画像を作成しているのですが、一部だけ文字も作っています。 そのフォトショップでの文字は、CSSで指定したsans-serifと同じように、sans-serifを指定したかったのですが、ありませんでした。 そのため、フォトショップの文字にはMSPゴシックを指定したら、CSSで指定したsans-serifに近くなりましたが、やはり若干違います。 他のWebサイトを見ると、CSSで指定した文字と画像の文字が、ほとんど同じようなケースがあります。 私のような問題がある場合、どのようなフォントを指定すればCSSとフォトショップの文字は同じようになるのでしょうか? 宜しくお願い致します。 フォトショップ(7.0)・フォトショップ(5.0)について QNo.1981720 フォトショップが開きません!(至急) と、同様に 「普通に起動していたフォトショップ(7.0)が起動しません。」 症状も同じで、読み込みを始めるが途中で閉じてしまいます。 アンインストールと再インストールをやってみたのですが・・ 起動させる方法はありませんか? 緊急避難的に、フォトショップ(5.0)で作業をしていますが 画像をgif 形式で保存する方法が解りません。 こちらも、よろしくお願いいたします。 フォトショップ7を使用しています。 フォトショップ7を使用しています。 RGBの作業用スペースに一致しない埋め込まれたカラー・・・のメッセージが フォトショップに画像を入れたときに出る場合があります。 以前に設定を触ってから出てきました。 それまではドラックドロップですぐ画像が入りました。 どんな設定をすれば以前のようにすぐフォトショップに画像がでてきますでしょうか? フォトショップ6の使い方 フォトショップエレメンツ6を、”一週間でマスターするフォトショップエレメンツ6 for window 土屋 徳子著”を使って、練習中です。まだ初期段階なのですが、フォトショップを開いて一つ画像を選んで”回転”させる作業などをしようとすると、「見つからないファイルを探してます」と出て探し始め、最後に「見つからないファイルを再リンク」が出ます。ファイルを選んで再リンクをクリックしてもうまく行きません。何がいけないのでしょうか??初歩的な段階で、簡単な作業ができずに困っています。どなたかどうぞ教えて下さい。 ナビゲーションバーを配置すると隙間ができてしまいます・・ adobeのCS4シリーズのphotoshop,illustrator,fireworksのいずれかを使ってナビゲーションバーを作りたいと思っています。 今回、fireworksを使用して画像をボタン化、そしてアップ画像やダウン画像を作成、最後にアクティブ領域(ボタンと同じ大きさ)を指定してdreamweaverでdivタグの中に挿入しました。divはcssで横幅805に指定してあります。 ナビゲーションバーはボタンが6つ横並びにあり、横幅は全部で760です。 ナビゲーションバー単独でブラウザにて確認した際は隙間などなかったのですが、dreamweaverに挿入するとdivの横幅805を超えてナビゲーションバーのテーブルは900近くの幅で表示されています。 ボタンとボタンの隙間は1ピクセルずつに設定したはずが、20ピクセルほども空いています。 どこの設定を誤ったのか全く分からないので、こちらでご相談させていただきました。 解決法、おわかりの方いらっしゃいましたらお願いします。 ナビゲーションバーのダウンイメージで枠線が出るのを ナビゲーションバーでボタンを押した時に画像の周りに出る 点線の枠線を出なくしたいのですが対処方法を教えて頂けな いでしょうか。 ボタンが押されている間中ずっと出ているのが気になって嫌 なのです。 CSSとかで解決方法があるのでしょうか? フォトショップエレメントについて フォトショップエレメントを現在使用しているのですが以下のやり方がわかりません。 ・背景などを透明にする方法 ・画像の合成をすると違和感が出てしまうがその対処方法 よろしくおねがいします ヤバいパソコンが壊れたかも!?事前に知っておきたい3つの兆候と対策 OKWAVE コラム ホームページのナビゲーションバー お世話になります。 http://www.innovation-f.jp/ ↑のサイトのような、ナビゲーションバーを作りたいのですが 端までバーがのびていますが、どうすればできますでしょうか? また、メニューごとに窪んだラインが左右にありますが、どうやって作るのですか? htmlとcssはある程度、理解しているつもりです。 画像で作りたいです。 フォトショップの使い方について教えてください。 こんばんは。 今、フォトショップを使って画像を作っています。 ただ、できた画像をGIFで保存してその画像を HPの素材として使おうとすると画像の背景が 透明化されていなく画像が浮いてみえて困っています。 フォトショップで背景を透明化することは 可能なのでしょうか?教えてください。 jpg 開くと フォトショップが起動 vistaを使っています。 急にjpg画像を開こうとするとフォトショップが起動してフォトショップに画像が表示されるようになってしまいました。自分で設定をいじってしまったのかな~と思ったのですが、どうすればいいのか分かりません。 フォトショップが起動する前は普通にjpg画像をクリックするとwindowsのソフト?がひらいて 見ることができていました。 どこの設定をかえればいいでしょうか?よろしくお願いいたします。 フォトショップで全部作る? http://www.designwalker.com/2009/07/photoshop-scratch.html ↑にあるように、よく海外のチュートリアルサイトで フル・フォトショップのwebデザインというのをよく見かけます。 すごくステキで感動するのですが どれもフォトショップで完結していて、そこからどうやって htmlにしていくのかなぞです。 私がwebを作るときは 部分的な画像はフォトショでつくりますが それを配置程度で イラレでほとんどを作ります。 そしてスライスで画像だけ書きだして あとはdreamweaverで組み立てcssなど直接タグを書いたりして 作っています。 これらも常識すぎて書いてないだけで (自分が英語ちゃんと読めてないのもあると思うけど) 最終的には スライス→htmlを組み立てするのでしょうか。 それとも今の最新のフォトショップCS4とかは フォトショだけで全部できてしまうようになってるのでしょうか。 (ちなみに私はフォトショ7.0です) ずっと気になってます。 どなたか教えてください。 よろしくお願いします。 フォトショップCSについて、教えてください フォトショップ5.0では、アイコン表示は画像内容が表示されるのですが、CSにしたら、内容が表示されません。設定方法の仕方を教えてください。 フォトショップでの上手な切り抜き方は? フォトショップでペンツールとパスで画像の一部を切り抜くと 切り口がはっきりし過ぎて、如何にも切り抜きましたー・・と なってしまいます。何か良い方法があれば御享受 願います。 フォトショップの使い方 ビデオカメラとPC(NEC VLR)/ ,Windows Meとをiリンクでつないで「フォトショップ 5.0」で編集してみようと思うのですが、最初からわかりません。 まず、iリンクケーブルでつないでから、フォトショップを起動して、次からの作業について教えて下さい (恥ずかしながら取説不明のため)よろしくお願いします。 フォトショップって? 画像の保存形式を変えたくて検索していると、「フォトショップ」を使うという答えがありましたが、「フォトショップ」すらわかりません。何かソフトとかですか? 注目のQ&A 「You」や「I」が入った曲といえば? Part2 結婚について考えていない大学生の彼氏について 関東の方に聞きたいです 大阪万博について 駅の清涼飲料水自販機 不倫の慰謝料の請求について 新型コロナウイルスがもたらした功績について教えて 旧姓を使う理由。 回復メディアの保存方法 好きな人を諦める方法 小諸市(長野県)在住でスキーやスノボをする方の用具 カテゴリ パソコン・スマートフォン ソフトウェア Excel(エクセル)Word(ワード)PowerPoint(パワーポイント)Access(アクセス)その他MS Office製品オフィス系ソフトPhotoshop(フォトショップ)Illustrator(イラストレーター)その他Adobe製品画像・動画・音楽編集ホームページ作成ソフト筆まめ・はがき作成フリーウェア・フリーソフトその他(ソフトウェア) カテゴリ一覧を見る OKWAVE コラム 突然のトラブル?プリンター・メール・LINE編 携帯料金を賢く見直す!格安SIMと端末選びのポイントは? 友達って必要?友情って何だろう 大震災時の現実とは?私たちができる備え 「結婚相談所は恥ずかしい」は時代遅れ!負け組の誤解と出会いの掴み方 あなたにピッタリな商品が見つかる! OKWAVE セレクト コスメ化粧品 化粧水・クレンジングなど 健康食品・サプリ コンブチャなど バス用品 入浴剤・アミノ酸シャンプーなど スマホアプリ マッチングアプリなど ヘアケア 白髪染めヘアカラーなど インターネット回線 プロバイダ、光回線など