Q&A
HTMLをご提示ください。
写真のようにテキストと画像を横並べにし、3つ並んでいる内の2つ目だけテキストと画像を逆にするように実装したいです。
display:flexで横並びにすると両方とも同じ高さになってしまうので、右に配置されている画像はposition:absoluteで設定しています。
2つ目のテキストエリアについては、
HTML
1 &:nth-child(2n) { 2 flex-direction: row-reverse; 3 }
で反対側にできたのですが、
右に配置されている画像だけどうしても左に配置することができません。
position: absoluteやnth-childなどで書いてみたのですが反映されず。。。
知っている方いましたらご教授いただけると幸いです。
記述しているコードはこちらです。
Scss
1@use '../mixin' as *; 2@use '../setting/config' as s; 3 4.feature { 5 background:#F9F9F9; 6 padding:100px 0; 7} 8 9.feature-inner { 10 11} 12 13.subtitle { 14 text-align: center; 15} 16 17.feature-list { //テキストと画像を囲んでいるdivタグ 18 margin-bottom: 153px; 19 position: relative; 20 display: flex; 21 &:nth-child(2n) { 22 flex-direction: row-reverse; 23 24 } 25 .feature-left { //テキストを囲んでいるdivタグ 26 width: 724px; 27 display: flex; 28 padding:65px 29px 64px 40px; 29 border-radius: 50px; 30 background:$colorWhite; 31 32 .feature-number { 33 font-size: 72px; 34 font-weight: 700; 35 font-family: $section-font-family; 36 color:$mainColor; 37 align-self: flex-start; 38 line-height: 71.61px; 39 } 40 41 .feature-description { 42 margin-left: 18px; 43 .feature-description-title { 44 font-size: 36px; 45 font-weight: 700; 46 line-height: 52.13px; 47 } 48 49 .feature-description-text { 50 display: block; 51 width: 470px; 52 margin-top: 17px; 53 } 54 } 55 } 56 .feature-right { //画像を囲んでいるdivタグ 57 position: absolute; 58 bottom:0; 59 right:0; 60 img { 61 62 } 63 } 64}
HTML
1<section class="feature"> 2 <div class="feature-inner inner"> 3 <h2 class="section-title">Feature</h2> 4 <p class="subtitle">Ravekの3つの特長</p> 5 <div class="feature-list"> 6 <div class="feature-left"> 7 <div class="feature-number">01</div> 8 <div class="feature-description"> 9 <p class="feature-description-title">タスクの種類・進捗を<br>ダッシュボードで確認可能</p> 10 <p class="feature-description-text">Ravekはメンバーが入力したタスクを整理し、ダッシュボードにガントチャートとして表示。ダッシュボードを確認するだけで、誰のどのタスクがどの程度進んでいるのかを一目で把握できます。</p> 11 </div> 12 </div> 13 <div class="feature-right"> 14 <img src="https://placehold.jp/520x520.png" alt=""> 15 </div> 16 </div> 17 <div class="feature-list"> 18 <div class="feature-left"> 19 <div class="feature-number">02</div> 20 <div class="feature-description"> 21 <p class="feature-description-title">タスクの入力がシンプルかつ簡単。<br>入力の手間が最小限に</p> 22 <p class="feature-description-text">タスク管理ツールで面倒になりがちなタスクの入力作業。<br>RavekはPC・スマートフォンのどちらでもシンプルかつ簡単に入力でき、手間が最小限に抑えられます。本質的な業務に時間を割きましょう。</p> 23 </div> 24 </div> 25 <div class="feature-right"> 26 <img src="https://placehold.jp/520x520.png" alt=""> 27 </div> 28 </div> 29 <div class="feature-list"> 30 <div class="feature-left"> 31 <div class="feature-number">03</div> 32 <div class="feature-description"> 33 <p class="feature-description-title">SlackとのAPI連携<br>ツール切り替えの手間を削減</p> 34 <p class="feature-description-text">RavekはSlackと連携することで、Slack上でRavekをタスクを追加したり、確認したりできます。都度の切り替えの手間がなくなり、シームレスに扱えるのが特長です。Slackを導入しているなら違和感なく使用できます。</p> 35 </div> 36 </div> 37 <div class="feature-right"> 38 <img src="https://placehold.jp/520x520.png" alt=""> 39 </div> 40 </div> 41 </div> 42 </section>
回答3件
0
position で調整するよりも、Flexbox の align-items などを使った方がスッキリしますし、レスポンシブ対応も楽です。突貫ですがサンプルです。
html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <style> 6 body { 7 background: #F9F9F9; 8 } 9 .feature { 10 width: 1300px; 11 margin-right: auto; 12 margin-left: auto; 13 padding: 100px 0; 14 } 15 .feature-list { 16 display: flex; 17 align-items: center; 18 justify-content: space-between; 19 position: relative; 20 margin-bottom: 153px; 21 } 22 .feature-list:nth-child(2n) { 23 flex-direction: row-reverse; 24 } 25 .feature-list .feature-left { 26 width: 724px; 27 } 28 .feature-content {/* 追加した要素 */ 29 display: flex; 30 padding: 2em; 31 border-radius: 50px; 32 background: white; 33 } 34 .feature-list .feature-left .feature-number { 35 font-size: 72px; 36 font-weight: 700; 37 align-self: flex-start; 38 line-height: 71.61px; 39 } 40 .feature-list .feature-left .feature-description { 41 margin-left: 18px; 42 } 43 .feature-list .feature-left .feature-description .feature-description-title { 44 font-size: 36px; 45 font-weight: 700; 46 line-height: 52.13px; 47 } 48 .feature-list .feature-left .feature-description .feature-description-text { 49 display: block; 50 width: 470px; 51 margin-top: 17px; 52 } 53 .feature-list .feature-right {} 54 </style> 55</head> 56 57<body> 58 <section class="feature"> 59 <div class="feature-inner inner"> 60 61 <div class="feature-list"> 62 <div class="feature-left"> 63 <div class="feature-content"> 64 <div class="feature-number">01</div> 65 <div class="feature-description"> 66 <p class="feature-description-title">タスクの種類・進捗を<br>ダッシュボードで確認可能</p> 67 <p class="feature-description-text">Ravekはメンバーが入力したタスクを整理し、ダッシュボードにガントチャートとして表示。ダッシュボードを確認するだけで、誰のどのタスクがどの程度進んでいるのかを一目で把握できます。</p> 68 </div> 69 </div> 70 </div> 71 <div class="feature-right"> 72 <img src="https://placehold.jp/520x520.png" alt=""> 73 </div> 74 </div> 75 76 <div class="feature-list"> 77 <div class="feature-left"> 78 <div class="feature-content"> 79 <div class="feature-number">02</div> 80 <div class="feature-description"> 81 <p class="feature-description-title">タスクの入力がシンプルかつ簡単。<br>入力の手間が最小限に</p> 82 <p class="feature-description-text">タスク管理ツールで面倒になりがちなタスクの入力作業。<br>RavekはPC・スマートフォンのどちらでもシンプルかつ簡単に入力でき、手間が最小限に抑えられます。本質的な業務に時間を割きましょう。</p> 83 </div> 84 </div> 85 </div> 86 <div class="feature-right"> 87 <img src="https://placehold.jp/520x520.png" alt=""> 88 </div> 89 </div> 90 91 <div class="feature-list"> 92 <div class="feature-left"> 93 <div class="feature-content"> 94 <div class="feature-number">03</div> 95 <div class="feature-description"> 96 <p class="feature-description-title">SlackとのAPI連携<br>ツール切り替えの手間を削減</p> 97 <p class="feature-description-text">RavekはSlackと連携することで、Slack上でRavekをタスクを追加したり、確認したりできます。都度の切り替えの手間がなくなり、シームレスに扱えるのが特長です。Slackを導入しているなら違和感なく使用できます。</p> 98 </div> 99 </div> 100 </div> 101 <div class="feature-right"> 102 <img src="https://placehold.jp/520x520.png" alt=""> 103 </div> 104 </div> 105 106 </div> 107 </section> 108</body> 109 110</html> 111
投稿2021/05/14 09:26
総合スコア784
0
ベストアンサー
いかのようにするとどうでしょうか。
css
1 &:nth-child(2n) { 2 flex-direction: row-reverse; 3 & .feature-right { 4 left: 0; 5 right: auto; 6 } 7 }
投稿2021/05/14 08:29
総合スコア36989
蛇足ですが、「display:flexで横並びにすると両方とも同じ高さになってしまう」のは何とかなると思います。。
https://developer.mozilla.org/ja/docs/Web/CSS/align-items
0
absolute使わない方が良い気もするけど、left:0;使っちゃう。
CSS
1.feature-right { //画像を囲んでいるdivタグ 2 position: absolute; 3 bottom:0; 4 right:0; 5 &.reverse { 6 left: 0; 7 } 8 img { 9 10 } 11 }
で、2番目の画像のdivにclassを指定する。
html
1 <div class="feature-right reverse"> 2 <img src="https://placehold.jp/520x520.png" alt=""> 3 </div>
以下蛇足です。
投稿したつもりになってた…消すのも勿体ない気がするのでポチ。
投稿2021/05/14 12:19
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
