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

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

この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が見つからない時は、教えて!gooで質問しましょう!

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

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

Qgoogle アドセンスのクリック単価について

アクセスありがとうございます。

現在、運営サイトにアドセンスを貼り付けています。
クリック率は決して低くないのですが、クリック単価がかなり安く収益が伸び悩んでいます。

例えば、同じ広告がクリックされても掲載サイトによって単価が異なる場合があるのでしょうか?

また、アドセンスについて書かれた情報商材で、単価の安い広告を表示させない方法があるようですが、その方法をご存知でしたらご教授いただけないでしょうか?

Aベストアンサー

>例えば、同じ広告がクリックされても掲載サイトによって単価が異なる場合があるのでしょうか?

クリック数の多いサイトほど単価も高い気がします。
また同じようなサイトでもどのキーワードが注目されて表示されているのかわかりませんので、その点でも変わってくると思います。

アドセンスはクリック単価よりもクリック率が高い広告を上位に持ってきたりもしているので、あまり触らないほうが賢明だと思います。

クリック率が下がったり、表示する広告がなくなったりする可能性もあります。
またサイトのカテゴリによって頑張ってもクリック単価が安いということも考えられます。そのサイトで頑張るよりもクリック単価が高そうなキーワードを使えるカテゴリで新しいサイトを立ち上げたほうが将来的には収入が増えるんじゃないでしょうか。

Qサムネイル画像の表示途中でそのサムネイル画像をクリックすると後から表示されるサムネイルが表示されない。

winXP PRO IE6.0SP1です。

とあるHPを作成していますが、サムネイル画像(約100画像)をクリックすると別ウィンドウが出る様にしています。

サムネイルが全部表示される前にクリックすると小窓が出て画像は表示されますが、そこから後に出るサムネイルが表示されずフリーズしてしまいます。


<a href="javascript:void(0);" onclick="window.open('./******/***.jpg','win1','width=400,height=400');" menubar=no toolbar=no locaction=no status=no><img src="./small/***.jpg" height=50 border=0></a>


他のPCで確認しても同じ状態です。

サムネイル画像が出ている途中でその画像をクリックしてもフリーズしない方法の解除方法はありますでしょうか?

宜しくお願い致します。

Aベストアンサー

再び、です。
<HEAD>タグ内にjavascriptを埋め込む方法は以下の通りです。

<HEAD>
<script language="javascript">
<!--
function subWin(n,wn){
window.open(n,wn,"width=400,height=400,scrollbars=no,location=no,menubar=no,status=no");}
//-->
</script>
</HEAD>
-----------
<a href="javascript:void(0);" onclick="subWin('./******/***.jpg','win1')"><img src="./small/***.jpg" height="50" border="0"></a>

開きたい画像のパスと、ウィンドウ名を、onclickの所で指定する形です。
こういう形であれば、ウィンドウのサイズやメニューバーの非表示などは、個別でひとつひとつ設定しなくてもよくなるので、ソースがぐっと軽くなります。

つまり、その次の画像では、

<a href="javascript:void(0);" onclick="subWin('./******/***2.jpg','win2')"><img src="./small/***2.jpg" height="50" border="0"></a>

という形で指定してやれば良いのです。

ちなみに、以下のサイトの『JavaScript例文辞典』で、サブウィンドウ展開の色々な形がサンプルであるので、ご参考にしてみてください。

参考URL:http://www.shiojiri.ne.jp/~openspc/

再び、です。
<HEAD>タグ内にjavascriptを埋め込む方法は以下の通りです。

<HEAD>
<script language="javascript">
<!--
function subWin(n,wn){
window.open(n,wn,"width=400,height=400,scrollbars=no,location=no,menubar=no,status=no");}
//-->
</script>
</HEAD>
-----------
<a href="javascript:void(0);" onclick="subWin('./******/***.jpg','win1')"><img src="./small/***.jpg" height="50" border="0"></a>

開きたい画像のパスと、ウィンドウ名を、onclickの所で指定する形です。
...続きを読む

QWeb サイトとアドオンを信頼し、アドオンをインストールするには、ここをクリックしてください

皆様、宜しくお願いします。

ホームページをヤフージャパンに設定しています。今までは必ず
ブラウザ(IE7)を起動させると
「Web サイトとアドオンを信頼し、アドオンをインストールするには、ここをクリックしてください」
と表示が出ていました。アドオンはウインドウズメディアプレイヤー
です。

今まで許可せず(クリックせず)使っていましたが、今日、IE7を起動させ、ヤフージャパンのHPが表示されても、この表示が出ないことに気づきました。何度起動させてもやはり出ません。
もちろん、許可した覚え(表示をクリックした)はありません。

アドオンの管理を見てみても、ウインドウズメディアプレイヤーは使用されていません。

