リンクタグの作り方

このQ&Aのポイント
  • リンクタグを使って、一つのリンクをクリックしたらさらに複数のリンクが表示される仕組みを作りたいです。
  • 具体的な例として、スカートをクリックしたらカジュアルスカートという項目が表示され、その下にさらにキッズ、ジュニア、シニアなどの項目が表示されるような仕組みです。
  • このようなリンクタグを作る方法を教えてください。
回答を見る
  • ベストアンサー

リンクから更に枝分かれしたリンクタグの作り方

一つのリンクタグをクリックしたら、更にいくつかのリンクが出てくるようにしたいのですが、どうしたらよいでしょうか。 例えば (1)スカート→ (2)カジュアルスカート         (キッズ)→クリック後、詳細ページへ         (ジュニア)→クリック後、詳細ページへ         (シニア)→クリック後、詳細ページへ イメージは↑こんな感じです。 (1)の「スカート」の文字をクリックしたら、その横に(2)の「カジュアルスカート」の項目が現れ、その下にドドっと(キッズ、ジュニア、シニア)などの項目が出てくる仕組みですね。 よくショッピングカートなどにある感じですが、ご理解いただけますでしょうか。 そういうリンクタグを作りたいのですが、どうすれば良いか教えて頂きたいです。 よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

