プロが教えるわが家の防犯対策術！

CSSでテキストを開いてふわっと表示

締切済

  • 質問者：べらこ
  • 質問日時：
  • 回答数：4件

CSS（無理であればJavaやjQueryでも）で、テキストリンクを踏んだ際その下に隠してあった内容をふわっと、もしくはぬるっと表示させたいです。
ドロップダウンで表示するメニューボタンのボタンなしみたいなことがやりたいです。

例）▼ここをクリック

↓

▼ここをクリック
「ここに内容を表示
内容
内容」

「」内をふわっとぬるっとアニメーションで表示するにはどうすればいいですか？
初心者です。

質問者からの補足コメント

  • マウスオーバーのみではなく、クリックの際に反応するもの

      補足日時：2017/02/20 20:41
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4

  • 回答者： ORUKA1951
  • 回答日時：

クリックでの動作でしたら、ページ内リンクのターゲットに対して:target疑似クラスを指定すればよい。

    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

＞マウスオーバーのみではなく、クリックの際に反応するもの


矛盾している。
＞テキストリンクを踏んだ際
　テキストリンクですからクリックしたら、リンク先に飛んでいかなきゃならない。
　踏んだらでしたらマウスオーバーですよ。
　サンプルを確認してください。テクストリンクにポインターを合わせると説明が表示され、クリックすると本来のリンク先に飛んでいく。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

普通にtransitionプロパティを使う。


まず、HTMLは率直に文書構造だけをマークアップします。
★CSSやjavascriptが無効な検索エンジンとかで内容を把握できない。

「リンクを踏む」なのでマウスオーバーで広がるようにしてあります。示す内容は、aリンクの説明でしょうから、aのtitle属性の内容を表示するようになっています。

簡単なサンプル
注) タブは＿に置換してあるので戻す
注) http://は、http：//と置換してあるので戻す。
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">
<!--
section p{line-height:1.6em;}
section a{position:relative;}
section a:after{
display:block;
content:attr(title);
white-space:pre-line;
position:absolute;
top:1.6em;left:0;
width:20em;
background-color:white;
z-index:10;
text-indent:1em;
transition-property: color,height;
transition-duration:2s;
transition-timing-function:ease-in-out;
overflow:hidden;
height:0;
}
section a:hover:after{
height:350px;
background-color:yellow;
}
-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>今日、教えてgooに、<a href="https：//oshiete.goo.ne.jp/qa/9642493.html" title="CSS（無理であればJavaやjQueryでも）で、テキストリンクを踏んだ際その下に隠してあった内容をふわっと、もしくはぬるっと表示させたいです。
ドロップダウンで表示するメニューボタンのボタンなしみたいなことがやりたいです。

例）▼ここをクリック

↓

▼ここをクリック
「ここに内容を表示
内容
内容」
">CSSでテキストを開いてふわっと表示<a>という質問がありました。
＿＿</p>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>
    • good
    • 0
    • 件
通報する

参考程度に

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



試したことがないので、あまりよくわかってませんが…
こんな感じではどうでしょうか？

□ CSS
#addition1, #addition2{
transition: opacity 2s;
opacity: 0;
height: 0;
}
#addition1:target, #addition2:target{
position:relative;
opacity: 1;
height: auto;
}

□ HTML
<p><a href="#addition1">▼ここをクリック</a></p>
<div id="addition1">
<p>「ここに内容を表示 11111」</p>
</div>

<p><a href="#addition2">▼ここをクリック</a></p>
<div id="addition2">
<p>「ここに内容を表示 22222」</p>
</div>



□ 参考
https://developer.mozilla.org/ja/docs/Web/CSS/CS …
https://developer.mozilla.org/ja/docs/Web/CSS/CS …
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報