質問板

>>22
> ほい、よーやっとおかしいトコ直し終わった……そもそも他のチューターサイトからのコピーで全然言う事聞いてないね、キミ
CSSで指定してるセレクタ「.wrap」と「.conts」がどちらもHTMLsource内にないんだもん、反映されるのはpへのpaddingだけだよね
divにclass="wrap"を持たせたものと、class="conts"を持たせたものをそれぞれ用意してみたよ
んでだ、何がおかしいかって……意味を考えずにサンプルをただ持ってきてるから、改行とかインシデント【行の頭を落として可読性を高めるアレのこったね】がまるまる残ってるんだよ
改行は全部投稿時にbrタグに置き換わるんだから、styleタグ内に混ざっちゃアカンでしょ
後、意味のない・デザイン的におかしな指示とかもね
無駄な空白も関数の引値おかしくしたりするから、とりあえず削っといたよ

.wrap {
margin: 30px;←これいる？marginは本来の表示領域（画面の左上）から始まるから、30ピクセル分だけ上と左に隙間ができちゃうよ？
}

.wrap::before {←コロン二連（::）で指す疑似要素のうち、beforeは「コンテンツのその前」の意味、だから以下の指示を全部.wrap内に納めちゃう　このままだと画面全体（先・後レスなどを含めて）を画像の下に敷いて隠しちゃうね
content: "";←スペースですらない空なら要らないよね
display: block;←他板はdisplayの文字列がNGなんだ
position: fixed;←「画面に対して固定」位置の意味だね
top: 0px;←その場所が上から0ピクセル
left: 0px;←左から0ピクセルから始まるよ、って言ってる
z-index: -1;←これ、他の要素との重ね合せの優先度=手前〜奥のどこに置くかを「－1」……ずっと奥だってことね
width: 100%;←%は使った場所で示す長さが変わるから気をつけてね、ここは問題ないけど
height: 100vh;←vhは「画面の高さ（100で一画面分）」上と合わせて指定した領域は「画面一枚分」っていう大きさだね
background-image: url(https://img.freepik.com/free-vector/watercolor-abstract-background_220290-24.jpg?w=1060&t=st=1709103970~exp=1709104570~hmac=fb0edebe8e8e7ddd929adc714e8e3f51e3ffba1fe634bc51d35ba1bebd192f85);←ちゃんと直リン可能なとこから貰ってきた？俺は知らんよ？
background-size: cover;←「指定した背景をどのくらいの大きさに広げるか」、今回は「縦横比を崩さず・領域いっぱいに隙間なく」の指定だね　縦横の長さ（ディスプレイのピクセルと画像のピクセル）の比によって縦横のどちらかが切れたりするよ
background-repeat: no-repeat;←領域の隙間を埋めるのに背景を繰り返すかどうか……だから、別に要らないね
}

.conts {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;←四ツ角を全部半径10ピクセルで丸めるよ
font-size: 40px;←フォントサイズは高さを参照するからね
text-align: center;
padding: 5%;←内側上下左右5%をパディング【文字の書かれない範囲】にするよ行数によって可変する上下もだから、実際に使うまでどのくらいの余地が出来るかは分からないよ
max-width: 800px;←領域の最大幅を800ピクセルに限定するよ　横長のフルＨＤモニタ・スマホ横持ちとかだと余裕で越えちゃうけど大丈夫？
margin: 0 auto;←四辺指定はパラメータ二つのとき、上下・左右の順で指定するよ　縦マージンが0、横マージンが自動ってことね
}

p {←セレクタ指定にclass・id等ないから、表示ページの全pタグのうち、class・idを指定してpaddingを定義していないもの全部に適用されるけど大丈夫？
padding: 20px;←パディングは20ピクセルを取るよ
}

Resources←これFirefoxでしか使わないんじゃなかったかな？しかももうサポート・推奨してなかった気がする
後にurl・パスを続けて、参照先を読み込んでおくとかそんなだったはず……まあ要らないね

んで、そのあたりを直したのがこちら↓