[CSS] 背景画像に文字を載せたリンクボタンをレスポンシブに並べたい

公開日:2019/03/23

サイトのTOPページに主要な各ページへのリンクを配置する場合、ページ内容に合わせた画像つきのボタンにしてずらずら並べることがよくあります
横幅の広いパソコンでは横に、縦に長いモバイルでは縦に並べる配慮も大切です
今回はレスポンシブに背景画像付きのボタンリンクを並べて配置するサンプルコードを紹介します

サンプルコード

html

<ul class="links_bg_text">
    <li>
        <a href="<?php echo esc_url(home_url('/xxx/')); ?>">
            <p>サンプルテキスト</p>
        </a>
    </li>
    <li>
        <a href="<?php echo esc_url(home_url('/xxx/')); ?>">
            <p>サンプルテキスト</p>
        </a>
    </li>
    <li>
        <a href="<?php echo esc_url(home_url('/xxx/')); ?>">
            <p>サンプルテキスト</p>
        </a>
    </li>
</ul>

CSS

.links_bg_text {
    list-style: none;
}

.links_bg_text > li {
    position: relative;
    margin: 30px auto 0px;
    width: 80%;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.links_bg_text > li:nth-of-type(1) {
    background-image: url(xxx.jpg);
}
.links_bg_text > li:nth-of-type(2) {
    background-image: url(xxx.jpg);
}
.links_bg_text > li:nth-of-type(3) {
    background-image: url(xxx.jpg);
}

.links_bg_text > li > a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.links_bg_text > li > a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.links_bg_text > li > a > p {
    position: absolute;
    bottom: 1em;
    left: 0px;
    width: 100%;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.links_bg_text > li > a > p::after {
    margin: 0px 0px 0px 1em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "f105";
}

@media print, (min-width: 768px) {
    .links_bg_text {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin: 0px -15px;
    }
    .links_bg_text > li {
        margin: 30px 15px 0px;
        width: calc(50% - 30px);
    } 
}

@media print, (min-width: 992px) {
    .links_bg_text > li {
        width: calc(33.3% - 30px);
    }
}

画像の上に文字を重ねたシンプルなパターン
文字の前後にフォントアイコンを設定してもよさそうです

文字に背景色をつけるパターン

CSS

.links_bg_text {
    list-style: none;
}

.links_bg_text > li {
    position: relative;
    z-index: 1;
    margin: 30px auto 0px;
    width: 80%;
    height: 200px;
}
.links_bg_text > li::before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 2em;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    content: "";
}
.links_bg_text > li:nth-of-type(1)::before {
    background-image: url(xxx.jpg);
}
.links_bg_text > li:nth-of-type(2)::before {
    background-image: url(xxx.jpg);
}
.links_bg_text > li:nth-of-type(3)::before {
    background-image: url(xxx.jpg);
}

.links_bg_text > li > a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.links_bg_text > li > a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.links_bg_text > li > a > p {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 0.5em;
    width: 100%;
    background-color: #fff;
    color: #3388dd;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

@media print, (min-width: 768px) {
    .links_bg_text {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin: 0px -15px;
    }
    .links_bg_text > li {
        margin: 30px 15px 0px;
        width: calc(50% - 30px);
    } 
}

@media print, (min-width: 992px) {
    .links_bg_text > li {
        width: calc(33.3% - 30px);
    }
}

文字の可読性を上げて目立たせるために、文字の後ろに背景色を指定するパターン
背景画像をサイズ調整したbefore擬似要素上で行うことで、文字の後ろに背景画像が隠れないようにしています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。