Part4 - 1カラム(2) WebFont
WebFont
header
- WebFontsを読み込み
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】Wedding Party Invitation</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=Josefin+Sans&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet"> </head> <body> <!-- .header --> <header class="header"> <div class="container"> <h1><img src="img/hero_text.png" srcset="img/hero_text.png 1x,img/hero_text@2x.png 2x" alt="Welcome to Our Wedding Party" alt=""></h1> <nav class="gnav"> <ul> <li><a href="#msgArea">Message</a></li> <li><a href="#dateArea">Date</a></li> <li><a href="#formArea">Form</a></li> </ul> </nav><!-- /.gnav --> <p class="scroll">Scroll<br><img src="images/bar.png" alt=""></p> </div><!-- /.container --> </header> <!-- /.header -->
さわらび明朝 Sawarabi Mincho
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; } img { max-width: 100%; vertical-align: bottom; } /* ------------------------------------------ body ------------------------------------------- */ body { color: #333; font-size: 18px; font-family: 'Josefin Sans','Sawarabi Mincho',serif; line-height: 1.0; } /* ------------------------------------------ layout ------------------------------------------- */ .container { max-width: 1240px; margin: 0 auto; padding: 80px 20px 0; } /* ------------------------------------------ header ------------------------------------------- */ .header { background: url(../img/hero.jpg) no-repeat right center; background-size: cover; } .header > .container { position: relative; height: 100vh; /* テキスト例では、720px */ } .header h1 { padding-top: 120px; } .header .scroll { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; font-size: 16px; } .header .scroll img { margin-top: 8px; } /* ------------------------------------------ nav ------------------------------------------- */ .gnav { position: fixed; left: 0; top: 0; width: 100%; z-index: 100; } .gnav ul { display: flex; justify-content: center; gap: 100px; padding: 20px 0; background-color: rgba(255, 255, 255, .7); } .gnav li a:hover { text-decoration: underline; }