オンクリックで文字が表示されるタグは、
文字が見えない段階でも場所をとるので悩んでいます。

オンクリックで文字が表示・非表示できるタグが紹介されているサイトはよくみかけるのですが、
文字が非表示の時に、折りたたんだ状態になっていてるタグが載っているサイトがありましたら教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (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
    • good
    • 0

visibilityでhiddenしたんじゃ、空間が開くのは当然です。

見えないだけで
あるんだから。

見えないだけじゃなくて存在しないかのようにさせたいなら、visibilityじゃ
なくてdisplayでnoneにしましょう。ただし、document.all.item()というの
は方言なので、document.getElementById()を使うのがいいですよ。
    • good
    • 0

>文字が見えない段階でも場所をとる


隠したほうのタグに style="position:absolute;" を入れてもダメ
でしたか?

どうやって非表示にしているのかわかりませんが、文字列をタグで
んで style="display:none;" とし、Javascrptで none と block を
入れ替えるのでもダメでしたか?

onmouseover ですが、ここで position と visibility をいじるタイプの
折りたたみナビゲーションを利用しています。
http://blog.3d6.moo.jp/

この回答への補足

回答ありがとうございます。
どこに上記のタグを入れれば良いのか教えていただけませんか。
タグは以下の通りです。
<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>

補足日時:2007/07/08 07:42
    • good
    • 0

このQ&Aに関連する人気のQ&A

このQ&Aと関連する良く見られている質問

QCSSで菱形の画像サムネイルを表示し、クリックで元画像を表示させたい

タイトル通りです。
ギャラリーホームページを作っています。
菱形のサムネイルを並べ、クリックしたら元の画像が表示されるようにしたいと思っています。
jQuery?を使えるのが一番なのですが、うまく適用せず、よく分かりませんでした。
CSSでタイトルのような事をするためには、どのようにすればいいでしょうか?

Aベストアンサー

html
<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
</ul>

css
li{
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
transform: rotate(45deg);
margin: 40px;
float: left;
}
li img{
position: absolute;
width: 250px;
height: 250px;
transform: rotate(-45deg) translate(0%, -120%);
left: 100%;
top: 100%;
}

親で正方形を45度傾けたマスクを作り
imgで傾いちゃった画像を元に戻し、
rotate(-45deg)
適当な位置に調整しています。
translate(0%, -120%);
left: 100%;
top: 100%;
クリックすれば、リンクに張られたURLが開きます。

html
<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a><...続きを読む

QWEBで地図を表示、クリックでルートと画像を表示、そのまま印刷したい

地図を作成しています。

「(例)ルートを見る」をクリックすると、駅から目的地までのルートの線を表示および、各所の画像を合わせて表示し、そのルートと画像を表示させたまま印刷まで出来るようにしたいです。
イメージ的には Google Map の「ルート表示」に画像も表示させる感じです。

補足ですが(回答に影響するのかどうか分かりませんが)、ルートは2パターンあり、最終的には
・ルートと画像は無い(地図のみ)
・ルート1 + ルート1の画像
・ルート2 + ルート2の画像
・両方のルート(+画像)表示
の4パターンになります。

どのような方法がありますでしょうか。
クリックで画像を表示する方法はわかるのですが、表示させたまま印刷まで出来るようにする方法が分かりません。
方法も然ることながら、その方法を探す検索ワードでも結構です。
ご教授頂けますと幸いです。

Aベストアンサー

こんにちは

表示する内容は固定のようですので、あらかじめ必要な分をレイヤー分けして準備し、状況に応じて表示/非表示を制御するのが一番簡単だと思います。

例として(添付図参照)
1)ブロック要素を3個用意します。
 (わかり易さのため、みな同じサイズとしておきます)
2)それぞれを仮に「地図レイヤ」、「ルートレイヤ」、「画像レイヤ」とし、
  必要なパーツで構成したものとして作成しておきます。
3)これらのレイヤ(ブロック)をposition:absolute等で
  重ねて表示します。

※ それぞれのレイヤは、個別のパーツをレイアウトして作成しても良いですし、面倒なら1枚の画像にしておいても良いでしょう。(画像の場合は、背景を透明にしておく必要があります)