原因として何が考えられるのでしょうか?
また、どうすれば、今までのように戻せるのでしょうか?
どうか忌憚のないご意見を聞かせてください。

Aベストアンサー

メディアプレイヤーでした?
~プレイヤーならアドビのFLASHPLAYERがあるけど。
アドオンってActiveXでつからメディアプレイヤーじゃないでしょうね。
ヤフーとかは頻繁に更新されるんでね動画広告を使う時、使わない時あるんでしょう。または間接的にActiveX非許可に設定したのかも。

Q【htmlタグ】inputタグの書き方について

現状は
<input type="text">のテキスト入力エリアが存在します。
それを<form>タグで囲い、
<input type="button">のボタン押下にてform内容を送信していますが、
ボタンではなく、<a>タグのように、ハイパーリンクのような見た目にしてform内容を送信したいです。
どのように修正すればよろしいのでしょうか。宜しくお願いします。

Aベストアンサー

JavaScriptを使って

<form method="GET" name="frm1">
<input type="text" name="name">
<a href="javascript:document.frm1.submit();">送信</a>
</form>

とすると送信できます。

Qアドセンスのクリック単価について

Googleアドワーズの場合、キーワードによって入札単価が変わりますよね。

参考:入札価格チェックツール
http://uv.bidtool.overture.com/d/search/tools/bidtool/?Keywords=&mkt=jp

ビッグなキーワードになるほど入札額は高くなります。

同様にアドセンスでもキーワードによってクリック単価、
つまり1クリックあたりの収入額も変わるものですか?

変わる場合、アドワーズの入札額と比例するものでしょうか?

アドセンス収入を目的とするサイトを作ろうとしたとき、入札額の
高いキーワードでの広告表示をさせた方がいいのかなと思いました。

よろしくお願いします。

Aベストアンサー

>アドセンスでもキーワードによってクリック単価、
つまり1クリックあたりの収入額も変わるものですか?

変わります。
しかし、ビッグなキーワードでサイトを作ってみましたが、思ったより単価は高くなかったです。
それと、変なところからキーワードを拾ってきて、表示させたりするので、目的のキーワードで広告を表示させるのは難しいです。類義語だと単価が安かったりしますので。

Qtableタグ内で、空白セルでも罫線を表示させられるためのタグは

次のように、1行×5列のテーブルがあります。

<html><body>
<table border="1">
<tr>
<td>1</td>
<td></td>
<td> </td>
<td> </td>
<td></td>
</tr>
</table>
</body></html>


1列目:文字列 1
2列目:未記入
3列目:半角スペース
4列目:全角スペース
5列目:文字実体参照の

2列目と3列目だけ、罫線が表示されないですが(セルがつぶれてみえる)
わざわざとかで<td>と</td>の間を埋めなくても、
罫線を明示的に表示させられるタグがあったと思いましたが、何だったでしょうか。

Aベストアンサー

タグではないが、対応してれば希望の形になるでしょう。

CSS2リファレンス 空セルのボーダーと背景を制御
http://hp.vector.co.jp/authors/VA022006/css/tables.html?jouyou_l#empty-cells
CSS2リファレンス 付録:empty-cellsプロパティ対応状況
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/tables.html?jouyou_l#empty-cells


余談
HTML4.01邦訳 空白類
http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/struct/text.html#h-9.1

Qファイヤーフォックスのタブを右クリックで閉じるための設定 or アドオン

ファイヤーフォックスを使い始めました。
開いているタブを右クリック一発で閉じることができる、設定かアドオンがあれば教えてほしいのですが・・・。

Aベストアンサー

「right_click_close」
https://addons.mozilla.org/ja/firefox/addon/6066

Firefox3.5.5にて動作検証済み。

Qリストタグ firefoxでは表示されるがIE7ではマーカーが表示されない

ご教授ください。
リストタグで、<ul>と<ol>を入れ子で使っています。
firefoxでは意図どおりに表示されるのですが、IE7ではマーカーがどちらも表示されません。

[html]
(略)
<ol><li>こんなことをしています</li>
  <li>あんなこともしています
  <ul><li>あんなことその1</li>
    <li>あんなことその2</li>
    <li>あんなことその3</li></ul></li>
    <li>ちょっとしたこともしてます</li>
  <li>どえらいこともしています</li>
  </ol>
(略)

[css]
ol {
list-style-type:decimal;
line-height:1.6em;
width:600px;
}
ul {
list-style-type:disc;
line-height:1.2em;
width:600px;
}

[firefoxでは]
1.こんなことをしています
2.あんなこともしています
 ・あんなことその1
 ・あんなことその2
 ・あんなことその3
3.ちょっとしたこともしてます
4.どえらいこともしています
[IE7では]
こんなことをしています
あんなこともしています
 あんなことその1
 あんなことその2
 あんなことその3
