【CSS】シンプルなヘッダーメニューの作り方

WePuri

デモサイト

https://wepuri.net/web_gadget/header/header_nav_01/

完成データ

完成コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./style.css">
    <title>シンプルなヘッダーメニュー</title>
</head>
<body>
    
    <header class="header_main">
        <nav>
            <ul class="mune_pc">
                <li><a href="">HOME</a></li>
                <li><a href="">NEWS</a></li>
                <li><a href="">BLOG</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </nav>
    </header>   

</body>
</html>

CSS

.header_main{
  height: 80px;
  background: #242121;
  @media (max-width:1040px) {
    display: none;
  }
  nav{
    height: 100%;
    display: flex;
    justify-content: center;
    ul.mune_pc{
      height: 100%;
      display: flex;
      li{
        height: 100%;
        &:first-of-type{
          border-left: 1px solid rgba(255, 255, 255, 0.6);
        }
        a{
          height: 100%;
          width: 120px;
          padding: 0 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          border-right: 1px solid rgba(255, 255, 255, 0.6);
          font-size: 14px;
          color: #fff;
          transition: 0.3s;
          &:hover{
            background: rgb(52, 49, 49);
          }
        }
      }
    }
  }
}

reset.css

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
    color: #000000;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.05em;
    overflow-x: hidden;
}


/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    color: #000;
}

/* box-sizingを全ブラウザに対応 */
*,
*:before,
*:after {
    box-sizing: border-box;
}

/* 画像を縦に並べた時に余白が出ないように */
img {
    vertical-align: top;
}

/* 縦方向の揃え位置を中央揃えに指定 */
input,
select {
    vertical-align: middle;
}

/* 水平罫線のデフォルトである立体的な罫線を見えなく */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

/* a要素のフォントサイズなどをリセット */
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
}

/* iPhoneがメールアドレスと電話番号に勝手に下線を引くのを防ぐ */
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/* ダークモード対応 */
html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

/* abbrとdfn要素に下線とヘルプカーソルを追加 */
abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

この記事が気に入ったらサポートをしてみませんか？