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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1929閲覧

コンテンツの作成方法

mikio

総合スコア38

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/04/13 11:22

下記参考サイトの様に、
画像をマウスオーバーすると、
キャプションが現れるコンテンツを作成したいと考えております。

【 参考サイトURL 】
http://www.basicagency.com/

そこで、
このマウスオーバーでキャプションが表示され、
尚且つそのキャプションの中身は自由に文字や画像を入れれるように
したと思っております。

また配置する画像(マウスオーバーしていない状態の画像)は
様々なサイズでランダムに並べて使用したいと考えております。

※例
┏━━━━━━┓
┃ ┃
┃ 240×240 ┃
┃ ┃
┗━━━━━━┛
┏━━━━━━┓
┃ ┃
┃ 180×180 ┃
┃ ┃
┗━━━━━━┛

上記の様なコンテンツの作成方法を
ご存知の方はご返信をお待ちしております。

以上、宜しくお願いします!

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

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

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

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

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

guest

回答3

0

このマウスオーバーでキャプションが表示され、
尚且つそのキャプションの中身は自由に文字や画像を入れれるように

こちらに関しては
外を囲うdivタグをposition:relative;に
中に入っているdivタグをposition:absolute;で外の要素にかぶせるように配置
中に入っているdivタグにアニメーションを指定(こうすることでcssのプロパティに変化があると勝手にアニメーションしてくれます)
参考サイトを見ると、中の文字なども動いていたのでそこにもアニメーションを指定
次にhoverした時のアクションを追加
中に入っているdivタグにhoverした時に背景の色を少し黒色にする
中に入っているdivタグにhoverした時にその中のコンテンツを上からちょっと下にずらす(上からの距離を開ける)
これをコードにしたのがコレです。
(わかりづらかったらごめんなさい!)

lang

1<div class="outer"> 2 <div class="inner"> 3 <div class="inner__poR"> 4 <div class="inner_content">textやimage</div> 5 </div> 6 </div> 7</div>

lang

1.outer{ 2 width: 200px; 3 height: 200px; 4 position: relative; 5} 6 7.inner{ 8 position: absolute; 9 top: 0; 10 left: 0; 11 width: 200px; 12 height: 200px; 13 background: transparent; 14 transition: all .5s ease; 15} 16 17.inner_poR{ 18 position: relative; 19 top: 0; 20 left: 0; 21 width: 200px; 22 height: 200px; 23} 24 25.inner_content{ 26 position: relative; 27 transition: all .5s ease; 28} 29 30.inner:hover{background: rgba(0,0,0,.5);} 31.inner:hover .inner_content{top: 10px;}

また、
また配置する画像(マウスオーバーしていない状態の画像)は
様々なサイズでランダムに並べて使用したいと考えております。

この質問なのですが、
参考サイトのレイアウトだったらfloatで全部行けると思います。
なぜなら規則正しいレイアウトだからです。
左側に小さい四角4つ分の大きい四角。
右側に小さい四角が4つ並んでいる。

ただ、画像の幅に応じてレイアウトを変えたいなど行ないたい場合は、javascriptを使用して調整するしかないです。
pinterest グリッド jqueryとかで調べるとそういうjsが出てくると思います!

参考になれば幸いです!

投稿2015/04/14 08:14

MasakazuFukami

総合スコア1869

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

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

mikio

2015/04/14 13:01

回答頂きありがとうございます!!! CSSだけでこんな事ができるなんて、 とても感動です! 1点分からない部分があるのですが、 ご回答頂きましたコードを実際に試していたのですが、 マウスオーバーする前はキャプションが非表示で、 マウスオーバーした際に、キャプションが表示されるようにしたい場合は、 どのように修正すれば宜しいでしょうか?? またリンクを貼りたい場合は、 どのように修正すればいいかという点も併せてご回答頂けましたら幸いです。 私がしたい事としては、 下記の図の様に■の部分には別の小さい画像を並べ、 その下の「詳細はこちら」を押すと 専用のページへ飛ぶといったものを作成したいと考えております。 ┏━━━━━━━━━━━━┓ ┃ ■■  ■■  ■■ ┃ ┃ ■■  ■■  ■■ ┃ ┃ ■■  ■■  ■■ ┃ ┃ ■■  ■■  ■■ ┃ ┃            ┃ ┃   詳細はこちら   ┃ ┗━━━━━━━━━━━━┛ ※参考の図が崩れておりましたら、すいません。。。
MasakazuFukami

