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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

2回答

1539閲覧

position:abslouteを指定すると左揃えになってしまう

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/09/20 02:57

イメージ説明

画像のような構成にしたいのですが、二段目のposition:absoluteがうまくいきません。
1段目と3段目とはテキストと画像の構成が逆なのですが、absoluteを掛けた時点で画像が左寄せになってしまいます。テキストは画像にやや重なった状態したいため絶対配置にします。

よろしくおねがいします。

<div class="ibent-area"> <div class="ibent-inner"> <div class="ibent-midashi-area"> <p><img src="img/bg_ribon.png" alt="てきすとてきすとてき </p> <h2 class="ibent-midashi">てきすとてきすとてきすとてきすt</h2> </div> <p class="ibent-text">てきすとてきすとてきすとてきすt</p> <div class="ibent-list"> <div class="ibent-img"> <img src="img/event_easteregg.jpg" alt="Easter Egg Hunt"> </div> <p class="ibent-list-text"> てきすとてきすとてきすとてきすt </p> </div> <div class="ibent-list2"> <p class="ibent-list-text2"> てきすとてきすとてきすとてきすt </p> <div class="ibent-img2"> <img src="img/event_halloween.jpg" alt="Halloween Party"> </div> </div> <div class="ibent-list"> <div class="ibent-img"> <img src="img/event_christmas.jpg" alt="Christmas Party"> </div> <p class="ibent-list-text"> てきすとてきすとてきすとてきすt </p> </div> </div> </div> <!--イベント紹介--> コード
/*ibent-area*/ .ibent-area{ margin: 72px auto 72px; width: 100%; } .ibent-inner{ width: 70%; margin: 0 auto; } .ibent-midashi-area{ position: relative; } .ibent-midashi{ position:absolute; top:50%; left:50%; transform: translate3d(-50%,-50%,0); color:#fff; font-family: Times, serif; } .ibent-text{ text-align: center; line-height: 2; font-size:1.5rem; margin: 24px auto 24px; position: relative; } .ibent-list{ display: flex; width: 100%; margin-bottom: 40px; text-align: left; position: relative; } .ibent-img{ width: 40%; } .ibent-list-text{ font-size: 1.4rem; width: 60%; line-height: 2; position: absolute; top:20%; left:35%; } .ibent-list2{ display: flex; width: 100%; margin-bottom: 40px; position: relative; } .ibent-list-text2{ } /*//ibent-area*/ コード

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

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

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

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

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

yambejp

2020/09/20 04:05

最初のimgがきちんと閉じていません
guest

回答2

0

position:absloute は他の要素から浮いた状態になるので、位置合わせが面倒なことになりがちです。

要素を重ねたいなら、ネガティブマージンを使うのがシンプルにできるというのが私の経験則です。

こまかい仕様が不明なので、適当にサンプルを作成しましたので、参考にしてください。

html

1<div class="ibent-area"> 2 <div class="ibent-inner"> 3 4 <div class="ibent-list"> 5 <div class="ibent-img"> 6 <img src="https://placehold.jp/150x150.png?text=EasterEgg" alt="Easter Egg Hunt"> 7 </div> 8 <p class="ibent-list-text"> 9 てきすとてきすとてきすとてきすt 10 </p> 11 </div> 12 13 <div class="ibent-list"> 14 <div class="ibent-img"> 15 <img src="https://placehold.jp/150x150.png?text=halloween" alt="Halloween Party"> 16 </div> 17 <p class="ibent-list-text"> 18 てきすとてきすとてきすとてきすt 19 </p> 20 </div> 21 22 <div class="ibent-list"> 23 <div class="ibent-img"> 24 <img src="https://placehold.jp/150x150.png?text=christmas" alt="Christmas Party"> 25 </div> 26 <p class="ibent-list-text"> 27 てきすとてきすとてきすとてきすt 28 </p> 29 </div> 30 </div> 31</div>

css

1/*ibent-area*/ 2.ibent-area{ 3 margin: 72px auto 72px; 4 width: 100%; 5 6} 7.ibent-inner{ 8 width: 70%; 9 margin: 0 auto; 10} 11 12.ibent-list{ 13 display: flex; 14 align-items: center; 15 width: 100%; 16 margin-bottom: 40px; 17 text-align: left; 18 position: relative; 19} 20 21.ibent-list p { 22 margin-left: -5%; 23} 24.ibent-list:nth-child(even) { 25 flex-direction: row-reverse; 26} 27.ibent-list:nth-child(even) p { 28 text-align: right; 29 margin-right: -5%; 30} 31 32.ibent-img{ 33 width: 40%; 34} 35.ibent-img img { 36 width: 100%; 37} 38 39.ibent-list-text{ 40 font-size: 1.4rem; 41 width: 60%; 42 line-height: 2; 43}

CodePen サンプル

投稿2020/09/20 05:20

hatena19

総合スコア33620

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

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

0

完成形がいまいちイメージつかないのですが、こんな感じで

CSS

1<style> 2 3img.left{float:left} 4div.right{ 5 text-align:right; 6} 7img.right{float:right} 8.wrap div::after { 9 content: ""; 10 display: block; 11 clear: both; 12} 13</style> 14<div class="wrap"> 15<div> 16<img src="" alt="img1" height="100" width="100" class="left"> 17てすとてすとてすとてすとてすと<br> 18てすとてすとてすとてすとてすと<br> 19てすとてすとてすとてすとてすと<br> 20てすとてすとてすとてすとてすと<br> 21てすとてすとてすとてすとてすと<br> 22てすとてすとてすとてすとてすと<br> 23</div> 24<div class="right"> 25<img src="" alt="img2" height="100" width="100" class="right"> 26てすとてすとてすとてすとてすと<br> 27てすとてすとてすとてすとてすと<br> 28てすとてすとてすとてすとてすと<br> 29てすとてすとてすとてすとてすと<br> 30てすとてすとてすとてすとてすと<br> 31てすとてすとてすとてすとてすと<br> 32</div> 33</div> 34<div> 35<img src="" alt="img3" height="100" width="100" class="left"> 36てすとてすとてすとてすとてすと<br> 37てすとてすとてすとてすとてすと<br> 38てすとてすとてすとてすとてすと<br> 39てすとてすとてすとてすとてすと<br> 40てすとてすとてすとてすとてすと<br> 41てすとてすとてすとてすとてすと<br> 42</div> 43</div>

投稿2020/09/20 04:54

yambejp

総合スコア114585

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問