CSSfacebookTweethatenaline2019.06.10レシピリンクバナーなど画像にリンクを設定するa要素とimg要素を組み合わせた、バナー画像リンクの作成方法を解説。マウスオン(ホバー)した時に画像を透過する方法も合わせてご紹介します。画像をリンクにするリンクはテキストやボタンの形にしたものが多いですが、バナーやロゴなど画像と組み合わせたリンクもよく使われます。今回はこの画像を使ったリンクの設定方法を解説します。バナー画像を使ったリンクの例コード例HTMLとCSSのコードは非常にシンプルです。href="#">もっと見る</a></p>HTMLは基本的にはリンクを設定するa要素でimg要素を囲むだけで大丈夫です。CSSではa要素をブロックレベルにしている部分と、img要素でvertical-alignプロパティを指定している部分が重要です。画像をリンクにするだけならa要素はインラインレベルでも問題ありませんが、画像のマルチデバイス対応などでwidthプロパティを使って横幅を指定することがあります。inline-block;」はそのための指定です。top;」は画像の無駄な余白を削除するための指定です。こちらの指定がなかった場合、img要素は下部に若干余白が発生します。この指定をすることで、画像のサイズピッタリで綺麗なリンクを表示することが可能になります。マウスオン(ホバー)時に画像を透過マウスカーソルがバナー画像の上に乗ったときに透過する方法を解説します。href="#">もっと見る</a></p>リンクのホバー時の透過度はopacityプロパティで設定しています。その上のtransitionプロパティでは、透過えフィクトの速度です。「0.5s」は0.5秒を意味します。transitionプロパティはベンダープレフィクスを指定することも多いですが、IE10以降、Edge、Safari、Chrome、Firefoxの各種最新版はこのプロパティに対応しているため、基本的には指定しなくても大丈夫です。念のため指定する場合は次のコードとなります。href="#">もっと見る</a></p>こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND人類を前に進めたいチームラボ代表・猪子寿之さんと評論家・宇野常寛さんによる、チームラボの目指す「境界のない世界」についての対談がまとまった一冊。内容はもちろん、フルカラーで写真も綺麗でした。