HTML/CSS のどんな質問にも優しく答えるｽﾚ 52

**Name_Not_Found** · 2023/08/23(水) 18:52:13.52

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつはこのスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■関連スレ
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.net/test/read.cgi/hp/1626528070/

■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html

前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 51
https://mevius.5ch.net/test/read.cgi/hp/1667020591/

**Name_Not_Found** · 2023/08/23(水) 21:00:21.97

>>前998
新スレ立てた瞬間に知り合いが遊びに来てレスするの忘れてスレ埋まってしまいました。
また相談に乗ってもらったらありがたいです

**Name_Not_Found** · 2023/08/24(木) 09:43:59.41

質問失礼します。
レスポンシブデザインでサイトを作成しており、PCから見た時に①の画像のようになるようにCSSを書きました。
これがスマホから見ると②の画像のようになってしまいます。
PC表示部分のCSSは③の画像、スマホ表示部分のCSSは④のような状態なのですが、どこを改善すればよいでしょうか。
https://i.imgur.com/e42hJSO.png
https://i.imgur.com/mBDlOmA.png
https://i.imgur.com/6RavAGV.png
https://i.imgur.com/DuEybLY.png

**Name_Not_Found** · 2023/08/24(木) 09:50:05.24

>>3
②が正しくないのでしたら、まずどうなるのが正しいのかを書きましょう

**Name_Not_Found** · 2023/08/24(木) 11:06:37.25

>>3
画像のinline-block上の階層でflex使いなよ
横に並べるにしても縦に並べるにしても制御が楽になるよ

**Name_Not_Found** · 2023/08/24(木) 11:07:39.32

>>5
あ、編集したら抜けた
画像のinline-block「やめて」上の階層で

**Name_Not_Found** · 2023/08/24(木) 11:08:50.05

>>4
失礼しました
テキストがスマホの端で折り返し、ピンクの点線枠内に収まるようにしたいです

**Name_Not_Found** · 2023/08/24(木) 11:09:17.77

>>3
#mainあたりにmax-width入れてみては？

**Name_Not_Found** · 2023/08/24(木) 11:09:20.06

>>5
レスありがとうございます
flex調べてみます

**Name_Not_Found** · 2023/08/24(木) 11:10:32.44

>>8
③のCSSの#main内でよろしいですかね
やってみます

**Name_Not_Found** · 2023/08/24(木) 11:33:56.55

>>8さんのやり方でできました！
しかし制御が楽になるとのことなので、この機会にflexのことも勉強しようと思います
また何かありましたらこのスレで質問させてください
アドバイスありがとうございました

**Name_Not_Found** · 2023/08/24(木) 17:47:45.35

疑似要素を4つ使いたい場合、タグを増やすしかない？
でもそれって明らかに論理マークアップ上で無駄なHTMLだよね

**Name_Not_Found** · 2023/08/24(木) 19:11:34.49

それをいうなら疑似要素が4つ必要になるのはデザインに対してマークアップがおかしいです

**Name_Not_Found** · 2023/08/24(木) 20:20:35.98

正論ですな

**Name_Not_Found** · 2023/08/24(木) 22:20:40.10

>>13　例えば

見出しタイプ1
====================================

↑これが通常の見出しで一箇所だけ↓こうなる場合

☆　　　　　　　　　★ 　　　※星部分が回転
　　見出しタイプ2
★　　　　　　　　　☆

divで親タグを増やしていくって方法以外無いでしょう？
デザインの為だけに無駄なＨＴＭＬが増えるんでしょ？

<h2>見出しタイプ1<h2>
<div class="star"><h2>見出しタイプ2</div>

これのどこがマークアップがおかしいの？

**Name_Not_Found** · 2023/08/24(木) 22:21:53.66

↑閉じタグ抜けてるがきにせんといて

**Name_Not_Found** · 2023/08/24(木) 22:35:11.89

h2の飾りって意味合いだと
<h2><span></span>見出し<span></span></h2>
って形にしたくなる

**Name_Not_Found** · 2023/08/25(金) 00:24:37.98

親にdiv追加じゃなくh2にborder-imageとか

**Name_Not_Found** · 2023/08/25(金) 00:48:03.16

>>15
その例だとborderや背景でできるだろとしか言いようがないけど
重要なことを教えると
空divなどと違って装飾のための入れ子は構造的に何もおかしくない
>マークアップ上で無駄なHTMLだよね
に答えるなら「無駄じゃない」で終わり

**Name_Not_Found** · 2023/08/25(金) 01:02:29.10

あと見出しタイプ2という呼称からの推察になるが
h2のバージョン違いなら
>>17の言うようにh2の中身を変えるかな

通常
<h2 class="head2">
<span class="head2__label">見出し</span>
</h2>

星付き
<h2 class="head2--star">
<span class="head2__label">見出し</span>
</h2>

こんなん

**Name_Not_Found** · 2023/08/25(金) 07:56:42.91

みんなCSSで背景作ればいいんです言うけど
レスポンシブ対応はどうすればいいの？