記事の詳細

今回は意外と知らない人も居るaタグ(アンカータグ)だけで高さと幅のあるボタンの作り方をご紹介します。

そもそもaタグ(アンカータグ)だけでボタンは作れないのか?

aタグだけでもボタンっぽいボタンを作ることは可能です。
ちょっとCSSを調整すれば下記のようなボタンを設置する事ができます。
こちらをクリック!

ただし、これでは縦幅も横幅も狭くてボタンっぽくありません…。
なので、自身の領域を広げるpaddingを使ってボタンに幅を持たせてみると…。

こちらをクリック!

ようやくボタンっぽくなりましたね!

ちなみに、上のボタンに設定しているCSSは下記になります。

ですがこの実装には穴があり、下記のようにボタンを文中に設置した際にちょっとした不具合が発生してしまいます…。

「もしこの記事が良いと思ったら↓のボタンをクリックしてね!
こちらをクリック!
ありがとうございました!」

皆さんのブラウザではどのように見えているでしょうか?
私の環境では下記のように見えています。

ボタンが文字に被る

そう!ボタンと他の文字がかぶってしまうのです!

この表示はGoogleChromeでもFirefoxでもIEでも同じように表示されますので、ブラウザ依存で発生しているのではなく、文字がかぶるような表示が「正しい」表示となっています。

これでは見た目も悪く、そもそもボタンとして機能するかどうかが非常に怪しいです…。
では、ボタンが他の文字に被らないようにするにはどうしたらよいのでしょうか?

文字が被るのはaタグ(アンカータグ)が「インライン要素」であることが影響している

HTMLタグには「インライン要素」と「ブロックレベル要素」の二つが存在します。
aタグspanタグは「インライン要素」で、pタグdivタグは「ブロックレベル要素」になります。

※「インライン要素」と「ブロックレベル要素」のわかりやすい解説が下記サイト様に書かれていますので、詳しく知りたい方はぜひ一度ご覧ください。
【CSS】displayの使い方を総まとめ!inlineやblockの違いは?

ざっくり説明すると、aタグやspanタグのようなインライン要素は自身の領域の幅を設定するには適さないタグとなっております。

ではどのように設定をすればよいのか?

答えは非常に簡単で、インライン要素をスタイルの設定でブロックレベル要素にしてしまえば良いのです!

インライン要素に対してブロックレベル要素の設定を加えると、先程の例文は下記のように表示されます。

「もしこの記事が良いと思ったら↓のボタンをクリックしてね!
こちらをクリック!
ありがとうございました!」

上記に関しては、私のブラウザでは下記のように表示されています。

ボタンが文字に被らない

この表示はGoogleChromeでもFirefoxでもIEでも同じように表示されますので、文字がかぶらない表示が「正しい」表示となります。

では、上記のボタンはどのように実装したのか?

実際のCSSは下記になります。

最初のスタイルとの違いは“display: inline-block;”の箇所となります。
上記の指定をすることで「並びはインライン要素でありながら、幅を持たせるブロック要素として扱う」事が可能となったため、文字が被らずに表示されるようになりました。

このようにして、インライン要素をブロックレベル要素として扱うことで、aタグのみでもボタンっぽいデザインを実現することが可能となります!

スタイルの設定はやたらと便利!できなかったことができてしまう!

いかがでしたか?

私はこの業界に入って最初の頃は、ボタンっぽいデザインのリンクを設置する際にはいちいちdivタグでaタグを囲って手間をかけてボタンを作っていました。
ですが、divタグで囲う方法ではボタンをクリックして反応する領域が文字部分にしかなく、文字以外の領域は無反応となってしまうため、クリックする箇所によってはリンクがないと誤解を与えてしまうようなデザインとなってしまいます。
このような事を解消できたのが今回ご紹介した内容なのですが…、自分がこの結論に到達するまでは長い時間がかかった気がします…。

もし昔の私と同じようにdivタグで囲って手間をかけてボタンを作っている方がいらっしゃいましたら、今回の方法を試してみてください!

ではまた!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

パソコン正しく使えていますか?

相模原市産業会館パソコン教室

AD

ページ上部へ戻る