pow********

2022/1/18 0:19

22回答

CSSの書き方について 初心者です。画像にあるデザインをCSSで書こうとしておりますが、書き方がわからず苦戦しております。 ーーーーーーーーーーコードーーーーーーーーーー [HTML]

CSSの書き方について 初心者です。画像にあるデザインをCSSで書こうとしておりますが、書き方がわからず苦戦しております。 ーーーーーーーーーーコードーーーーーーーーーー [HTML] <div class="A"> A </div> <div class="B"> B </div> <div class="C"> C </div> <p class="center__text"> こんにちは！私です </div> [CSS] .A{ 画面左側背景 } .B{ 画面真ん中背景 } .C{ 画面右側背景 } .center__text{ テキスト } ーーーーーーーーーーコードーーーーーーーーーー 以上、よろしくお願いします。

画像

HTML、CSS | ホームページ作成・46閲覧

その他の回答（1件）

1
ybb********

カテゴリマスター

2022/1/18 1:08

pow********さん >････画像にあるデザインをCSSで書こうと･･･････ 例えば、↓ <!DOCTYPE html> <html lang="en"> <head> <style> .box{ position:relative; width:30%; margin:0 auto; } .wrapper{ position:relative; display: flex; width:100%; height:300px; } .A{ flex:1; background:#0a0; } .B{ flex:4; background:#fff; } .C{ flex:3; background:#0a0; } .center_text{ position:absolute; width:100%; top:20%; text-align:center; font-size:3em; color:#aaa; } </style> </head> <body> <section class="box"> <div class="wrapper"> <div class="A">A</div> <div class="B">B</div> <div class="C">C</div> </div> <p class="center__text"> こんにちは！私です </p> </section> </body> </html>

1人がナイス！しています