質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

9009閲覧

htmlでクリックして展開する折りたたみメニューをつくりたい。

Tan3

総合スコア39

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2016/07/06 12:05

編集2022/01/12 10:55

こんにちは。
htmlでクリックで展開する折りたたみメニューを作りたいです。
さきにsvgで作ったものの中に追加したいのですがうまくいきません。

助けてください。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="description" content="若手俳優の共演まとめです。"> 6 <title>共演者まとめ</title> 7 <p>若手俳優がいつだれと共演したのかまとめました。</p> 8 <p><a href="ksts.html">くわしく</a> 9 </p> 10 11 12 <!-- 折り畳み展開ポインタ --> 13<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';"> 14<a style="cursor:pointer;">古いベース</a> 15</div> 16<!--// 折り畳み展開ポインタ --> 17 18<!-- 折り畳まれ部分 --> 19<div id="open" style="display:none;clear:both;"> 20 21<!--ここの部分が折りたたまれる&展開される部分になります。 22自由に記述してください。--> 23坂本さんは、加藤さんの使っていない古いベースをもらいました。 24</div> 25<!--// 折り畳まれ部分 --> 26 27 28 29<!-- 折り畳み展開ポインタ --> 30<class onclick="obj=document.getElementById('open active').style; obj.display=(obj.display=='none')?'block':'none';"> 31<a style="cursor:pointer;">手作りのウクレレ</a> 32</class> 33<!--// 折り畳み展開ポインタ --> 34 35<!-- 折り畳まれ部分 --> 36<class id="open active" style="display:none;clear:both;"> 37 38<!--ここの部分が折りたたまれる&展開される部分になります。 39自由に記述してください。--> 40加藤さんにもらったベースのお返しにウクレレをプレゼントする坂本さん。しかも、手作り。ちゃっかり自分の分も作っておそろいにしています。加藤さんに「そんなことに時間をつかっちゃだめだよ。」と言われる始末。 41</class> 42<!--// 折り畳まれ部分 --> 43 44 45 </head> 46 <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 47 48 y="0px" viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve"> 49 50<style type="text/css"> 51 52 .st0{fill:none;stroke:#666666;stroke-miterlimit:10;} 53 54 .st1{fill:#666666;} 55 56 .st2{font-family:'BanglaSangamMN';} 57 58 .st3{font-size:8.1604px;} 59 60 .st4{fill:none;} 61 62 .st5{fill:#4D4D4D;} 63 64 .st6{font-family:'KozGoPr6N-Regular-83pv-RKSJ-H';} 65 66 .st7{font-size:12px;} 67 68 .st8{letter-spacing:3;} 69 70 .st9{font-size:8px;} 71 72 .st10{font-size:9px;} 73 74</style> 75 76<polygon class="st0" points="446.6,195.5 474.4,244 446.6,292.5 391,292.5 363.2,244 391,195.5 "/> 77 78<polygon class="st0" points="437.6,212.5 456.3,244.5 437.6,276.5 400,276.5 381.3,244.5 400,212.5 "/> 79 80<polygon class="st0" points="530.2,147.5 558,195.5 530.2,243.5 474.6,243.5 446.8,195.5 474.6,147.5 "/> 81 82<polygon class="st0" points="222,88.5 238.4,117 222,145.5 189.2,145.5 172.8,117 189.2,88.5 "/> 83 84<polygon class="st0" points="799,85.5 815.4,114 799,142.5 766.2,142.5 749.8,114 766.2,85.5 "/> 85 86<polygon class="st0" points="173,116.5 189.4,145 173,173.5 140.2,173.5 123.8,145 140.2,116.5 "/> 87 88<text transform="matrix(1 0 0 1 383.8567 248.0538)" class="st1 st2 st3">Kazuki Kato</text> 89 90<text transform="matrix(1 0 0 1 454.2719 199.5001)" class="st1 st2 st3">Shogo Sakamoto</text> 91 92<rect x="502.4" y="311.7" class="st4" width="215.7" height="108.5"/> 93 94<text transform="matrix(1 0 0 1 502.4126 322.3104)"><tspan x="0" y="0" class="st5 st6 st7">テニスの王子様</tspan><tspan x="0" y="21" class="st5 st6 st7">4代目 越前リョーマ</tspan><tspan x="0" y="42" class="st5 st6 st7">200</tspan><tspan x="19.8" y="42" class="st5 st6 st7 st8">7年</tspan><tspan x="44.4" y="42" class="st5 st6 st7">1</tspan><tspan x="51.1" y="42" class="st5 st6 st7 st8">2月</tspan><tspan x="75.7" y="42" class="st5 st6 st7">1</tspan><tspan x="82.3" y="42" class="st5 st6 st7 st8">2</tspan><tspan x="91.9" y="42" class="st5 st6 st7">日〜200</tspan><tspan x="135.7" y="42" class="st5 st6 st7 st8">9年5月</tspan><tspan x="185" y="42" class="st5 st6 st7">1</tspan><tspan x="191.6" y="42" class="st5 st6 st7 st8">0</tspan><tspan x="201.2" y="42" class="st5 st6 st7"></tspan></text> 95 96<text transform="matrix(1 0 0 1 254.4953 365.9998)"><tspan x="0" y="0" class="st5 st6 st7">テニスの王子様</tspan><tspan x="0" y="21" class="st5 st6 st7">初代 跡部景吾</tspan><tspan x="0" y="42" class="st5 st6 st7">200</tspan><tspan x="19.8" y="42" class="st5 st6 st7 st8">5年8月8</tspan><tspan x="78.7" y="42" class="st5 st6 st7">日〜200</tspan><tspan x="122.5" y="42" class="st5 st6 st7 st8">8年</tspan><tspan x="147.1" y="42" class="st5 st6 st7">1</tspan><tspan x="153.7" y="42" class="st5 st6 st7 st8">1月3</tspan><tspan x="188" y="42" class="st5 st6 st7"></tspan></text> 97 98<line class="st0" x1="530.2" y1="243.5" x2="558" y2="291.5"/> 99 100<line class="st0" x1="362.8" y1="340.5" x2="390.6" y2="292.5"/> 101 102 103<text transform="matrix(1 0 0 1 177.8253 120.5999)" class="st6 st9"><a style="cursor:pointer;">古いベース</a></text> 104 105<class id="open active" style="display:none;clear:both;"> 106 107<!--ここの部分が折りたたまれる&展開される部分になります。 108自由に記述してください。--> 109加藤さんにもらったベースのお返しにウクレレをプレゼントする坂本さん。しかも、手作り。ちゃっかり自分の分も作っておそろいにしています。加藤さんに「そんなことに時間をつかっちゃだめだよ。」と言われる始末。 110</class> 111<!--// 折り畳まれ部分 --> 112 113<text transform="matrix(1 0 0 1 133.6138 140.1641)"><tspan x="0" y="0" class="st6 st9">手作りの</tspan><tspan x="0" y="14" class="st6 st9">ウクレレ</tspan></text> 114 115<text transform="matrix(1 0 0 1 765.614 116.1641)" class="st6 st9">黒執事</text> 116 117<g> 118 119 <polygon class="st0" points="733,151.5 749.4,180 733,208.5 700.2,208.5 683.8,180 700.2,151.5 "/> 120 121 <text transform="matrix(1 0 0 1 701.6917 182.4341)" class="st6 st10">1789</text> 122 123</g> 124 125</svg> 126 127 128 <body> 129 </body> 130</html> 131

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masaya_ohashi

