CSSを用いた吹き出しを使用していますが、同一ページ内で
左側の吹き出しがスタート、右側の吹き出しがスタートなど、
場所によっての変更はできるのでしょうか?
CSS
1.oneArea { 2 display: flex; 3 flex-wrap: wrap; 4 justify-content: flex-start; 5 max-width: 1024px; 6 margin: 50px auto; 7 padding: 0 10px; 8} 9.oneArea .onebox { 10 width: 100%; 11 display: flex; 12 flex-wrap: wrap; 13 justify-content: flex-start; 14} 15.oneArea .onebox:nth-child(even) { 16 flex-direction: row-reverse; 17 margin-top: 20px; 18} 19.oneArea .onebox .imgArea { 20 width: 16%; 21 position: relative; 22} 23.oneArea .onebox .imgArea img { 24 width: 100%; 25 max-width: 130px; 26 position: absolute; 27 top: 0; 28} 29.oneArea .onebox:nth-child(odd) .imgArea img { 30 left: 0; 31 padding-right: 30px; 32} 33.oneArea .onebox:nth-child(even) .imgArea img { 34 right: 0; 35 padding-left: 30px; 36} 37.oneArea .onebox .fukiArea { 38 width: 63%; 39} 40.oneArea .onebox .fukidasi { 41 width: 100%; 42 position: relative; 43 padding: 25px; 44 background-color: #f2f3f7; 45 font-size: 18px; 46 color: #231815; 47 border-radius: 12px; 48 box-sizing: border-box; 49} 50.oneArea .onebox .fukidasi::before { 51 content: ''; 52 position: absolute; 53 display: block; 54 top: 22px; 55 width: 0; 56 height: 0; 57 border-style: solid; 58 border-width: 15px 30px 15px 0; 59 border-color: transparent #f2f3f7 transparent transparent; 60} 61.oneArea .onebox:nth-child(odd) .fukidasi::before { 62 left: -20px; 63} 64.oneArea .onebox:nth-child(even) .fukidasi { 65 background-color: #fde5e5; 66} 67.oneArea .onebox:nth-child(even) .fukidasi::before { 68 right: -20px; 69 border-color: transparent #fde5e5 transparent transparent; 70 transform: rotate(180deg); 71} 72@media screen and (max-width: 1024px) { 73 .oneArea .onebox .imgArea img { 74 max-width: 70%; 75 } 76 .oneArea .onebox .fukidasi { 77 padding: 15px; 78 font-size: 14px; 79 } 80 .oneArea .onebox .fukidasi::before { 81 top: 8px; 82 } 83} 84@media screen and (max-width: 420px) { 85 .oneArea { 86 margin: 30px auto; 87 } 88 .oneArea .onebox:nth-child(even) { 89 margin-top: 15px; 90 } 91 .oneArea .onebox .imgArea { 92 width: 20%; 93 } 94 .oneArea .onebox .fukidasi { 95 padding: 10px 15px; 96 font-size: 12px; 97 } 98}
html
1<div class="section"> 2 3 <div class="oneArea"> 4 <div class="onebox"> 5 <div class="imgArea"><img src="#" alt="#"></div> 6 <div class="fukiArea"><div class="fukidasi">会話文</div></div> 7 </div> 8 9 <div class="onebox"> 10 <div class="imgArea"><img src="#" alt="#"></div> 11 <div class="fukiArea"><div class="fukidasi">会話文</div></div> 12 </div> 13 14 </div>
回答1件
あなたの回答
tips
プレビュー