こんにちは。
皆さんは、ブログ・サイトにおいて、ブロック要素にリンクを貼りたいと思ったことはありませんか？
ブロック要素といえば、divタグですよね。
他には、pタグ、ulタグ、tableタグ、hタグ、formタグなどがあります。
こういったブロック要素を使用することで、HTML文章内において、ブロック（まとまり）を作ることができます。
一方、HTMLでリンクを貼る場合、使用するタグは「aタグ」です。
ですが、これはブロック要素ではなく、インライン要素です。
インライン要素には、aタグの他に、imgタグ、inputタグ、textareaタグ、brタグ、などがあります。
普通、サイトでリンクを貼るとすれば、ただのテキストや画像などでしょう。
ただのテキストにリンクを貼るならば、aタグを使用すればいいですし、画像にリンクを貼るならば、imgタグをaタグで囲えばいいです。
画像にリンクを貼るというのは、imgタグがインライン要素であるからこそ、実現可能なのです。
では、ブロック要素にリンクを貼りたい場合は、どうすればよいでしょうか。
ブロック要素にリンクを貼りたい
例えば、「divタグをクリックしたら、別のページに飛ばしたい。」ということを考えたとします。
僕は、このツールを作ろうとしたときに思いました。
LINEスタンプをブログ・サイトで紹介するための埋め込みHTMLタグを自動生成するツール
このツールでは、 「LINEスタンプの紹介タグを生成する」ことができます。
見てもらえばお分かりになると思いますが、生成されたLINEスタンプのタグをクリックすると、対象スタンプのSTOREページが開くような使用になっております。
このLINEスタンプのタグがブロック要素なのです。
普通に考えれば、画像の時と同じように、aタグで対象の要素を囲えばいいと思いますよね。
しかし、HTMLには、こんなルールがあるのです。
インライン要素の中にブロック要素を入れるのはNG
困りましたね。
解決方法
調べてみると、「divタグ、そして、ブロック化されたaタグを用意し、これらをcssで重ねる」みたいな方法が見つかりました。
「aタグをブロック要素化するのならば、わざわざdivタグを用意して重ねる、みたいなことをしなくてもいいのではないか」、と思い、aタグだけでやってみたらできたので、ご紹介します。
＊ひょっとしたら、divタグとaタグを重ねるという方法の方でなければいけない理由があるのかもしれませんが、今回は特に気にせずにいきます。
まず、ブロック要素を用意します。
<a style="display: block;text-decoration:none;" href="ここにurl">
～ここが中身～
</a>
aタグのstyleでブロック要素にしています。
ついでに、リンクらしさを消すために、下線を無しにしています。
href=”” のところには、リンク先のサイトのurlを書きます。
このタグの中に、ブロックとして表示したいものを入れればよいわけです。
例えば、こんな感じです。
<a style="padding: 5px; margin-bottom: 5px; border: 1px solid #333333; border-radius: 10px;width:500px;max-width:90%;min-height: 140px;display: block;text-decoration:none;"
href="ここにurl">
<img src="画像のurl" style="width:150px;float:right;">
<div style="color:black;font-size: 20px;font-weight: bold;">Earth Hand ～見る麻薬～</div>
<p style="color:black;">今から、約666億年前、無の世界の一部に、極めて微小な空間があった。その空間は、プロクルステスと呼ばれ、科学技術が発達した都市を持つ惑星が、多く存在していた。</p>
</a>
実際に、urlなどを含めて表示すると、こうなります。
今から、約666億年前、無の世界の一部に、極めて微小な空間があった。その空間は、プロクルステスと呼ばれ、科学技術が発達した都市を持つ惑星が、多く存在していた。
クリックすると、Youtubeのページが開くと思います。
いちおう正常に動くので、このやり方で大丈夫だと思います。
ぜひ、やってみてください。
では、さようなら。
また、お会いしましょう。
