- HTML・CSS
【CSS】横幅は指定したいけど文字数によって可変するボタン
タイトルがちょっとわかりづらいかもしれませんね…
例えば、
- テキストが短い場合でも、横幅は最低200pxほしい（デザインカンプがそうなっている）
- テキストが長くなるときに、横幅が広がってほしい
などといった場合です。
自分の場合、WordPressなどでテキストが動的に変わるボタンのときに使ってます。
書き方
では具体的に、WordPressで店舗名が入るリンクボタンを作成しているとします。
ボタンの中のテキストは、短い店舗名もあれば長い店舗名もあったりしますので、そのあたりを考慮すると下記のような書き方ができます。
<div class="btn_wrapper">
<a href="#" class="btn">渋谷店</a>
</div>
.btn {
min-width: 200px; /* 最低200pxを確保 */
height: 56px;
background: #4d5fc3;
font-size: 18px;
font-weight: bold;
color: #fff;
padding: 0 16px; /* テキスト横の余白がキツキツにならないように */
display: inline-flex;
align-items: center;
justify-content: center;
}
これが例えば「イオンモール名古屋熱田店」みたいに長い店舗名になると、
といったように、横幅が広がります。
解説
CSS側のポイントとしては、
- min-width
- display-inline-flex
あたりです。
min-width
左右のpaddingだけで横幅を取ると、「最低200px」という条件がクリアできません。
なので、最低〇〇pxを指定できるmin-widthを使います。
display-inline-flex
ボタンのなかのテキストを中央寄せするために使ってます。
ただ普通に「display-flex」を使用するとブロック要素になってしまい、ボタンの幅が親要素の幅まで広がってしまいます。
「display-inline-flex」を使用することで、そのへんの問題が解消できます。
その他
paddingに関しては、テキストが長くなってボタンが広がるときに予約がないとキツキツになって見栄えが悪いので、少しだけ左右に入れてます。
おわりに
以上で「横幅は指定したいけど文字数によって可変するボタン」の解説を終わります。
基本的にテキストが変わることはほぼないようなボタンに関してはこんなことをしなくてもいいと思いますが、長いテキストが入る可能性があるとかそういった場所には使えるのはではないかと思います。
書き方はこれ一つではないと思うので、もっといい方法があれば教えていただけると嬉しいです！
では！