フルスクリーン - グラデーション
フルスクリーン - レスポンシブ
- スマートフォン・パソコンでフルスクリーンで表示する
HTML記述例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>ヒーローイメージ</title> <link rel="stylesheet" href="css/style.css"> <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=Caveat:wght@400;700&display=swap" rel="stylesheet"> </head> <body id="top"> <!-- .header --> <header class="header"> <div class="container"> <h1>The Web Design</h1> <nav class="gnav"> <ul> <li><a href="#">Portfolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div><!-- /.container --> </header> <!-- /.header --> <!-- .main-content --> <main class="main-content"> <a href="#" class="prof">Portfolio</a> </main> <!-- /.main-content --> <!-- .footer --> <footer class="footer"> <p><small>© The Web Design</small></p> </footer> <!-- /.footer --> </body> </html>
CSS記述例
@charset "UTF-8"; /* ------------------------------------------ reset ------------------------------------------ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ul, li { list-style: none; } a { color: inherit; text-decoration: none; } /* ------------------------------------------ body ------------------------------------------ */ body { color: #fff; font-size: 16px; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; line-height: 1.0; } #top { width: 100%; height: 100vh; background: linear-gradient(25deg, rgba(178, 5, 5, 0.6), rgba(4, 160, 4, 0.6)), url(../img/grass.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } /* ------------------------------------------ header ------------------------------------------ */ .header { position: fixed; top: 0; width: 100%; } .container { width: min(92%, 960px); margin: auto; text-align: center; } .header h1 { padding-top: 2vh; margin: 0 auto 1.5vh 0; font-size: 2.4em; font-family: 'Caveat', cursive; } .gnav ul { display: flex; justify-content: center; gap: 30px; } .gnav li { font-size: 1.2em; } .gnav a:hover { border-bottom: 2px solid #fff; padding-bottom: 2px; } @media screen and (min-width: 768px) { .container { display: flex; align-items: center; } .header h1 { margin: 0 auto 1.5vh 0; font-size: 3.6em; } } /* ------------------------------------------ main ------------------------------------------ */ .main-content { display: flex; align-items: center; width: min(92%, 960px); height: 100vh; margin: 0 auto; text-align: center; } a.prof { display: inline-block; margin: auto; padding: 10px 40px; border: 2px solid #fff; font-size: 18px; font-weight: 600; text-align: center; letter-spacing: .08em; } a.prof:hover { background-color: rgb(189, 19, 19); } /* ------------------------------------------ footer ------------------------------------------ */ .footer { position: fixed; bottom: 0; width: 100%; height: 40px; text-align: center; } @media screen and (min-width: 768px) { .footer { height: 50px; } }
positionで上下左右の中央配置
- 「absolute」は「fixed」でも可
element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
上下左右の中央配置時の幅指定は不要
/* ------------------------------------------ main ------------------------------------------ */ .main-content { position: relative; width: min(92%, 960px); height: 100vh; margin: 0 auto; text-align: center; } a.prof { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; margin: auto; padding: 10px 40px; border: 2px solid #fff; font-size: 18px; font-weight: 600; text-align: center; letter-spacing: .08em; } a.prof:hover { background-color: rgb(189, 19, 19); }
要素の幅・高さが指定されている場合
element { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: ●●px; height: ●●px; }