こんにちは
連日質問させていただいています。
現在htmlを勉強しておりまして、外部へ出せませんが仮インターネットサイトのページをカンプに合わせて作成しています。
画像のような構造の場合、
自分はまず骨組みになるHTMLですが、 セレクタはimg,div,pのみを使っています。(section等は今回無しで)
その時同じ形の構造が3つ並んでいるのがわかるので、画像と右のQAを合わせて1つの塊としまずはそこのHTMLを書いていきます。その後2回コピペします。
そしてそれぞれの要素に対して一つずつclass名をつけていきます。
この画像の場合15個のclass名を作ります。
その後その15個のclass名をCSSにセレクタをコピーし、1つの要素ずつ完成させていきます。
3つの塊のうち、1つができたらhtml同様2回ずつコピペします。
あとはずれているところを調整していって完成です。
正直初心者なのでこのやり方しかほぼ知りません。
見ようみまねでdd,dtやli,ulなどを使ってみましたがうまくできませんでした。
class名を少なく設定して、被っている要素を一つにまとめて一つのセレクタでやってみたこともあるのですが、カンプにどうしても合わなくなり(大体は合うが若干ずれてしまう)諦めました。
見た目は完成しているので自分のやり方は間違いではないのでしょうがソースコードが膨大な量になってしまうため、早いところ脱却したいと思っています。
みなさんも同じような経験あったりしますでしょうか?
このソースコードを見たら、プロはどう思いますか?
初心者でもできるおすすめのHTML構造、CSS構造などありますでしょうか。
以下コードです。
HTML
1 2 <section class="qa"> 3 <div class="qa__content"> 4 <h2></h2> 5 <div class="qa__flex1"> 6 <div> 7 <img src="img/q1.png" alt="" class="qa__img1"> 8 </div> 9 <div> 10 <div class="qasubflex"> 11 <p class="qa__Q1">Q</p> 12 <p class="qa__text1">文章文章文章</p> 13 </div> 14 <div class="qasubflex"> 15 <p class="qa__A1">A</p> 16 <p class="qa__text2">文章文章文章</p> 17 </div> 18 </div> 19 </div> 20 21 <div class="qa__flex2"> 22 <div> 23 <img src="img/q2.png" alt="" class="qa__img2"> 24 </div> 25 <div> 26 <div class="qasubflex"> 27 <p class="qa__Q2">Q</p> 28 <p class="qa__text3">文章文章文章</p> 29 </div> 30 <div class="qasubflex"> 31 <p class="qa__A2">A</p> 32 <p class="qa__text4">文章文章文章</p> 33 </div> 34 </div> 35 </div> 36 37 <div class="qa__flex3"> 38 <div> 39 <img src="img/q3.png" alt="" class="qa__img3"> 40 </div> 41 <div> 42 <div class="qasubflex"> 43 <p class="qa__Q3">Q</p> 44 <p class="qa__text5">文章文章文章</p> 45 </div> 46 <div class="qasubflex"> 47 <p class="qa__A3">A</p> 48 <p class="qa__text6">文章文章文章</p> 49 </div> 50 </div> 51 </div> 52 </div> 53 </section>

回答3件
あなたの回答
tips
プレビュー