見出し画像

シンプルで簡単なフッターメニューの作り方【HTML,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>footer_01</title>
</head>
<body>
    <footer class="footer_main">
        <div class="wrap">
            <h2 class="logo">
                <a href="">WePuri</a>
            </h2>
            <nav>
                <ul>
                    <li><a href="">トップページ</a></li>
                    <li><a href="">レッスンまとめ</a></li>
                    <li><a href="">WEB Gadetとは</a></li>
                    <li><a href="">WEB Gadet一覧</a></li>
                </ul>
            </nav>
        </div>
        <p class="copy">
            <a href="">©︎ Wepuri. All Rights Reserved.</a>
        </p>
    </footer>
 
</body>
</html>

style.css

.footer_main{
    background: #2d74a7;
    .wrap{
        padding: 40px 24px;
        padding-bottom: 0;
        margin: 0 auto;
        max-width: 1200px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        @media (max-width:980px) {
            flex-wrap: wrap;
        }
        h2.logo{
            a{
                color: #fff;
                font-size: 32px;
                font-weight: 600;
                @media (max-width:980px) {
                    font-size: 28px;
                }
            }
        }
        nav{
            @media (max-width:980px) {
                margin-top: 24px;
                width: 100%;
                display: flex;
                justify-content: center;
            }
            @media (max-width:600px) {
                margin-top: 32px;
            }
            ul{
                display: flex;
                flex-wrap: wrap;
                @media (max-width:980px) {
                    justify-content: center;
                }
                @media (max-width:500px) {
                    display: block;
                }
                li{
                    a{
                        padding: 1em;
                        display: block;
                        color: #fff;
                        font-weight: 600;
                    }
                }
            }
        }
    }
    .copy{
        margin-top: 120px;
        padding: 1em;
        background: #246798;
        text-align: center;
        @media (max-width:980px) {
            margin-top: 64px;
        }
        @media (max-width:600px) {
            margin-top: 40px;
            font-size: 11px;
        }
        @media (max-width:500px) {
            margin-top: 32px;
        }
        a{
            color: #fff;
            font-size: 14px;
        }
    }
}

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

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