• 締切済み

グローバルナビゲーション

初心者です<(_ _)> 趣味でやってる自分のサイトのコンテンツ増加に伴って、グローバルナビゲーションを作りたいのですが、皆さんはどうやって作ってますか? ↓このようなものを自分で作りたいのですが、中々うまくいきません・・・ http://css-happylife.com/template/07/ 作り方の”コツ”を伝授して頂ける方いませんか? 仕事と趣味で写真をよく撮るのので、フォトショップのCS3なら持ってます。

みんなの回答

  • meenie
  • ベストアンサー率44% (40/90)
回答No.1

リンク先のページを拝見しましたが、 慣れていない方が使うには少しわかりにくい方法で作られています。 見栄えはもちろん大切だと思いますが、 まずは機能するというところから始めてみてはいかがでしょうか。 単純に、以下のようなHTMLからスタートしてもよいと思います。 <div id="globalNavigation"> |<a href="hoge.html">Top</a>|<a href="fuga.html">Photo</a>|<a href="moge.html">Link</a>| </div> まずはこのような単純な例をベースにして、  ・<a>タグの中身に画像を使用する  ・cssスタイルを適用する といった具合に段階を追っていくことをお勧めします。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • ナビゲーションのデザイン

    http://www.seoaa.com/ のナビゲーションの ような 丸の集合体できた三角はどのように作るんで しょうか? フォトショップCS3

  • Adobe Photoshop cs4とIllustrator cs4

    現在Adobe Photoshop cs4を所有しております。 デジタル一眼レフ加工のために購入しましたが、趣味でwebサイトも開設してるので、その素材作りにも大きく利用価値があると知って、いまではグラデのバナーなども製作できるようになりました。 ところで最近はコンテンツも増えて充実してきたのでこれを機にリニューアルを計画してます。 そそこでますwebサイトにグローバルナビを付けたいのですが、デザイン的には下記サイトのようなものを自分で作成してみたいと思っております。 こういうのはAdobe Photoshop cs4ではなくIllustrator cs4のようが作りやすいのでしょうか? http://css-happylife.com/template/07/ またIllustrator cs4はweb製作に関して、どのような場面で出てくることが多いですか? ご意見をお聞かせください。

  • ホームページのリンクメニュー

    HPのリンクメニューにナビゲーションを利用している例をよく見かけますが、みなさんはどのように作ってるのでしょうか。 具体的な例としては下記URLのようなものですが、JAVAを使用せずにCSSだけでデザインできる利点もあるようです。 使用例「グローバルナビゲーションのロールオーバーをJavaScriptを使わず、CSSのみで実現する」 ​http://css-happylife.com/template/07/​ ​http://blogimg.goo.ne.jp/user_image/5e/43/9620a56f8595f82e251d8c79b...​ 現在までは各リンクボタンを一枚一枚作成して、それをマウスを当てたときに色違いになるようにJAVAを利用しておりました。 それが一枚で済む利点は興味深いものがあったので自分で作ろうと思ったんですが、これだけ升目があると縦横の仕切り線や文字の位置にばらつきができてしまいましてうまく作れません。 しかも格段が色違いになっており、どうやってアレンジしていいのかさっぱりわかりません・・・ 一応父親のPCにAdobe Photoshop CS3が入ってるので、これを借りて試行錯誤しながら作ってみましたが、一週間考えてもダメでした。 何かいいアドバイスお願いします!

  • 特定のページだけ左に数ミリずれるのですが、どのような原因が考えられますか?

    http://css-happylife.com/template/11/ こちらのサイトのサンプルのようにズレます。 全てのブライザでズレます。 対処法をご存知でしたら教えてください。

  • ヘッダーの高さを広げたが、コンテンツ部がずれない

    アメブロの無料テンプレートを入手しました。 ヘッダー画像の高さを広げましたので、その分、コンテンツ部を下にずらしたいのです。 しかし、コンテンツ部の位置がなぜかずれません。 ヘッダー メニュー(ナビゲーション) コンテンツ という構成です。 ヘッダーとメニュー(ナビゲーション)に position:absolute; が使われており、ヘッダーとメニューは自由にずらすことができます。 cssはある程度わかりますので、cssのサンプル等あると助かります。

    • ベストアンサー
    • CSS
  • 【CSS/HTML】ナビゲーションメニューについて

    【CSS/HTML】ナビゲーションメニューについて http://pegoring.blog108.fc2.com/ ・ボタンたちをコンテンツの幅に合わせる方法(左並びからセンタリングへ)を教えてください。 ・ボタンにカーソルを合したとき(hover)にそのカーソルを合したときの高さと背景の高さが合いません。 ・そのコンテンツの時にボタンの要素(色や背景など)を変更する方法を教えてください。(たとえば、Homeならチプページにいるときだけ、そのボタンだけ背景を変えるなど) →Javascriptになるとおもいます。javascriptに詳しい方、こっちも教えていただけると幸いですorz。 画像を横幅いっぱいにrepeatさせて、中央にコンテンツを置くようにしたいんです。 オレンジの背景が横いっぱいに最後まで続き、ボタンはコンテンツの幅に揃えたいんです。 とにかく、リンクから実際に見てもらえば言いたいことのおおよそはつかんでいただけると思います。

  • ホームページ用写真の加工

    フォトショップCSを持っています。 写真のまわり(縁)に黒く細い線を入れたいのですがやり方がわかりません。 どなたか教えてください。 例ですがここのホームページの写真のようにです。 http://www.alltacklesportfishing.com/

  • jcueryのスライドするナビゲーションについて2

    「jcueryのスライドするナビゲーションについて」下記ページにて質問させてもらったものです。 http://okwave.jp/qa/q6830580.html 横スクロールサイトでスライドナビゲーションを使用しており 同じページ内の各コンテンツに移動した際にスライドも停止させるというのを 回答者さまのご回答どおり、以下のjsで実現することができました。 $(function() { var $el, leftPos, newWidth, $mainNav = $("#example-one"); $mainNav.append("<li id='magic-line'></li>"); var $magicLine = $("#magic-line"); $("li a", $mainNav).click(function(){  $magicLine   .data("origLeft", $(this).position().left)   .data("origWidth", $(this).parent("li").width())   .stop().animate({    left: $magicLine.data("origLeft"),    width: $magicLine.data("origWidth")   }); }); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); }); }); ただまた一つ問題に気づいてしまったので質問させてください。 ナビゲーションのボタンクリック後にスライドはうまく動作するのですが、 更新ボタンを押すとページは、移動後のコンテンツのままで スライドがまたTOPに戻ってしまいます。 更新ボタンをおしてもナビゲーションを表示しているページに合わせてストップさせるか または、コンテンツもTOPに戻すかどちらかの方法で対処できたらと思っています。 どなたかお分かりの方がおられましたらお教え頂いても宜しいでしょうか。 どうぞ宜しくお願いいたします。 デモはこちらになります。 http://css-tricks.com/examples/MagicLine/

  • フォトショップファイルをイラストレータに配置する際

    フォトショップしか使えませんが、印刷所がイラストレーターファイルで入稿せよとのこと。フォトショップのPSDファイルを、イラストレーターファイルに「配置」する方法を以前ここで伝授されました。 詳細をお伺いしたいのですが、まずは配置する際、 リンク テンプレート 置き換え のチェック欄は、すべてチェックしたほうが良いでしょうか? 配置後、イラストレータファイルを保存する際 PDF互換ファイルを作成 配置した画像を含む ICCプロファイルを埋め込む 圧縮を使用 のチェック欄はどうしたら良いでしょうか? ちなみに、レイヤーを統合したPSDファイルを、配置しようとすると、いつも「フォトショップ形式のファイルを読み込めません」と出ます。2つのフォトショップがありますが、どちらで作ったものでも、レイヤー統合したものはそうなります。 ウィンドウズ7 32 Ultimate イラストレーターCS2 フォトショップCS2 フォトショップ6.0 ご教示よろしくお願いします!!

  • フォトショップで全部作る?

    http://www.designwalker.com/2009/07/photoshop-scratch.html ↑にあるように、よく海外のチュートリアルサイトで フル・フォトショップのwebデザインというのをよく見かけます。 すごくステキで感動するのですが どれもフォトショップで完結していて、そこからどうやって htmlにしていくのかなぞです。 私がwebを作るときは 部分的な画像はフォトショでつくりますが それを配置程度で イラレでほとんどを作ります。 そしてスライスで画像だけ書きだして あとはdreamweaverで組み立てcssなど直接タグを書いたりして 作っています。 これらも常識すぎて書いてないだけで (自分が英語ちゃんと読めてないのもあると思うけど) 最終的には スライス→htmlを組み立てするのでしょうか。 それとも今の最新のフォトショップCS4とかは フォトショだけで全部できてしまうようになってるのでしょうか。 (ちなみに私はフォトショ7.0です) ずっと気になってます。 どなたか教えてください。 よろしくお願いします。

    • 締切済み
    • CSS
このQ&Aのポイント
  • ハイプリに登録できない問題や製品認証のトラブルが発生しています。かんたん設置ガイドに沿ってインストールを完了し、印刷品質チェックシートも正常に印刷されたが、ハイプリ登録時に「本機がサーバーに未接続です。」の表示が出て登録できない。また、ブラザーが指定しているアプリから製品認証する際にボタン操作が反応しないという問題も発生している。ドライバーの再インストールを試しても同じ不具合が続いています。
  • お使いの環境はWindows10からWindows11へアップグレードした機種であり、パソコンとは無線LANで接続されています。関連するソフト・アプリとしては、プラザー指定のドライバやアプリが使用されています。電話回線はドコモ光回線です。
  • ブラザーのDCP-J1200Nに関して、ハイプリに登録できない問題や製品認証のトラブルが発生しています。問題の解決方法をご教示いただきたいです。
回答を見る