search
New サムネイル 分断するメディアとインターネットのユーザー:ライトノベル、キズナアイ、TikTokに思うこと New サムネイル Golangのchiを使ったrouterの例 New サムネイル Golangの文字列(代入、結合・連結、部分文字列、置換)

CSSのフッターデザイン例(著作権フリー)

広告

シラバス(当サイトの画像を保存しているページ)のフッターデザイン。

.footer {
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    color: #666;
    padding: 0 0 20px 0;
}

.footer-wrapper {
    margin: 0 auto;
    max-width: 480px;
    padding: 0 12px;
}

.footer-item {
    display: inline-block;
    margin: 20px 0 -1px 0;
    vertical-align: top;
    width: 33.3333%;
}

.footer-item h2 {
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    line-height: 1;
    margin: 0 12px 15px 12px;
}

.footer-item p {
    margin: 0 12px 10px 12px;
}

.footer-item p:last-child {
    margin-bottom: 0;
}

.footer-item p a {
    font-size: 12px;
    line-height: 1.2;
}

.bottom {
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    color: #666;
    padding: 12px 0;
    text-align: center;
}

.bottom p {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 300;
}

ナビゲーションを footer に、サイトタイトルを bottom に入れてフッターを二段にしている。当サイトのフッターは次のとおり。

.footer {
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    color: #666;
    font-size: 0;
}

.footer-item {
    display: inline-block;
    font-size: 0;
    padding: 24px 0;
    vertical-align: top;
    width: 50%;
}

@media (min-width: 480px) {
    .footer-item {
        width: 33.3333%;
    }
}

@media (min-width: 640px) {
    .footer-item {
        width: 160px;
    }
}

.footer-item h2 {
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    margin: 0 24px 18px 24px;
}

.footer-item p {
    margin: 0 24px 12px 24px;
}

.footer-item p a {
    color: #444;
    font-size: 13px;
    line-height: 1.2;
}

@media (max-width: 640px) {
    .footer-item p a {
        font-size: 15px;
        line-height: 1.3;
    }
}

.footer .center p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    margin: 16px 0;
}

font-family の 'Open Sans', sans-serif は Google フォント。両サイトのコードはすべてパブリックドメインとして公開。

広告

広告

広告

コンピューター コンピューター
プログラミング プログラミング
数学 数学
英語 英語
国語 国語
理科 理科
社会 社会

Python入門

Python入門

化学入門

化学入門

漢字辞典

漢字辞典

整数辞典

漢字辞典

Lord Candy

Lord Candy