javaScriptかCSSです。 最近はCSSが多いようです。javascriptを停止している訪問者や携帯端末などからも使える。 CSS プルダウンメニュー - Google 検索 ( http://www.google.co.jp/search?hl=ja&q=CSS+%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=lang_en%7Clang_ja&aq=f&oq= ) あたりで・・  なお、タグではなくCSS側でデザインします。

nyago11
質問者

お礼

ご回答ありがとうございます! プルダウンメニューっていうんですね。助かりました。 CSSは知識が追いつかずよくわからないので、javaで作ってみようかな・・・

関連するQ&A

  • javascriptでクリックしたリンクテキストを取得するには?

    javascriptを用いてクリックしたリンクのテキストを取得するにはどうすればいいでしょうか? ページ読み込み時(onload)にリンクにonClickイベントをつけてクリックしたときにurlなどを取得することはできるのですが、リンクテキストをどうしても取得できません。 ページ内のそれぞれのリンクタグにそれぞれ異なるid要素をつけられればよさそうなのですが。。。 ページ内のリンクタグにidがついていないことしてください。

  • 商品リンクが無い広告主のページへリンクした場合

    お世話になっております。 アフィリエイトASPにて商品リンクが無いプログラムがあります。 そのような広告で、ある特定のページへリンクしそこから購入に繋がった場合 報酬は発生するのでしょうか? やり方としては、自分のアフィリエイトサイトにて、広告をクリックしリンクしたいページに飛ばし そのページのURLでリンクタグを作成した場合といった感じです。 宜しくお願い致します。

  • リンクタグを使用するとアドレスが正しく入力されない

    Macintosh10.42 Safari2.01バージョン使用中です。 goo簡単ホームページを使ってホームページを作成しています。 (http://members.goo.ne.jp/) トップページにリンクタグ (<a target=_blank href=リンク先のアドレス>ページ名</a>のようなもの) を入力しています。 リンク先のアドレスには半角の~が含まれるのですが、 いくら半角で入力しても、あとで編集ページを見ると 全角の~に変わってしまっています。 また実際にアップされたページを見て、 リンクの部分をクリックすると アドレスが文字化けしてしまってNot Foundとなってしまいます。 (半角~の部分が%81`と文字化けしてしまっています。 文字化けしているのはその部分だけです。) うまく説明できなくて申し訳ないのですが、 どなたかどうすればきちんとリンクができるようになるか、 答えて頂けると幸いです。宜しくお願い致します。

  • ソースコード(リンクタグ)の修正&補正

    <a href="http://www.formpro.jp/form.php?fid=31544" target="_blank"><img src="お問い合わせ" border="0"></a> 上記コード(リンクタグ)をブログに貼ったら [x]・・・こんなタグが出来て失敗。 作りたいものは 『お問い合わせ』と言うタグを貼る。(しかもクリックすればhttp://www.formpro.jp/form.php?fid=31544 と言うページにアクセスする仕組み)でした。 質問:どう直せば良いでしょうか?

  • onMouseOverでリンクを作る方法は?

    onMouseOverを使って、特定のブロックをリンクボタンのように機能させる方法を教えて頂けませんでしょうか。 具体例は、ユニクロさんのショッピングカートです。 ユニクロさんのオンラインストアサイトでは、ほとんどのページでページの右上に小さなショッピングカートサマリーが表示されます。(トップページ以外) 【たとえば、このページ。(リンク先はユニクロさんの特集一覧)】 http://store.uniqlo.com/jp/store/feature/ このショッピングカートサマリーはareaStoreNaviというブロックで、 下層にCartArea01という要素を持ち、その要素内に「ショッピングカート」というテキスト文字で、カートの中身を表示するURLへリンクを貼っています。 このテキスト文字の上に、ショッピングカートサマリーの背景画像が上書き表示され、テキスト文字は通常は表示されません。 そしてショッピングカートサマリーの背景画像やその文字列にはリンクが貼られていません。 上位ブロックであるareaStoreNaviにOnMouseOverで、マウスオーバー時にCartArea01のリンク効果をareaStoreNaviブロックに適用しているのだと思うのですが、実際に自分の環境で記述する方法が分からないのです。 <DIV id=areaStoreNavi onMouseOver="cartArea('1');" onmouseout="cartArea('0');"> <DIV class=Cartarea01><A title=ショッピングカート href="http://store.uniqlo.com/jp/disp/CUCtViewCartLink.jsp">ショッピングカート</A></DIV> <DIV class=Cartarea02> <TABLE cellSpacing=0 cellPadding=0 width=114 border=0> <TBODY> <TR> <TD class=itemNum>0点</TD></TR> <TR> <TD class=itemPrice>¥0</TD></TR></TBODY></TABLE></DIV> どうして"cartArea('1');" なのでしょう? "cartArea01;" や"cartArea1;" でない理由がよく分からないのです。 「それは○○のルールにのっとっているんだよ」ということを教えて頂ければ、嬉しく思います。 皆さまのお力を貸して頂けませんでしょうか。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ショッピングカート

    自分はネットショップを作るのが初心者なのですが、印鑑のネットショップ作っている途中なのです、ショッピングカートをレンタルでと考えています。 商材が印鑑ということもありサイズとかいろいろ選択する項目とかが多いので注文詳細ページとかは自分で作ろうと思っています。 どのショッピングカートにいいのかわかりませんので、良いカートがあればお教えいただけると嬉しいです。 よろしくお願いします。

  • ワード2002で同一ファイル内にリンク張りたい

    エクセルで、シート1からシート2へリンクを張る方法は知っています。ワードで、1page目が目次で、続いて2~10page文まで書があるとします。1page目の各目次項目にリンクを張り、各pageに飛ぶ方法はあるのでしょうか。たとえば、目次にある「はじめに」という項目をクリックすると、2page目に飛び、「調査事項」という項目をクリックすると、4page目に飛ぶとか。

  • Amazonアソシエイト リンクアイコンについて

    Amazonアソシエイトを利用させてもらっています。 今回、自分のホームページでAmazon商品を紹介し、そのまま自分のサイトに設置したアイコンを押すことによって直接Amazonの「ショッピングカート」に商品を入れれるようにしたいと思い、試行錯誤しているのですが中々出来ません。 苦労してリンクを設置しても、思うようなアイコンでの設置が出来ないのです。 理想はブクログさんです。 ​http://booklog.jp/asin/4048682474​ ここの 「Amazon.co.jp詳細ページへ」 「Amazon.co.jpのカートに入れる」 の二つのアイコンを設置したいんですが、良い方法はあるでしょうか。 どうかよろしくおねがいします。

  • オンラインカタログ的に使えるCGI(無料か安価)を探しています。

    ネットで商品を売るわけではないのですが、 ネット上でショッピングカートのように商品を登録し、 一覧(サムネイルも)の中からさらにクリックすれば 詳細ページを表示できるような無料または安価なCGIを探しております。 思い描いているのはショッピングカートに決済機能が付いていない感じです。 ただ、機能的にはカートに入れるような感じで「資料を請求する」というようなものがあればと思っています。 希望に適うような、もしくは多少の改造(といってCGIにそれほど詳しくありませんが…)で 実現できるようなCGIはありますでしょうか? ご存知の方がおられましたら、アドバイスを頂けますでしょうか。 よろしくお願いします。

  • もしもショッピングをはじめました。商品詳細ページやカートページで、上部

    もしもショッピングをはじめました。商品詳細ページやカートページで、上部「トップ」をクリックすると、moshimarketのトップに行ってしまいます。自分のページに戻したいのですがどうすればいいのかわかりません。どなたか、ご存知の方いらっしゃいますか?よろしくお願い致します。