こんにちは。
シーサイドレーベルweb担当の飯野です。
今回は、テキストリンクをボタン化する
方法について解説します。
テキストにリンクを貼ると
通常はテキストの文字のリンク部分だけ
クリック出来ます。
例えばボックス設定を行った
こちらの見本を御覧ください。
この様に、テキストの文字部分にだけ
リンクが貼られ、クリック出来る範囲も
このテキスト文字の部分だけです。
では、テキストリンクをボタン化して、
設定範囲のどこをクリックしてもリンクを踏める状態に
するには、どうするかと言いますと。
CSSで指定してあげれば良いだけです。
リンク指定するタグは <a> タグを利用しますが、
この<a>タグというのは、インライン要素のタグです。
このインライン要素を、CSSでブロック要素にしてあげます。
そうすることで、テキスト部分だけしかリンクが貼られてなかったのが、
ボックス全体にリンクが貼られるようになります。
ブロック要素に変更するにはこのように設定します。
|
1 |
a {display:block;} |
その他、ホバー時の背景色やリンクの下線を消したりなどの
設定をすると、このようなボタン化したリンクを
表示出来ます。
こちらにデモページを用意しましたので
ご参考になさって下さい。
【デモページ】
では、また来週お会いしましょう。
●３年ぶりに帰ってきた「藤田哲也の個別コンサルティング」
