回答編集履歴
1
固有class
test
CHANGED
|
@@ -107,3 +107,49 @@
|
|
|
107
107
|
left: 0;
|
|
108
108
|
}
|
|
109
109
|
```
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
（質問者様のコメントより）
|
|
114
|
+
> しかし、文字の大きさや色、その他装飾は確かにまとめてできるので楽なのですが、唯一”配置”だけがどうにもなりませんでした。 例えばmagin等で一つの画像を指定の場所に配置した時、残り二つの画像も同じく等間隔で配置されますよね？ しかし残り二つの配置はデザインカンプと少しずれていて、そのずれている画像を動かすにはその画像単独のclassがないときっちり配置できません。そのためにclassが多量に使われているということです。
|
|
115
|
+
|
|
116
|
+
具体的な状況がわかりませんので最適な答えを導き出すことが難しいです。
|
|
117
|
+
現時点で言えることは、共通のclassはつけつつ、さらに個別のclassをつけた方がcssとしては綺麗だと思います。
|
|
118
|
+
|
|
119
|
+
classをたくさんつけることは悪いことではありません。
|
|
120
|
+
**いかにcssをかく行数を減らすかということの方が大事**です。
|
|
121
|
+
その方がメンテナンス性も処理速度も高いからです。
|
|
122
|
+
同じ記述を何回もしないようにするために、共通のclass・固有のclassをそれぞれつけるようにしましょう。
|
|
123
|
+
|
|
124
|
+
```html
|
|
125
|
+
<div class="qa-item qa-item--1"> <!-- 固有class追加 -->
|
|
126
|
+
<div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div>
|
|
127
|
+
<div class="qa-item__txt-box">
|
|
128
|
+
<p class="qa-item__question">ダミーテキスト</p>
|
|
129
|
+
<p class="qa-item__answer">ダミーテキスト</p>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div class="qa-item qa-item--2"> <!-- 固有class追加 -->
|
|
134
|
+
<div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div>
|
|
135
|
+
<div class="qa-item__txt-box">
|
|
136
|
+
<p class="qa-item__question">ダミーテキスト</p>
|
|
137
|
+
<p class="qa-item__answer">ダミーテキスト</p>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<div class="qa-item qa-item--3"> <!-- 固有class追加 -->
|
|
142
|
+
<div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div>
|
|
143
|
+
<div class="qa-item__txt-box">
|
|
144
|
+
<p class="qa-item__question">ダミーテキスト</p>
|
|
145
|
+
<p class="qa-item__answer">ダミーテキスト</p>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
```css
|
|
151
|
+
/* 例えば、1つ目の質問文だけfont-sizeを大きくしてみる */
|
|
152
|
+
.qa-item--1 .qa-item__question {
|
|
153
|
+
font-size: 2em;
|
|
154
|
+
}
|
|
155
|
+
```
|