2015/04/14 13:05

ちょっと待って下さいね! 実際に表示せずに書いてしまったので家に帰ってから書いてみます!
mikio

2015/04/14 13:16

大変お忙しい中申し訳ございません。。。 ご返事お待ちしております!!
MasakazuFukami

2015/04/15 02:08

すいません!きのう寝ちゃってました!いまから書きます!
guest

0

ベストアンサー

急いでに作ってしまったのでちょっとコード汚いですが、雰囲気が伝われば!(笑)

lang

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3<head> 4<meta charset="utf-8"> 5<style type="text/css"> 6.outer{ 7 width: 200px; 8 height: 200px; 9 position: relative; 10 border: solid 1px #999; 11 background: url(http://www.neko-kurashi.com/img/kao01.jpg); 12 background-size: cover; 13 background-position: center; 14} 15 16.inner{ 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 200px; 21 height: 200px; 22 background: transparent; 23 transition: all .5s ease; 24} 25 26.inner_poR{ 27 position: relative; 28 top: 0; 29 left: 0; 30 width: 200px; 31 height: 200px; 32} 33 34.inner_contents{ 35 position: relative; 36 opacity: 0; 37 width: 200px; 38 height: 200px; 39 transition: all .5s ease; 40} 41 42.u-poR{position: relative;} 43 44.animation{ 45 transition: all .5s ease; 46 -webkit-transition: all .5s ease; 47 -moz-transition: all .5s ease; 48 -ms-transition: all .5s ease; 49} 50 51.inner_content{ 52 position: absolute; 53 left: 0; 54 width: 100%; 55 height: 50px; 56 line-height: 50px; 57 color: #fff; 58 text-align: center; 59} 60 61.inner_content--top{top: 0;} 62.inner_content--bottom{ 63 background: #fff; 64 color: #999; 65 bottom: -10px; 66 text-decoration: none; 67} 68 69.inner:hover{background: rgba(0,0,0,.5);} 70.inner:hover .inner_contents{opacity: 1} 71.inner:hover .animation--top{top: 10px;} 72.inner:hover .animation--bottom{bottom: 0px;} 73 74.wrap-float div{float: left;} 75.wrap-float:after{ 76 display:block; 77 clear:both; 78 height:0px; 79 visibility:hidden; 80 content:"."; 81} 82 83.w50per{width: 50%;} 84.image-holder{ 85 display: inline-block; 86 margin-left: 10px; 87 margin-top: 10px; 88 width: 30px; 89 height: 30px; 90 background: url(http://www.neko-kurashi.com/img/kao01.jpg); 91 background-size: cover; 92 background-position: center; 93} 94</style> 95</head> 96<body> 97 <div class="outer"> 98 <div class="inner"> 99 <div class="inner__poR"> 100 <div class="inner_contents"> 101 <div class="u-poR animation animation--top inner_content inner_content--top"> 102 <div class="wrap-float"> 103 <div class="w50per"> 104 <div class="image-holder"></div> 105 <div class="image-holder"></div> 106 <div class="image-holder"></div> 107 <div class="image-holder"></div> 108 </div> 109 <div class="w50per"> 110 <div class="image-holder"></div> 111 <div class="image-holder"></div> 112 <div class="image-holder"></div> 113 <div class="image-holder"></div> 114 </div> 115 </div> 116 </div> 117 <div class="u-poR animation animation--bottom inner_content inner_content--bottom"><a href="#">猫の詳細はこちら</a></div> 118 </div> 119 </div> 120 </div> 121 </div> 122</body> 123</html>

これがhoverの前
![イメージ説明]WIDTH:600

これがhoverの後
![イメージ説明]WIDTH:600

こんな感じです!

ちなみにjavascriptのライブラリでtransit.jsやenqt.jsなど、cssアニメーションをjavascriptで簡単に制御出来る方法もあります。
ただ、こちらだと、hoverというアクション自体をjavascriptのhoverイベントで取る必要があります。
また、hoverを解除した時の処理とかを書く必要があるのでcssで書くことができれば最高だと思います。

参考になれば幸いです!

投稿2015/04/15 02:34

MasakazuFukami

総合スコア1869

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

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

mikio

2015/04/15 03:26

MasakazuFukamiさん 先日からお忙しい中、 本当にありがとうございます!!! またわからない点があれば、 こちらへ投稿させて頂きます!
MasakazuFukami

2015/04/15 03:34

いえいえ! また見つけたら回答させていただきます! もしよろしければベストアンサーお願い致します(笑) 僕が勝手に喜びます(笑)
mikio

2015/04/15 05:08

今後ともよろしくお願い致します!! ベストアンサーしました!!(笑)
MasakazuFukami

2015/04/15 05:09

ありがとうございます! 泣いて喜びました!(笑)
guest

0

こんにちは。

下記のような記述でもお望みのエフェクトを得ることができます。
HTMLは共通です。なお、フォントサイズやカラーは記述してありませんので、お好みでCSSに追記してください。

lang

1<figure> 2 <img src="image.jpg" /> 3 <figcaption> 4 <h3>Caption Title</h3> 5 <p>caption text here ...</p> 6 <!— 小さな画像であれば、ここに記述すれば表示できます —> 7 </figcaption> 8</figure>

1)シンプルなタイプ(基本形)

