【html/CSS】画像と文字のあるリンクボタンの作り方

「画像と文字を横に並べたボタンを作りたい！」

「画像の下に文字を置いたボタンを作りたい！」

画像と文字が横に並んでいるボタンと縦に並んでいるボタンそれぞれの作り方を解説します。

画像と文字が横並びのボタン

↓完成形

画像の横のテキスト

<style>
.example{
    display: flex;
    align-items: center;
    width: 400px;
    background: #cfe3f0;
}
.example span{
    margin-left: 10px;
}
</style>
<a href="#" class="example">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <span>画像の横のテキスト</span>
</a>

下記よりhtmlとCSSを詳しく解説していきます。

HTML

<a href="#" class="example">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <span>画像の横のテキスト</span>
</a>

リンクを作るためにaタグを使います。

そしてその中に設置したいimgと文字を設置します。

文字をspanで囲うことでCSSで調整しやすくします。

imgにはwidthを指定して幅、高さともに制限しています。

下記はまだCSSをかけていない状態です。

画像の横のテキスト

テキストが下についています。これを上下中央にしたいですね。

また、画像のクリック範囲が下側だけになっています。

CSSでこれらを調整していきましょう。

CSS

display:flex(横並べ)

display:flexを指定すると子要素を横に並べることができます。

もともと横並びしてるからいらない、ということはなく、後述するCSSのために必要です。

align-items:center(上下中央寄せ)

align-itemsはdisplay:flexとセットで使い、子要素の縦位置を調整するCSSです。

align-items:centerを指定すると上下中央寄せにできます。

メインは上記2つのCSSで完成です。

あとはbackgroundやwidth、marginなどでデザインを調整していきましょう。

画像と文字が縦並びのボタン

↓完成形

画像の横のテキスト

<style>
.example2{
    display: block;
    background: #cfe3f0;
    width: 300px;
    padding-bottom: 5px;
}
.example2 img{
    width: 100%;
    height: auto;
}
.example2 div{
    text-align: center;
}
</style>
<a href="#" class="example2">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <div>画像の横のテキスト</div>
</a>

下記よりhtmlとCSSを詳しく解説していきます。

HTML

<a href="#" class="example2">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <div>画像の横のテキスト</div>
</a>

aタグ内にimgと文字を入れます。

今回は縦に並べるため、文字をdivにいれます。

ボタンの幅と画像の幅を一致させるため、imgにはwidthを指定しません。

下記はまだCSSをかけていない状態です。

画像の横のテキスト

画像・ボタンを小さくすること、文字を左右中央寄せすること、画像のクリック範囲を広げること、これらをCSSで実現していきましょう。

CSS

aタグにdisplay:block(widthを効かせる)

aタグにdisplay:blockを指定するとブロック要素になります。

これでwidthが効くようになります。

また、画像のクリック範囲がaタグいっぱいになります。

aタグにwidth(ボタンの幅)

widthで横幅を指定します。これはボタンの幅でもあります。

imgにwidth:100%とheight:auto（ボタンの幅に合わせる）

imgにwidth:100%を指定すると横幅が親要素であるaタグのwidthに一致します。

height:autoを指定すると高さが画像の縦横比に合わせて自動で変化します。

divにtext-align:center(左右中央寄せ)

テキストを囲っているdivにtext-align:centerを指定すると左右中央寄せできます。

上記CSSで最低限のボタンはできるでしょう。

あとはbackgroundやpadding、marginなどでデザインを調整していきましょう。

【まとめ】画像と文字のあるボタンの作り方

横並びのボタン

• aタグの中にimgとテキスト(span)を入れる
• display:flexで横並べする
• align-items:centerで上下中央寄せする

縦並びのボタン

• aタグの中にimgとテキスト(div)を入れる
• aタグにdisplay:blockとwidthで幅を決める
• imgにwidth:100%とheight:autoでボタンの幅に合わせる
• divにtext-align:centerで文字を左右中央寄せする

以上、画像と文字のあるボタンの作り方でした。