▼名前
▼性別 選択 男 女
▼コメント[必須]>>22 > >>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ピクセルに限定するよ 横長のフルHDモニタ・スマホ横持ちとかだと余裕で越えちゃうけど大丈夫? margin: 0 auto;←四辺指定はパラメータ二つのとき、上下・左右の順で指定するよ 縦マージンが0、横マージンが自動ってことね } p {←セレクタ指定にclass・id等ないから、表示ページの全pタグのうち、class・idを指定してpaddingを定義していないもの全部に適用されるけど大丈夫? padding: 20px;←パディングは20ピクセルを取るよ } Resources←これFirefoxでしか使わないんじゃなかったかな?しかももうサポート・推奨してなかった気がする 後にurl・パスを続けて、参照先を読み込んでおくとかそんなだったはず……まあ要らないね んで、そのあたりを直したのがこちら↓ ここはdiv class="wrap"にしたから、.wrap部分が反映されるよ。まあ、本来ならここに書く必要はないかな……ここはdiv class="conts"にしたから、.conts部分が反映されるよ。字がデカ過ぎない?テスト用?それともタイトル的なのでも入れるのかな? >>22 ↑他のレスの影響を消したい時は自レスへのアンカー打って、リンク先を見るのが良いね
▼削除/編集パス※半角英数4〜8
back