ここまでできれば、あとは必要に応じて各レイヤの表示/非表示の制御をするだけでよいということはすでにおわかりと思います。

>クリックで画像を表示する方法はわかるのですが~
とのことですので、このあたりの説明は省略します。

表示した状態で、印刷すればそのまま印刷できるはずです。
また、印刷用のCSSを別に設けておいて、画面の状態とは関係なく必ず全部を印刷するようなことも可能ですね。(クラス名などで画面表示だけを非表示にするとか)

こんにちは

表示する内容は固定のようですので、あらかじめ必要な分をレイヤー分けして準備し、状況に応じて表示/非表示を制御するのが一番簡単だと思います。

例として(添付図参照)
1)ブロック要素を3個用意します。
 (わかり易さのため、みな同じサイズとしておきます)
2)それぞれを仮に「地図レイヤ」、「ルートレイヤ」、「画像レイヤ」とし、
  必要なパーツで構成したものとして作成しておきます。
3)これらのレイヤ(ブロック)をposition:absolute等で
  重ねて表示します。

※ それぞれのレ...続きを読む

QHTMLにsvg画像表示したら小さかったので、タグ一杯に要素を拡大したい

■やりたいこと
・HTMLにsvg画像を大きく表示したい


■現状
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800">
<path d="M …


■困っていること
・<svg>範囲のサイズを拡大することは出来るが、<path>範囲を拡大することが出来ないので、svg画像を大きく表示することが出来ない


■知りたいこと
・<svg>サイズ一杯に<path>範囲を拡大するにはどうすればよいでしょうか?
・<path>全体のサイズ指定はどこで実施?

Aベストアンサー

描画する内容にもよってくるかもしれませんが、
http://d.hatena.ne.jp/rikuo/20141203

とか参考になるかもしれませんね。
実際のファイルも置いて下さっているので、
中身を比較してみれば大きさの変更部分も記載があるかと…(・_・)

Q文字をボックスで囲うことができるタグは?

<p>今日は<a>晴れ</a>です</p>

上記<a>タグに、以下のstyleを適用すると晴れをボックスで囲うことができます。

a {
 display: inline-block;
 background: #aaa;
}

しかし<a>タグはリンク目的で利用します。
<a>タグではなくても<p>~</p>の中で利用できて文字をボックスで囲うことができるタグって他にあるのでしょうか?

どうぞよろしくお願い致します。

Aベストアンサー

>文字をボックスで囲うことができるタグは?
 とてもとても大事なところを誤解されている。今後の成長のためにぜひとも身につけておいてください。
 HTMLは文書構造、スタイルシートはそのプレゼンテーションを指定します。
『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』
 と言われます。
 すなわち、
<p>今日は<a href="#hare">晴れ</a>です</p>
 とは、#Hareで示されているところにリンクするアンカーが、「今日は・・・す」という段落内にあるというマークアップです。どのように表示するかはHTMLにはまったく無関係です。
★それが、段落の前後で改行され余白が取られ、a要素にアンダーラインが引かれも辞職が変わるのは、ブラウザがもつスタイルシートによるものです。
★スクリーンリーダーだと、段落の前後で一呼吸置いて読まれたりするでしょう。

 <p></p>はブロック要素で、内部に行内要素しか置けません。
ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )
<!ELEMENT P - O (%inline;)*( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-P )
 よって・・
フレーズ要素: EM、 STRONG、DFN、CODE、SAMP、 KBD、VAR、CITE、ABBR、及び ACRONYM要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.2.1 )
 と、<a>要素、<span>が置けることになります。それぞれの使い道はリンク先を確認。
 spanは、他の要素では文書構造を表すのに不十分な時に『id属性及び class属性と併用することで、文書に構造を付加』するために使います。

 <span class="mark">ここは他所から参照されるかもむ・・</span>

 そのうえで、
em{
 background-color:yellow;
 padding:0.5em 1em;
 font-style:normal;/* ブラウザのデフォルトは斜体なので */
}
 とかすればよい。基本的にはdisplay:inline-block;はここでは書かない。
display:inline-block;は、本来は行内要素でないブロック要素やリスト項目要素などを、行内ブロックにプレゼンテーションするときに使用する。

 

