締切済み

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

2008/09/03 03:04

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

ayakapon
お礼率40% (38/94)

HTML
回答数1
ありがとう数1

回答全件

リンク先のページを拝見しましたが、慣れていない方が使うには少しわか…

2008/09/03 08:41

みんなの回答 （1）
専門家の回答

みんなの回答

meenie
ベストアンサー率44% (40/90)

2008/09/03 08:41 回答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製作に関して、どのような場面で出てくることが多いですか？ご意見をお聞かせください。
- ベストアンサー
- グラフィックソフト
ホームページのリンクメニュー
ＨＰのリンクメニューにナビゲーションを利用している例をよく見かけますが、みなさんはどのように作ってるのでしょうか。具体的な例としては下記ＵＲＬのようなものですが、ＪＡＶＡを使用せずにＣＳＳだけでデザインできる利点もあるようです。使用例「グローバルナビゲーションのロールオーバーをJavaScriptを使わず、CSSのみで実現する」 http://css-happylife.com/template/07/ http://blogimg.goo.ne.jp/user_image/5e/43/9620a56f8595f82e251d8c79b... 現在までは各リンクボタンを一枚一枚作成して、それをマウスを当てたときに色違いになるようにＪＡＶＡを利用しておりました。それが一枚で済む利点は興味深いものがあったので自分で作ろうと思ったんですが、これだけ升目があると縦横の仕切り線や文字の位置にばらつきができてしまいましてうまく作れません。しかも格段が色違いになっており、どうやってアレンジしていいのかさっぱりわかりません・・・一応父親のＰＣにAdobe Photoshop CS3が入ってるので、これを借りて試行錯誤しながら作ってみましたが、一週間考えてもダメでした。何かいいアドバイスお願いします！
- 締切済み
- ホームページ作成ソフト
特定のページだけ左に数ミリずれるのですが、どのような原因が考えられますか？
http://css-happylife.com/template/11/ こちらのサイトのサンプルのようにズレます。全てのブライザでズレます。対処法をご存知でしたら教えてください。
- 締切済み
- HTML
ヘッダーの高さを広げたが、コンテンツ部がずれない
アメブロの無料テンプレートを入手しました。ヘッダー画像の高さを広げましたので、その分、コンテンツ部を下にずらしたいのです。しかし、コンテンツ部の位置がなぜかずれません。ヘッダーメニュー(ナビゲーション) コンテンツという構成です。ヘッダーとメニュー(ナビゲーション)に position:absolute; が使われており、ヘッダーとメニューは自由にずらすことができます。 cssはある程度わかりますので、cssのサンプル等あると助かります。
- ベストアンサー
- CSS
【CSS/HTML】ナビゲーションメニューについて
【CSS/HTML】ナビゲーションメニューについて http://pegoring.blog108.fc2.com/ ・ボタンたちをコンテンツの幅に合わせる方法（左並びからセンタリングへ）を教えてください。・ボタンにカーソルを合したとき（hover)にそのカーソルを合したときの高さと背景の高さが合いません。・そのコンテンツの時にボタンの要素（色や背景など）を変更する方法を教えてください。（たとえば、Homeならチプページにいるときだけ、そのボタンだけ背景を変えるなど） →Javascriptになるとおもいます。javascriptに詳しい方、こっちも教えていただけると幸いですorz。画像を横幅いっぱいにrepeatさせて、中央にコンテンツを置くようにしたいんです。オレンジの背景が横いっぱいに最後まで続き、ボタンはコンテンツの幅に揃えたいんです。とにかく、リンクから実際に見てもらえば言いたいことのおおよそはつかんでいただけると思います。
- 締切済み
- HTML
ホームページ用写真の加工
フォトショップＣＳを持っています。写真のまわり（縁）に黒く細い線を入れたいのですがやり方がわかりません。どなたか教えてください。例ですがここのホームページの写真のようにです。 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/
- ベストアンサー
- JavaScript
フォトショップファイルをイラストレータに配置する際
フォトショップしか使えませんが、印刷所がイラストレーターファイルで入稿せよとのこと。フォトショップのPSDファイルを、イラストレーターファイルに「配置」する方法を以前ここで伝授されました。詳細をお伺いしたいのですが、まずは配置する際、リンクテンプレート置き換えのチェック欄は、すべてチェックしたほうが良いでしょうか？配置後、イラストレータファイルを保存する際 PDF互換ファイルを作成配置した画像を含む ICCプロファイルを埋め込む圧縮を使用のチェック欄はどうしたら良いでしょうか？ちなみに、レイヤーを統合したPSDファイルを、配置しようとすると、いつも「フォトショップ形式のファイルを読み込めません」と出ます。２つのフォトショップがありますが、どちらで作ったものでも、レイヤー統合したものはそうなります。ウィンドウズ７　３２　Ultimate イラストレーターCS2 フォトショップCS2 フォトショップ６．０ご教示よろしくお願いします！！
- ベストアンサー
- 画像・動画・音楽編集
フォトショップで全部作る？
http://www.designwalker.com/2009/07/photoshop-scratch.html ↑にあるように、よく海外のチュートリアルサイトでフル・フォトショップのwebデザインというのをよく見かけます。すごくステキで感動するのですがどれもフォトショップで完結していて、そこからどうやって htmlにしていくのかなぞです。私がwebを作るときは部分的な画像はフォトショでつくりますがそれを配置程度でイラレでほとんどを作ります。そしてスライスで画像だけ書きだしてあとはdreamweaverで組み立てcssなど直接タグを書いたりして作っています。これらも常識すぎて書いてないだけで（自分が英語ちゃんと読めてないのもあると思うけど）最終的にはスライス→htmlを組み立てするのでしょうか。それとも今の最新のフォトショップCS４とかはフォトショだけで全部できてしまうようになってるのでしょうか。（ちなみに私はフォトショ7.0です）ずっと気になってます。どなたか教えてください。よろしくお願いします。
- 締切済み
- CSS