2016/07/07 01:13

今のHTMLに突っ込みどころはたくさんありますが、まず確認したいのは具体的にあなたが描く「本当はこうなって欲しい動作」です。HTMLをコピーして私のPC上で動作したところ、上の方に表示されている「古いベース」や「手作りのウクレレ」という文字をクリックするときちんと文章の表示が増えました。なにがだめなんですか?
guest

回答1

0

2.5次元の俳優マッピングですか。面白いアイディアのサイトなのでがんばってほしいです。

さて、質問に答える前に、まずこのHTMLは書き方がめちゃくちゃです。
今はブラウザががんばってなんとか表示してくれているだけで、本当はエラーだらけです。
クリックしたら動くとか難しいことをやる前に、HTMLの書き方を直さないと今後もうまくいかないところがどんどん出てくると思います。

本題ですが、SVGの中にクリッカブルな要素を入れたいということであれば、SVGのルールで書く必要がありますね。
たとえばこの記事のように、SVGの中の要素にonClickを設定します。
http://qiita.com/imk2o/items/f60c9fe9c55cb48a8e8a

<class id="open active" style="display:none;clear:both;">

という書き方はHTMLでもSVGでもありえません。
idにスペースが入っているのもありえません。
(classを複数指定するときはこういう書き方もしますが…)

とにかく基本を勉強することです。

完成を楽しみにしています。

投稿2016/07/22 07:25

NatsumiOki

総合スコア1298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問