【解放区在住氷翠 緑の閃光】HTML

画像を使ってボタンを作ってみよう【HTML】

2021-07-31 18:44

氷翠です。
今回はHTMLのボタンを自分なりのスタイルでもって表現したいなと思い、画像を用意し、作っていこうと思います。

完成はこちら。いや単なるイメージなんだけども、こんな感じをイメージしています。なので、これは単純な画像ですが、問題なのは、中の文字がどんな文字になってもいいように小細工をしていきたいのです。

この画像ではすでに文字がはいっていますが、実際に使うときは「送信」とか「キャンセル」とかって文字が入ります。その文字数はもちろん短いほうがいいですが、ある程度の長さを保つことができるといいですよね。

氷翠はイラストレーターをつかって今回のこの画像を用意しました。

イラストレーターでこのようにガイドラインを引き、それに合わせて「スライスツール」をつかって分割します。

上の図では単純に4つに分割しています。というのも、①と④は先頭と末尾なので必要。ここでの問題は②です。③は使いません。
②は横幅が1pxしかありません。文字の背景に使うので、リピートをかけるためなので、それほど大きな画像は必要がないということ。
まぁ、その辺はHTMLをやっている人なら常識的なことです。

さて、問題はここからです。

作成したサンプルはこちら

サンプルページを見て分かる通り、ボタンにはブラウザで用意されたスタイルがあります。①はデフォルトのボタンタグの状態なので、ブラウザによって見え方が違ってきています。
そして、②ではそれらをとっぱらった状態になり、単純に文字と枠線がついている単純なものになります。

ここから上のようなデザインのボタンを作成して行きます。

考え方は単純で、ボタンのデザインを3つのブロックに分ける。そのため、上記ではガイドを引き、Illustratorのスライスツールを使って分割する分けです。そして、WEB保存するとき、スライスしたそれぞれに対して、画像の容量を軽くするため、GIF形式で保存することにします。また、見ての通り、形に独特な特徴を出しているので、透過の設定もしておきます。それで保存すると上記でいくと4つのファイルが保存されます。

左から1〜4となり、3は使いません。2を文字の背景として使うので問題はない。あとは1と4をボタンの先頭と末尾にくっつけるだけ。

ということで、まずはサンプルの③で、背景を適用した状態になります。

で、④ですが、ここが問題でした。

スタイルシートでは、「::before」と「::after」を利用するわけですが、ここで画像は文字として扱い、高さを調整しています。

.btn-bg_2::before
{
    display: inline-block;
    position: relative;
    left: -13px;
    width: 45px;
    height: 60px;
    content: url(./asset/k_button_01.gif);
}
.btn-bg_2::after
{
    display: inline-block;
    position: relative;
    left: 13px;
    width: 13px;
    height: 60px;
    content: url(./asset/k_button_04.gif);
}

このように「::before」と「::after」は「display: inline」の状態になっているのを「inline-block」にしてあげることで、中身はブロックなんだけどinline扱いということで次の「position」が自由に使えるようになります。そこで強制的に左右にずらすことで、十分な空きを確保することができました。

しかし、これだけだと、なぜか下にズレているとか、変な線が上についているとかあるので、

.btn-bg_2
{
    background-image: url(./asset/k_button_02.gif);
    background-repeat: repeat-x;
    height: 60px;
    padding: 0;
    border: none;
    font-size: 1.125rem;
    text-shadow: 1px 1px #FFF;
    text-align: center;
    font-weight: 500;
    display: inline-flex;
    line-height: 60px;
}

こんな感じでボタンタグに対してのスタイルを強制しました。つまり「border」を「none」にすることでボタンタグについている邪魔な枠線を取り除き、さらに、文字をちょうどいい高さにするため、「display:inline-flex」を適用し、「line-height:60px;」とすることで文字の高さを調整。あとは文字の装飾をしている感じです。これでようやく③の完成となります。

次に、ついでなので、押したときのスタイルを構築してみようと考えました。

それが④となります。

ボタンを押した時の擬似セレクタは「::active」となるので、CSSには全体をコピーして、「::active」をつけつつ、画像も押したときのような変化をつける画像を用意してやってみました。もちろん、そこで文字の装飾も変化を持たせています。今回はここまでとしておきます。