ヘッダーデザイン一覧
HTMLとCSSのみで実装できるヘッダーデザイン
-
ロゴとテキスト
LOGOサイト説明などのテキスト
<header> <p class="logo"><a href="!#">LOGO</a><span>サイト説明などのテキスト</span></p> </header>
header { width: 100%; line-height: 60px; background: #3c3c3c; } /* ロゴ */ header .logo { padding: 0 20px; font-size: 18px; color: #fff; letter-spacing: .2em; } /* テキスト */ header .logo span { margin-left: 10px; font-size: 14px; color: #fff; letter-spacing: .1em; vertical-align: middle; }
コードを見る -
ロゴとメニュー
<header> <p class="logo"><a href="#!">LOGO</a></p> <ul> <li><a href="#!">リンク1</a></li> <li><a href="#!">リンク2</a></li> <li><a href="#!">リンク3</a></li> </ul> </header>
header { display: flex; align-items: center; justify-content: space-between; width: 100%; line-height: 60px; background: #3c3c3c; display: inline-block; vertical-align: middle; } /* ロゴ */ header .logo { padding: 0 20px; font-size: 18px; color: #fff; letter-spacing: .2em; } /* メニュー */ header ul { padding: 0 30px; } header li { display: inline-block; padding: 0 6px; font-size: 14px; letter-spacing: .1em; } header li a { color: #fff; } /* メニューのリンクホバーで線 */ header li a:hover { text-decoration: underline; }
コードを見る -
ロゴとボタン
<header> <p class="logo"><a href="#!">LOGO</a></p> <p class="button"><a href="#!">BUTTON</a></p> </header>
header { position: relative; width: 100%; line-height: 60px; background: #3c3c3c; display: inline-block; vertical-align: middle; } /* ロゴ */ header .logo { padding: 0 20px; font-size: 18px; color: #fff; letter-spacing: .2em; } /* ボタン */ header .button { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); } /* ボタンのデザイン */ header .button a { display: block; width: 120px; height: 40px; line-height: 40px; background: #fff; font-size: 14px; color: #3c3c3c; text-align: center; letter-spacing: .2em; text-indent: .2em; border-radius: 10px; }
コードを見る -
ロゴとメニューボタン
<header> <p class="logo"><a href="#!">LOGO</a></p> <p class="menu"><span></span><span></span><span></span></p> </header>
header { display: flex; align-items: center; justify-content: space-between; width: 100%; line-height: 60px; background: #3c3c3c; } /* ロゴ */ header .logo { padding: 0 20px; font-size: 18px; color: #fff; letter-spacing: .2em; } /* メニューボタン */ header .menu { position: relative; width: 60px; height: 60px; cursor: pointer; } header .menu span { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 30px; height: 2px; margin: auto; background: #fff; } header .menu span:nth-of-type(1) { transform: translateY(-10px); } header .menu span:nth-of-type(3) { transform: translateY(10px); }
コードを見る