Grid で中央配置
unsplash.com
完成例
コーディング例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】Grid で中央配置</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="header"> <div class="container"> <h1>HeroHeader</h1> <p>タイトルを中央に配置</p> </div><!-- /.container --> </header> </body> </html>
@charset "UTF-8"; /* ---------------------------------------- reset ---------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; vertical-align: bottom; } /* ---------------------------------------- body ---------------------------------------- */ body { background-color: #fff; color: #333; font-size: 16px; font-family: sans-serif; line-height: 1.0; } /* ---------------------------------------- header ---------------------------------------- */ .header { display: grid; place-items: center; width: 100%; height: 100vh; background: url(../img/bg_img.jpg) no-repeat center top / cover; } .container { width: fit-content; padding: 16px 40px 10px; background-color: rgba(255, 255, 255, 0.8); border: 2px solid #fff; color: #3d3b28; text-align: center; } h1 { font-size: 32px; font-family: 'Homemade Apple', cursive; line-height: 1.2; } p { font-size: 20px; }