記事の詳細
「aタグ(アンカータグ)だけでボタンを作りたい!」CSSの設定で高さと幅のあるボタンをaタグのみで作る方法
今回は意外と知らない人も居るaタグ(アンカータグ)だけで高さと幅のあるボタンの作り方をご紹介します。
今回のブログの見出しはコチラです!
そもそもaタグ(アンカータグ)だけでボタンは作れないのか?
aタグだけでもボタンっぽいボタンを作ることは可能です。
ちょっとCSSを調整すれば下記のようなボタンを設置する事ができます。
こちらをクリック!
ただし、これでは縦幅も横幅も狭くてボタンっぽくありません…。
なので、自身の領域を広げるpaddingを使ってボタンに幅を持たせてみると…。
ようやくボタンっぽくなりましたね!
ちなみに、上のボタンに設定しているCSSは下記になります。
1 2 3 4 5 6 7 8 9 10 |
element.style { background-color: #4669ff; border-bottom: solid 2px #003aff; border-right: solid 2px #003aff; border-radius: 20px; font-weight: bold; color: #FFF; text-decoration: none; padding: 10px; } |
ですがこの実装には穴があり、下記のようにボタンを文中に設置した際にちょっとした不具合が発生してしまいます…。
「もしこの記事が良いと思ったら↓のボタンをクリックしてね!
こちらをクリック!
ありがとうございました!」
皆さんのブラウザではどのように見えているでしょうか?
私の環境では下記のように見えています。
そう!ボタンと他の文字がかぶってしまうのです!
この表示はGoogleChromeでもFirefoxでもIEでも同じように表示されますので、ブラウザ依存で発生しているのではなく、文字がかぶるような表示が「正しい」表示となっています。
これでは見た目も悪く、そもそもボタンとして機能するかどうかが非常に怪しいです…。
では、ボタンが他の文字に被らないようにするにはどうしたらよいのでしょうか?
文字が被るのはaタグ(アンカータグ)が「インライン要素」であることが影響している
HTMLタグには「インライン要素」と「ブロックレベル要素」の二つが存在します。
aタグやspanタグは「インライン要素」で、pタグやdivタグは「ブロックレベル要素」になります。
※「インライン要素」と「ブロックレベル要素」のわかりやすい解説が下記サイト様に書かれていますので、詳しく知りたい方はぜひ一度ご覧ください。
【CSS】displayの使い方を総まとめ!inlineやblockの違いは?
ざっくり説明すると、aタグやspanタグのようなインライン要素は自身の領域の幅を設定するには適さないタグとなっております。
ではどのように設定をすればよいのか?
答えは非常に簡単で、インライン要素をスタイルの設定でブロックレベル要素にしてしまえば良いのです!
インライン要素に対してブロックレベル要素の設定を加えると、先程の例文は下記のように表示されます。
「もしこの記事が良いと思ったら↓のボタンをクリックしてね!
こちらをクリック!
ありがとうございました!」
上記に関しては、私のブラウザでは下記のように表示されています。
この表示はGoogleChromeでもFirefoxでもIEでも同じように表示されますので、文字がかぶらない表示が「正しい」表示となります。
では、上記のボタンはどのように実装したのか?
実際のCSSは下記になります。
1 2 3 4 5 6 7 8 9 10 11 |
element.style { background-color: #4669ff; border-bottom: solid 2px #003aff; border-right: solid 2px #003aff; border-radius: 20px; font-weight: bold; color: #FFF; text-decoration: none; padding: 10px; display: inline-block; } |
最初のスタイルとの違いは“display: inline-block;”の箇所となります。
上記の指定をすることで「並びはインライン要素でありながら、幅を持たせるブロック要素として扱う」事が可能となったため、文字が被らずに表示されるようになりました。
このようにして、インライン要素をブロックレベル要素として扱うことで、aタグのみでもボタンっぽいデザインを実現することが可能となります!
スタイルの設定はやたらと便利!できなかったことができてしまう!
いかがでしたか?
私はこの業界に入って最初の頃は、ボタンっぽいデザインのリンクを設置する際にはいちいちdivタグでaタグを囲って手間をかけてボタンを作っていました。
ですが、divタグで囲う方法ではボタンをクリックして反応する領域が文字部分にしかなく、文字以外の領域は無反応となってしまうため、クリックする箇所によってはリンクがないと誤解を与えてしまうようなデザインとなってしまいます。
このような事を解消できたのが今回ご紹介した内容なのですが…、自分がこの結論に到達するまでは長い時間がかかった気がします…。
もし昔の私と同じようにdivタグで囲って手間をかけてボタンを作っている方がいらっしゃいましたら、今回の方法を試してみてください!
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。