>文字をボックスで囲うことができるタグは?
 とてもとても大事なところを誤解されている。今後の成長のためにぜひとも身につけておいてください。
 HTMLは文書構造、スタイルシートはそのプレゼンテーションを指定します。
『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』
 と言われます。
 すなわち、
<p>今日は<a href="#hare">晴れ</a>です</p>
 とは、#Hareで示されているところにリンクするアンカーが、「今日は・・・す」とい...続きを読む

Q「・」(黒い点)を非表示にしたいです。

index.htmlファイルには以下のように記述しています。
<div id="new_arrival">
<iframe src="notice.html" name="in" width="680" height="500" marginwidth="20" scrolling="on" ></iframe>
</div>

notice.htmlには以下のように記述しています。
<h3>新着情報</h3>
<ul>
<li>2015-03-17 <a href="https://drive.google.com/file/d/file01=sharing" target="_blank">文書01</a>
<li>2015-03-17 <a href="https://drive.google.com/file/d/file02=sharing" target="_blank">文書02</a>
~~~~~~~~~~~~~~~~~
</ul>

ブラウザ(firefox)で表示すると「・文書01」のように「・」が「文書01」前に表示されてしまいます。この「・」が表示されないようにするにはどうしたらいいのでしょうか?

調べるとstyle="list-style:none"を使えば表示されなくなるとあったのですが、いろいろ使ってみても消えませんでした。(~_~;)

http://www.webword.jp/cssguide/ref-list/index1.html
上記のサイトでは「ただ全てのブラウザで上記が全て利用できるわけではなく、対応状況はまちまちのようです。 」とあったので、firefoxでは非表示にできないのでしょうか?

index.htmlファイルには以下のように記述しています。
<div id="new_arrival">
<iframe src="notice.html" name="in" width="680" height="500" marginwidth="20" scrolling="on" ></iframe>
</div>

notice.htmlには以下のように記述しています。
<h3>新着情報</h3>
<ul>
<li>2015-03-17 <a href="https://drive.google.com/file/d/file01=sharing" target="_blank">文書01</a>
<li>2015-03-17 <a href="https://drive.google.com/file/d/file02=sharing" target="_blank">文書02</a>
~~~~~~~...続きを読む

Aベストアンサー

notice.htmlには以下のように記述しています。
<h3>新着情報</h3>
<ul>
<li>2015-03-17 <a href="https://drive.google.com/file/d/file01=sharing" target="_blank">文書01</a>
<li>2015-03-17 <a href="https://drive.google.com/file/d/file02=sharing" target="_blank">文書02</a>

notice.htmlには以下のように記述しています。
<h3>新着情報</h3>
<ul style="list-style-type:none;margin:0;padding:0 1em;">
<li>2015-03-17 <a href="https://drive.google.com/file/d/file01=sharing" target="_blank">文書01</a>
<li>2015-03-17 <a href="https://drive.google.com/file/d/file02=sharing" target="_blank">文書02</a>

とか。。。スタイルは読み込むHTMLには無効です。

なお、list-style-typeは継承されるプロパティなので、ulに記述すると、他により詳細度の高い指定がない、あるいは同じ詳細度でも後出の指定がない限りliに適用されます。
【引用】____________ここから
'list-style-type'
値: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
初期値: disc
適用対象: 'display: list-item'をもつ要素
継承: yes ←★
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/generate.html#propdef-list-style-type )]より
 この継承や詳細度と言うカスケーディングはCSS(カスケーディングスタイルシートの命です。プロパティを学ぶより先にしつかり身につけましょう。)
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 日本語訳( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )

notice.htmlには以下のように記述しています。
<h3>新着情報</h3>
<ul>
<li>2015-03-17 <a href="https://drive.google.com/file/d/file01=sharing" target="_blank">文書01</a>
<li>2015-03-17 <a href="https://drive.google.com/file/d/file02=sharing" target="_blank">文書02</a>

notice.htmlには以下のように記述しています。
<h3>新着情報</h3>
<ul style="list-style-type:none;margin:0;padding:0 1em;">
<li>2015-03-17 <a href="https://drive.google.com/file/d/file01=sharing" target="_...続きを読む

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード


人気Q&Aランキング

おすすめ情報