ナビゲーションの種類(PC版)
- ボタン形式(面)
- ロゴとナビゲーションを横に並ぶ
ボタン形式(面)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>SHELLY’S</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <!-- .header --> <header class="header"> <h1 class="logo"><a href="#"><img src="img/logo.png" alt="SHELLY'S"></a></h1> <nav class="gnav"> <ul> <li><a href="#">NEWS</a></li> <li><a href="#">PROFILE</a></li> <li><a href="#">DISCOGRAPHY</a></li> <li><a href="#">MEDIA/LIVE</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </header> <!-- /.header --> </div><!-- /.container --> </body> </html>
@charset "UTF-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: #222; font-size: 16px; font-family: sans-serif; line-height: 1.0; } /* ---------------------------------- layout ---------------------------------- */ .container { width: 960px; margin: 0 auto; } /* ---------------------------------- header ---------------------------------- */ .header { text-align: center; } .header > h1 { padding: 40px 0; } /* ---------------------------------- nav ---------------------------------- */ .gnav { margin-bottom: 20px; } .gnav > ul { display: flex; } .gnav li { width: calc(100% / 5); text-align: center; line-height: 60px; } .gnav li a { display: block; border-right: 1px solid #666; } .gnav li:first-child a { border-left: 1px solid #666; }
ロゴとナビゲーションを横に並ぶ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HI University</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <!-- .header --> <header class="header"> <div class="container"> <h1 class="logo"><img src="img/logo.png" alt="HI University"></h1> <nav class="gnav"> <ul> <li><a href="#">大学案内</a></li> <li><a href="#">学部・大学院</a></li> <li><a href="#">国際交流</a></li> <li><a href="#">入試情報</a></li> <li><a href="#">キャンパスライフ</a></li> </ul> </nav> </div><!-- /.container --> </header> <!-- /.header --> </div><!-- /.container --> </body> </html>
@charset "UTF-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: #222; background-color: #e7f0f4; font-size: 16px; font-family: sans-serif; line-height: 1.0; } /* ---------------------------------- layout ---------------------------------- */ .container { width: 960px; margin: 0 auto; } /* ---------------------------------- header ---------------------------------- */ .header { padding: 40px 0 30px; background-color: #fff; } .header > .container { display: flex; align-items: center; } .header h1 { width: 132px; margin-right: auto; } /* ---------------------------------- nav ---------------------------------- */ .gnav { margin-bottom: 20px; } .gnav > ul { display: flex; gap: 40px; }