Q&A
> このソースコードを見たら、プロはどう思いますか？
HTMLとCSSを記載してください。
それを見ないとなんともいえません。
（クラス数は間違いなく15もいらないのは明白ですが）
あと、どのようにズレたのかも記載した方がよいかと。
こんにちは
連日質問させていただいています。
現在htmlを勉強しておりまして、外部へ出せませんが仮インターネットサイトのページをカンプに合わせて作成しています。
画像のような構造の場合、
自分はまず骨組みになるHTMLですが、 セレクタはimg,div,pのみを使っています。（section等は今回無しで）
その時同じ形の構造が３つ並んでいるのがわかるので、画像と右のQAを合わせて１つの塊としまずはそこのHTMLを書いていきます。その後２回コピペします。
そしてそれぞれの要素に対して一つずつclass名をつけていきます。
この画像の場合１５個のclass名を作ります。
その後その１５個のclass名をCSSにセレクタをコピーし、１つの要素ずつ完成させていきます。
３つの塊のうち、１つができたらhtml同様２回ずつコピペします。
あとはずれているところを調整していって完成です。
正直初心者なのでこのやり方しかほぼ知りません。
見ようみまねで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件
1
ベストアンサー
それぞれのパーツ共通のclassでいけると思います。
こういう感じはいかがでしょうか？
動作確認用サンプル：https://jsfiddle.net/q6huz9cv/
html
1<div class="qa-item"> 2 <div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div> 3 <div class="qa-item__txt-box"> 4 <p class="qa-item__question">ダミーテキストダミーテキストダミーテキストダミーテキスト。</p> 5 <p class="qa-item__answer">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト。</p> 6 </div> 7</div> 8 9<div class="qa-item"> 10 <div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div> 11 <div class="qa-item__txt-box"> 12 <p class="qa-item__question">ダミーテキストダミーテキストダミーテキストダミーテキスト。</p> 13 <p class="qa-item__answer">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト。</p> 14 </div> 15</div> 16 17<div class="qa-item"> 18 <div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div> 19 <div class="qa-item__txt-box"> 20 <p class="qa-item__question">ダミーテキストダミーテキストダミーテキストダミーテキスト。</p> 21 <p class="qa-item__answer">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト。</p> 22 </div> 23</div>
css
1/*================================================== 2 3** リセットCSS 4==================================================*/ 5*, 6*::before, 7*::after { 8 margin: 0; 9 padding: 0; 10 box-sizing: border-box; 11} 12 13body { 14 padding: 1em; 15} 16 17img { 18 width: 100%; 19 height: auto; 20 vertical-align: bottom; 21} 22 23/*================================================== 24 25** Q and A 26==================================================*/ 27.qa-item { 28 display: flex; 29 gap: 2%; 30 31 border: 3px solid red; 32} 33 34.qa-item:not(:first-child) { 35 margin-top: 2vw; 36} 37 38.qa-item__img-box { 39 flex-shrink: 0; 40 width: 25%; 41} 42 43.qa-item__img-box img { 44 width: 100%; 45 height: 100%; 46 object-fit: cover; 47} 48 49.qa-item__txt-box {} 50 51.qa-item__question {} 52 53.qa-item__question::before { 54 content: "Q."; 55} 56 57.qa-item__answer { 58 margin-top: 1em; 59} 60 61.qa-item__answer::before { 62 content: "A."; 63} 64 65.qa-item__question, 66.qa-item__answer { 67 position: relative; 68 padding-left: 1.5em; 69} 70 71.qa-item__question::before, 72.qa-item__answer::before { 73 position: absolute; 74 top: 0; 75 left: 0; 76}
（質問者様のコメントより）
しかし、文字の大きさや色、その他装飾は確かにまとめてできるので楽なのですが、唯一”配置”だけがどうにもなりませんでした。 例えばmagin等で一つの画像を指定の場所に配置した時、残り二つの画像も同じく等間隔で配置されますよね？ しかし残り二つの配置はデザインカンプと少しずれていて、そのずれている画像を動かすにはその画像単独のclassがないときっちり配置できません。そのためにclassが多量に使われているということです。
具体的な状況がわかりませんので最適な答えを導き出すことが難しいです。
現時点で言えることは、共通のclassはつけつつ、さらに個別のclassをつけた方がcssとしては綺麗だと思います。
classをたくさんつけることは悪いことではありません。
いかにcssをかく行数を減らすかということの方が大事です。
その方がメンテナンス性も処理速度も高いからです。
同じ記述を何回もしないようにするために、共通のclass・固有のclassをそれぞれつけるようにしましょう。
html
1<div class="qa-item qa-item--1"> <!-- 固有class追加 --> 2 <div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div> 3 <div class="qa-item__txt-box"> 4 <p class="qa-item__question">ダミーテキスト</p> 5 <p class="qa-item__answer">ダミーテキスト</p> 6 </div> 7</div> 8 9<div class="qa-item qa-item--2"> <!-- 固有class追加 --> 10 <div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div> 11 <div class="qa-item__txt-box"> 12 <p class="qa-item__question">ダミーテキスト</p> 13 <p class="qa-item__answer">ダミーテキスト</p> 14 </div> 15</div> 16 17<div class="qa-item qa-item--3"> <!-- 固有class追加 --> 18 <div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div> 19 <div class="qa-item__txt-box"> 20 <p class="qa-item__question">ダミーテキスト</p> 21 <p class="qa-item__answer">ダミーテキスト</p> 22 </div> 23</div>
css
1/* 例えば、1つ目の質問文だけfont-sizeを大きくしてみる */ 2.qa-item--1 .qa-item__question { 3 font-size: 2em; 4}
投稿2023/01/19 07:29
編集2023/01/19 09:11
総合スコア2307
回答へのコメント
ご丁寧にありがとうございます！
実はそのような形のHTMLは最初組んでみました。
そうすることで、少ないclass名、少ないセレクタで対応できました。
しかし、文字の大きさや色、その他装飾は確かにまとめてできるので楽なのですが、唯一”配置”だけがどうにもなりませんでした。
例えばmagin等で一つの画像を指定の場所に配置した時、残り二つの画像も同じく等間隔で配置されますよね？
しかし残り二つの配置はデザインカンプと少しずれていて、そのずれている画像を動かすにはその画像単独のclassがないときっちり配置できません。そのためにclassが多量に使われているということです。
質問の意図が伝わりにくい文章ですみません。。。
回答を更新しました。ご覧ください
さらにご丁寧にありがとうございます！
確かにその方法なら現状よりスッキリさせることができそうです！
とても参考になりました。
次からそのように組んでみることにします！
0
こんな感じなんでしょうけど、ご質問の絵は、初心者に描画させるのは難しいかなぁと思います。
CSSを覚えた当初、それができるようになるのに２～３か月かかりました。
HTML/CSS
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>コードビュー</title> 7 <style>.flex{ 8 max-width: 500px; 9 display: -webkit-flex; 10 display: flex; 11 flex-wrap:wrap; 12 padding-top: 15px; 13 padding-bottom: 15px; 14 } 15 img{width:100px; height: 100px;} 16</style> 17 18</head> 19 20<body> 21 22<div class="flex"><img src="https://webusupload.apowersoft.info/apowerjp/wp-content/uploads/2019/05/erase-image-text-top.jpg" alt="画像"> 23 <div> 24 <p>文章文章文章文章文章文章文章文章文章</p> 25 <p>文章文章文章文章文章文章文章文章文章</p> 26 </div> 27</div> 28<div class="flex"><img src="https://webusupload.apowersoft.info/apowerjp/wp-content/uploads/2019/05/erase-image-text-top.jpg" alt="画像"> 29 <div> 30 <p>文章文章文章文章文章文章文章文章文章</p> 31 <p>文章文章文章文章文章文章文章文章文章</p> 32 </div> 33</div> 34<div class="flex"><img src="https://webusupload.apowersoft.info/apowerjp/wp-content/uploads/2019/05/erase-image-text-top.jpg" alt="画像"> 35 <div> 36 <p>文章文章文章文章文章文章文章文章文章</p> 37 <p>文章文章文章文章文章文章文章文章文章</p> 38 </div> 39</div> 40 41 42 43</body> 44<script type="text/javascript"> 45</script> 46 47</html>
投稿2023/01/19 05:44
総合スコア333
回答へのコメント
ご回答ありがとうございます。
この構造自体は問題なく書けます。
ただ、一つの要素に対して一つのclass名をつけてしまっているのが無駄に感じております。
自分で自由配置できるのであればセレクタをまとめられるのですが、カンプに合わせるとどうしても似た構造でも手間ですがclassに頼ってしまいます。
＞この構造自体は問題なく書けます。
＞ただ、一つの要素に対して一つのclass名をつけてしまっているのが無駄に感じて
だとしたら、コード載せてもらわないと、何に困ってるのかが全くわからないです。
ご指摘ありがとうございます。
コードを追記いたしました。
コードみましたが。
たとえば、
class="qa__flex1"
class="qa__flex2"
class="qa__flex3"
これは、
class="qa__flex1"
に統一できます。
IDは、1個しか使えませんが。classは複数の要素に同じclassを使用できます。
よけいに、貴方が、なにを悩んで、なにを質問したいのか、わからなくなってきました。
何がわからないか。 「～がわからない」とシンプルに教えていただけますか？？？？
あなたのおっしゃる 「カンプ」とは何ですか？
最初はclass名は一つだったのですが、class="qa__flex1"のセレクタの中にbackgroundで四角の背景を入れるためそれぞれ独立しないとうまく合いませんでしたのでそれぞれで別のclass名をつけて対応しました。（画像とは少し違いますが）
カンプはデザインカンプのことです。
これに合わせてピクセルパーフェクトになるよう作成しています。
要はこの多すぎるclass名をどうにか少なくしたいという悩みです。
要素一つに対して一つのclassを付けるしかやり方を知らないためです。
paddingやmaginを使って任意の位置に一個づつ調整しています。
解決したようで何よりです。