lang

1figure { 2 position: relative; 3 overflow: hidden; 4 width: 300px; 5} 6figcaption { 7 position: absolute; 8 top: 0; 9 left: 0; 10 z-index: 2; 11 width: 100%; 12 height: 100%; 13 background: rgba(0,0,0,.6); 14 -webkit-transition: .3s; 15 transition: .3s; 16 opacity: 0; 17} 18figure:hover figcaption { 19 opacity: 1; 20}

2)時間差でキャプションを表示(左からスライド)させるタイプ

lang

1figure { 2 position: relative; 3 overflow: hidden; 4 width: 300px; 5} 6figcaption { 7 position: absolute; 8 top: 0; 9 left: 0; 10 z-index: 2; 11 width: 100%; 12 height: 100%; 13 background: rgba(0,0,0,.6); 14 -webkit-transition: .3s; 15 transition: .3s; 16 opacity: 0; 17} 18figcaption h3, 19figcaption p { 20 position: absolute; 21 left: -100%; 22 width: 260px; 23 -webkit-transition: .3s; 24 transition: .3s; 25} 26figcaption h3 { 27 top: 30px; 28} 29figcaption p { 30 top: 75px; 31} 32figure:hover figcaption { 33 opacity: 1; 34} 35figure:hover figcaption h3, 36figure:hover figcaption p { 37 left: 20px; 38} 39figure:hover figcaption h3 { 40 -webkit-transition-delay: .2s; 41 transition-delay: .2s; 42} 43figure:hover figcaption p { 44 -webkit-transition-delay: .5s; 45 transition-delay: .5s; 46}

以上、MasakazuFukamiさんのご回答とあわせて、ご参考いただければ幸いです。

投稿2015/04/15 02:06

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

mikio

2015/04/15 03:28

GeorgeCohtaさん こういう方法もあるのですね♪ 勉強になります! こちらもわからない点があれば、 投稿させて頂きます! ありがとうございました!
退会済みユーザー

退会済みユーザー

2015/04/15 04:44

mikioさん、コメント(返信)をいただきありがとうございます。 ホバーエフェクトの基本形ということで書かせていただきました。 細かいところはてきとうに改変してください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問