モバイルファースト - header例
モバイルファースト - header例
HTML記述例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Menu</title> <link rel="stylesheet" href="css/menu.css"> </head> <body> <!-- .header --> <header class="header"> <div class="container"> <h1 class="logo"><a href="#"><img src="img/logo.png" alt=""></a></h1> <nav class="gnav"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="content.html">サービス案内</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav><!-- /.gnav --> </div><!-- /.container --> </header> <!-- /.header --> </body> </html>
CSS記述例
@charset "URF-8"; /* ------------------------------------------- reset ------------------------------------------- */ * { 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: 16px; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; line-height: 1.0; } /* ------------------------------------------- layout ------------------------------------------- */ .container { width: min(94%, 960px); margin: 0 auto; padding: 20px 0; } .logo { margin-bottom: 30px; text-align: center; } .gnav ul { display: flex; justify-content: center; gap: 40px; } @media screen and (min-width: 768px) { .header > .container { display: flex; align-items: center; } .logo { width: 134px; margin: 0 auto 0 0; } }