【CSS】ロゴが左にあるヘッダーメニューの作り方

WePuri

デモサイトはこちら

完成データダウンロード

完成コード

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">
        <h1 class="logo">
            <a href="">LOGO</a>
        </h1>
        <nav class="menu_pc">
            <ul>
                <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>

style.css

.header_main{
    padding: 0 20px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    background: #000;
    .logo{
        height: 100%;
        a{
            padding-left: 20px;
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 28px;
            color: #fff;
        }
    }
    nav.menu_pc{
        height: 100%;
        @media (max-width: 1040px){
            display: none;
        }
        ul{
            height: 100%;
            display: flex;
            li{
                height: 100%;
                a{
                    padding: 0 20px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    color: #fff;
                    transition: .3s;
                    &:hover{
                        background: #333;
                    }
                }
            }
        }
    }
}

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;
}

いいなと思ったら応援しよう！