ちょっとしたこともしてます
どえらいこともしています

このように表示されます。
以前、同じようにリストタグを使ったときはできたような気がするのですが、何か間違っているのでしょうか。
よろしくお願いいたします。

ご教授ください。
リストタグで、<ul>と<ol>を入れ子で使っています。
firefoxでは意図どおりに表示されるのですが、IE7ではマーカーがどちらも表示されません。

[html]
(略)
<ol><li>こんなことをしています</li>
  <li>あんなこともしています
  <ul><li>あんなことその1</li>
    <li>あんなことその2</li>
    <li>あんなことその3</li></ul></li>
    <li>ちょっとしたこともしてます</li>
  <li>どえらいこともしています</li>
  <...続きを読む

Aベストアンサー

IEの伝統的なバグのようで、リスト要素にwidthを指定すると
paddingが0になるようです。
widthを指定するのをやめるか適当なpaddingを指定してみてください

<style>
ol {
list-style-type:decimal;
line-height:1.6em;
width:600px;
padding-left:40px;
}
ul {
list-style-type:disc;
line-height:1.2em;
width:600px;
padding-left:40px;
}
</style>

QFirefox アドオン をクリックするだけで画面 + - を変更できるもの教えてください

Firefox アドオン ページをプラス と マイナス
をクリックするだけで画面表示を変更できる
のありますか?

Default FullZoom Level 
は違ったようです・・・

Aベストアンサー

こんにちは

画面表示を変更…というのは、表示の拡大縮小をを意味しているということでよろしいでしょうか?

私は「zoom-page」というアドオンを使ってますが、どうでしょう?

Qテーブルタグを作成した後、プレビューで表示されるタグの上部に空白が出来てしまう。

テーブルタグを作成した後、プレビューで表示されるタグの上部に空白が出来てしまいます。

下記の内容で文章中にテーブルタグを表示しようとしたところ、
(1)の文章とテーブルタグとの間に、かなりの空白が表示されてしまいます。
どのようにしたら、この空白が削除できるか、是非お教え願います。

10種類の競技は以下のとおりです。・・・・(1)
<Table Border><Tr><Td><FONT COLOR="#ec7600">1.サッカーナイン</FONT></Td><Td><FONT COLOR="#ec7600">ボールを蹴って的をいくつ落とせるか記録する</FONT></Td></Tr>
<Tr><Td>2.サッカーリフティング</Td><Td> リフティングが何回できたかを記録する</Td></Tr>
<Tr><Td><FONT COLOR="#ec7600">3.サッカードリブル</FONT></Td><Td><FONT COLOR="#ec7600"> ドリブルのコースを作り何秒でクリアできたかを記録する</FONT></Td></Tr>
<Tr><Td>4.バスケットゴール</Td><Td> 決められた数のボールを何回入れられたかを記録する </Td></Tr>
<Tr><Td><FONT COLOR="#ec7600">5.50メートル走</FONT></Td><Td><FONT COLOR="#ec7600">50メートルを何秒で走れるかを記録する</FONT></Td></Tr>
<Tr><Td>6.バランス競技</Td><Td> 不安定な仕掛けの上に何秒間いられるかを記録する </Td></Tr>
<Tr><Td><FONT COLOR="#ec7600">7.息止め競技</FONT></Td><Td><FONT COLOR="#ec7600">水に顔を付けてどのくらい我慢できるか記録する</FONT></Td></Tr>
<Tr><Td>8.ターゲットゴルフ</Td><Td> クラブを使いボールをいくつ入れられるか記録する</Td></Tr>
<Tr><Td><FONT COLOR="#ec7600">9.フライングディスク</FONT></Td><Td><FONT COLOR="#ec7600">フライングディスクを何枚的にいれられるかを記録する</FONT></Td></Tr></Table>

テーブルタグを作成した後、プレビューで表示されるタグの上部に空白が出来てしまいます。

下記の内容で文章中にテーブルタグを表示しようとしたところ、
(1)の文章とテーブルタグとの間に、かなりの空白が表示されてしまいます。
どのようにしたら、この空白が削除できるか、是非お教え願います。

10種類の競技は以下のとおりです。・・・・(1)
<Table Border><Tr><Td><FONT COLOR="#ec7600">1.サッカーナイン</FONT></Td><Td><FONT COLOR="#ec7600">ボールを蹴って的をいくつ落とせるか記録する</FONT>...続きを読む

Aベストアンサー

IE6で確認しましたが、ご指摘の空白が再現できません。
プレビューということは、ホームページビルダーなどのソフトをお使いでしょうか?
使用ソフトや環境などの詳細を補足願います。


人気Q&Aランキング

おすすめ情報