- ベストアンサー
オンクリックで文字が表示されるタグ【折りたためる】を探しています
オンクリックで文字が表示されるタグは、 文字が見えない段階でも場所をとるので悩んでいます。 オンクリックで文字が表示・非表示できるタグが紹介されているサイトはよくみかけるのですが、 文字が非表示の時に、折りたたんだ状態になっていてるタグが載っているサイトがありましたら教えてください。
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 ※余り詳しくはない者ですが^^; とりあえず、、、 「visibility='visible'」の部分を「display='block'」 「visibility='hidden'」の部分を「display='none'」 でいけるみたいですよ。 style="position:absolute;" でのサンプルをば。 ※↑単独で使用することのない属性になります。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <html> <head> <style type="text/css"> <!-- #moji2 {position:absolute;left:0.6em;top:2em; /* em:Firefoxではずれる */ background-color:pink; /* 見やすいように設定 */ z-index:1;} /*-値:Firefox非対応*/ --> </style> </head> <body> <!--質問者さまのコードここから--> <span onClick="document.all.item('moji2').style.visibility='visible'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> <!--ここまで--> <br> てすと<!--動作確認の為に入れた文字列--> </body> </html> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ※IE7、Sleipnir1.66で動作確認済。 ※position指定をすると、全体のレイアウト指定の見直し（レイヤー指定？）が必要になってくると思います。 ※「z-index:1」はなくてOKなのですが、値を-1にしてみると違いがわかると思います。 （但し、firefoxは非対応のようです。） http://www.tohoho-web.com/css/reference.htm#Visual http://www.htmq.com/style/position.shtml
その他の回答 (2)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
visibilityでhiddenしたんじゃ、空間が開くのは当然です。見えないだけで あるんだから。 見えないだけじゃなくて存在しないかのようにさせたいなら、visibilityじゃ なくてdisplayでnoneにしましょう。ただし、document.all.item()というの は方言なので、document.getElementById()を使うのがいいですよ。
- fake-tang
- ベストアンサー率24% (186/772)
>文字が見えない段階でも場所をとる 隠したほうのタグに style="position:absolute;" を入れてもダメ でしたか？ どうやって非表示にしているのかわかりませんが、文字列をタグで んで style="display:none;" とし、Javascrptで none と block を 入れ替えるのでもダメでしたか？ onmouseover ですが、ここで position と visibility をいじるタイプの 折りたたみナビゲーションを利用しています。 http://blog.3d6.moo.jp/
関連するQ&A
- オンクリックで続けて画像を表示するには
<img src="*" onClick="this.src='*'"> このタグだと2枚までしか表示されません。 2枚目以降からもオンクリックで、画像を表示させる方法はありますか？
- ベストアンサー
- HTML
- 横に並べて表示したい。
＜span onclick="expand(chip1);" style="cursor:hand;"＞ここは文字 ＜/span＞ 上記のタグを、横にふたつ並べて表示したいのですが可能でしょうか。 これは下に（オンクリックで表示される）文字が続くため、＜br＞タグを入れなければいいというものでもないですし・・・。
- 締切済み
- HTML
- あるタグについて質問します
タグについて質問します。。 ブログを書いているのでが あるサイトで見つけたもので タグをコピーして使えるものなのですが オンクリックと言ってクリックしたら文字や画像が 出るものです。。。 ↓このタグです <span onClick="document.all.item('moji1').style.visibility='visible'"> クリックする文字 </span> <div ID="moji1" style="visibility:hidden;"> 表示される文字 </div> 私はタグは素人なので解らないのですが このタグをブログの記事に書いてみて このタグを１つ使って書いた場合、 きちんとクリックしたら反応して文字が出てくるのですが 同じ記事内にこのタグを２つ使うとクリックしても 文字がでてこなくなって反応しません。。。 また同じ記事内では反応しないのかと思って １つの記事に１つずつ使おうと今度は 記事を二つに分けて使おうとしたら さっきまでクリックしたら反応していた一つ目の記事まで クリックに反応しなくなります。 そして２つ目の記事を削除したら また元のように１つ目の記事がクリックに反応してくれます。 もしかして、このタグになにかプラスする事によって きちんとクリックしても使えるようにならないでしょうか？ 同じ記事内でも、あるいは１つの記事に１つずつでもいいので あれば教えてもらえたら嬉しいです。。。 また、このタグでは１つ以上は無理なのでしたら 記事内に１つずつでもよいので他によいタグがあれば 教えていただけたら嬉しいです。。。 よろしくお願い致します
- ベストアンサー
- HTML
- Mac(Safari)で無効なHTMLタグ？？
http://copicopi.com/onmousefont.html ↑こちらで紹介されていたHTMLタグの「オンマウス文字」を 会社のHPに使用したのですが、 ウインドウズ(Internet Explorer)では、 正しくマウスオンすると作動しましたが 社内のマックで同様の画面を確認したところ、 マウスオンしても作動しません。 上記のタグ説明されているHPもマック(Safari)でみると、 オンマウス文字は正しく作動しないので、 マックではこのタグ使えないのでしょうか？ マックにもウインドウズでも作動する、 オンマウス文字やオンクリック文字などの タグがあれば紹介してください。お願いいたします。 《今回使用したオンマウス文字のタグです↓》 <span onmouseover="document.all.item('moji1').style.visibility='visible'"> この文字にマウスをのせて下さい♪ </span> <div ID="moji1" style="visibility:hidden;"> 表示される文字 </div>
- 締切済み
- HTML
- CSV内のhtmlタグを文字のママ表示したい
CSVデータのhtmlタグ（URLリンクタグ）をタグとして認識させずに、文字としてそのままメールに表示させたいです。 html等、初心者です。 詳しく説明すると、thunderbirdのmailmargeでCSVを読み込むと、 タグがタグとして表示されて下書きに保存及び送信されてしまいます。 読み込むCSV例 "mail","name"url”, "mail@aaa.ne.jp","はなこ"<A Href='http://www.aaa.com'>はなこのサイト</A>”, 上記をtunderbirdのmailmargeで読み込むと、 <A Href='http://www.aaa.com'>はなこのサイト</A>の部分が、 htmlタグとなって表示されてしまいます。 テキスト形式はプレーンにしています。 これを文字のままそのまま表示させたいのです。 ご教授お願いします。 OS MAC OS X 10.8.2 thnderbird 16.0.2 mailmarge 3.4.0 仕様的にしょうがないのかもしれませんが、 別の方法があれば教えていただきたいです。 仕事で緊急なのでできるだけ早く教えていただけると幸いです。 宜しくお願いします。
- 締切済み
- HTML
- 説明書きに表示される文字は、どのタグに書けばいいの
ネットで検索したときに、説明書きに表示される文字は、どのタグに書けばいいのでしょうか？ たとえば「東京」をヤフーで検索したときに、 「東京都庁の公式ホームページ。都政に関する最新情報、の放送、都議会や各局の情報 、統計、入札・契約情報、知事への提言など。」 と書いてありますが、検索時にこのように文字を表示するには、どうすればいいですか？
- 締切済み
- SEO
- タグは大文字と小文字どちらが良い？
いつも http://www.tagindex.com/hp_guide/title/01.html こちらのサイトを参考にさせていただいているのですが、 全て大文字になっています。 タグは大文字のほうが良いのでしょうか？
- ベストアンサー
- HTML
- ｈ１タグ 文字が大きくて目立ちすぎる
SEO対策の為にH1タグにサイトの説明を入れてるのですが 文字が大きすぎて目立ちすぎます。 ｈ１タグの文字を小さくしたいのですがどうすればいいのでしょうか？ 他の文字を小さくする方法と同じですか？
- ベストアンサー
- HTML
補足
回答ありがとうございます。 どこに上記のタグを入れれば良いのか教えていただけませんか。 タグは以下の通りです。 <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div>