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

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

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

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

CSS

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

Q&A

解決済

2回答

614閲覧

CSSで画像の横並びの仕方

kama_111

総合スコア19

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/03/24 14:57

編集2019/03/24 15:40

前提・実現したいこと

サイトからHTMLとCSSをコピペして画像にホバーエフェクトを付けたのですが
初心者すぎて、どこに何を記述すれば横並びになるのかわかりません。
ちなみにここのサイト[http://photoshopvip.net/88174]の上から7個目の「マウスホバーで、線ラインを伸縮表示。」を参考にしています。

発生している問題・エラーメッセージ

画像が重なってしまいます… 【HTML】 <figure class="snip1229"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample84.jpg" alt="sample84"/> <figcaption> <div class="heading"> <h3>Brian <span> Cumin</span></h3> </div> <p>I think we dream so we don't have to be apart so long. If we're in each other's dreams, we can play together all night</p> </figcaption> <a href="#"></a>  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample84.jpg" alt="sample84"/> <figcaption> <div class="heading"> <h3>Brian <span> Cumin</span></h3> </div> <p>I think we dream so we don't have to be apart so long. If we're in each other's dreams, we can play together all night</p> </figcaption> <a href="#"></a>  </figure> 【CSS】 figure.snip1229 { position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 310px; max-height: 220px; width: 100%; background: #000000; color: #ffffff; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } figure.snip1229 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; } figure.snip1229 img { max-width: 100%; position: relative; opacity: 0.9; } figure.snip1229 figcaption { position: absolute; top: 9%; left: 7%; right: 7%; bottom: 80%; border: 1px solid white; border-width: 0 1px 1px; -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } figure.snip1229 .heading { overflow: hidden; -webkit-transform: translateY(-50%); transform: translateY(-50%); } figure.snip1229 h3 { display: table; margin: 0 auto; padding: 0 10px; position: relative; text-align: center; width: auto; text-transform: uppercase; font-weight: 400; } figure.snip1229 h3 span { font-weight: 800; } figure.snip1229 h3:before, figure.snip1229 h3:after { position: absolute; display: block; width: 1000%; height: 1px; content: ''; background: white; top: 50%; } figure.snip1229 h3:before { left: -1000%; } figure.snip1229 h3:after { right: -1000%; } figure.snip1229 p { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; width: 100%; padding: 0 20px; margin: 0; opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; } figure.snip1229 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } figure.snip1229:hover img, figure.snip1229.hover img { opacity: 0.15; -webkit-transform: scale(1.1); transform: scale(1.1); } figure.snip1229:hover figcaption, figure.snip1229.hover figcaption { top: 9%; bottom: 9%; -webkit-transition-delay: 0s; transition-delay: 0s; } figure.snip1229:hover p, figure.snip1229.hover p { opacity: 1; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }

該当のソースコード

試したこと

何を試したらいいのかわかりません…

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

kei344

2019/03/24 15:11

書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを質問文に追記されたほうが回答を得やすいと思います。
kszk311

2019/03/24 15:52

本当に丸々コピペしましたか?HTMLを見比べてみてください。
guest

回答2

0

ベストアンサー

とりあえず、figure は画像ごとに使うものだと思います。(「自己完結型のコンテンツを表す要素」なので
参考にされたCSSもそのつもりで作成されています。で、横並びは囲ってflexが簡単。

HTML

1<div class="wrap"> 2 <figure class="snip1229"> 3 <!-- 省略 --> 4 </figure> 5 <figure class="snip1229"> 6 <!-- 省略 --> 7 </figure> 8</div>

CSS

1.wrap { 2 display: flex; 3} 4```**動くサンプル:**[https://jsfiddle.net/m0qfekxc/1/](https://jsfiddle.net/m0qfekxc/1/) 5 6--- 7 8【よこ並びのCSS。】 9[http://lopan.jp/layout/](http://lopan.jp/layout/)

投稿2019/03/24 15:49

kei344

総合スコア69364

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

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

kama_111

2019/03/24 16:02

出来ました!!! とてもわかりやすかったです!ありがとうございます!
guest

0

例えばですが、index.htmlというファイルを作って以下のようにコードを書くと再現されると思います。

html

1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5<style> 6@import url(https://fonts.googleapis.com/css?family=Raleway:400,800); 7figure.snip1229 { 8 font-family: 'Raleway', Arial, sans-serif; 9 position: relative; 10 overflow: hidden; 11 margin: 10px; 12 min-width: 220px; 13 max-width: 310px; 14 max-height: 220px; 15 width: 100%; 16 background: #000000; 17 color: #ffffff; 18 text-align: center; 19 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 20} 21figure.snip1229 * { 22 -webkit-box-sizing: border-box; 23 box-sizing: border-box; 24 -webkit-transition: all 0.45s ease; 25 transition: all 0.45s ease; 26} 27figure.snip1229 img { 28 max-width: 100%; 29 position: relative; 30 opacity: 0.9; 31} 32figure.snip1229 figcaption { 33 position: absolute; 34 top: 9%; 35 left: 7%; 36 right: 7%; 37 bottom: 80%; 38 border: 1px solid white; 39 border-width: 0 1px 1px; 40 -webkit-transition-delay: 0.35s; 41 transition-delay: 0.35s; 42} 43figure.snip1229 .heading { 44 overflow: hidden; 45 -webkit-transform: translateY(-50%); 46 transform: translateY(-50%); 47} 48figure.snip1229 h3 { 49 display: table; 50 margin: 0 auto; 51 padding: 0 10px; 52 position: relative; 53 text-align: center; 54 width: auto; 55 text-transform: uppercase; 56 font-weight: 400; 57} 58figure.snip1229 h3 span { 59 font-weight: 800; 60} 61figure.snip1229 h3:before, 62figure.snip1229 h3:after { 63 position: absolute; 64 display: block; 65 width: 1000%; 66 height: 1px; 67 content: ''; 68 background: white; 69 top: 50%; 70} 71figure.snip1229 h3:before { 72 left: -1000%; 73} 74figure.snip1229 h3:after { 75 right: -1000%; 76} 77figure.snip1229 p { 78 top: 50%; 79 -webkit-transform: translateY(-50%); 80 transform: translateY(-50%); 81 position: absolute; 82 width: 100%; 83 padding: 0 20px; 84 margin: 0; 85 opacity: 0; 86 -webkit-transition-delay: 0s; 87 transition-delay: 0s; 88} 89figure.snip1229 a { 90 left: 0; 91 right: 0; 92 top: 0; 93 bottom: 0; 94 position: absolute; 95 z-index: 1; 96} 97figure.snip1229:hover img, 98figure.snip1229.hover img { 99 opacity: 0.15; 100 -webkit-transform: scale(1.1); 101 transform: scale(1.1); 102} 103figure.snip1229:hover figcaption, 104figure.snip1229.hover figcaption { 105 top: 9%; 106 bottom: 9%; 107 -webkit-transition-delay: 0s; 108 transition-delay: 0s; 109} 110figure.snip1229:hover p, 111figure.snip1229.hover p { 112 opacity: 1; 113 -webkit-transition-delay: 0.4s; 114 transition-delay: 0.4s; 115} 116</style> 117</head> 118<body> 119<figure class="snip1229"> 120 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample84.jpg" alt="sample84"/> 121 <figcaption> 122 <div class="heading"> 123 <h3>Brian <span> Cumin</span></h3> 124 </div> 125 <p>I think we dream so we don't have to be apart so long. If we're in each other's dreams, we can play together all night</p> 126 </figcaption> 127 <a href="#"></a> 128 129  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample84.jpg" alt="sample84"/> 130 <figcaption> 131 <div class="heading"> 132 <h3>Brian <span> Cumin</span></h3> 133 </div> 134 <p>I think we dream so we don't have to be apart so long. If we're in each other's dreams, we can play together all night</p> 135 </figcaption> 136 <a href="#"></a>  137</figure> 138</body> 139</html>

投稿2019/03/24 15:58

hatsu

総合スコア1809

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

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

kama_111

2019/03/24 16:04

ありがとうございました><
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問