CSSfacebookTweethatenaline2019.06.10レシピリンクリンクにスタイルを設定するa要素のリンクについて、マウスが乗ったとき(ホバー状態)やクリック済みなど各状態のスタイルを設定する方法を解説します。この記事のポイントリンクの状態に応じてスタイルを切り替えるボタンの形をしたリンクにスタイルを適用する目次リンクにスタイルを指定する通常のスタイル適用例ボタン状態のリンクにスタイルを設定するリンクにスタイルを指定するWebページには必ずと言っていいほどリンクがあります。今回は、このリンクにスタイルを適用する方法を解説します。リンクの例リンクの状態a要素で設定するリンクには、次の4つの状態があります。リンクがクリック(タップ)されている状態これらの全ての状態に対し、それぞれスタイルを指定することができます。Note全ての状態にスタイルを指定する場合、上記リストの上から順にスタイルを指定する必要があります。順番が違うとスタイルはうまく適用されません。今回は次のようなHTMLにスタイルを適用します。class="text-excerpt">a要素のリンクについて、マウスが乗ったとき(ホバー状態)やクリック済みなど各状態のスタイルを設定する方法を解説します。»</a></p></section>見出し(h1要素)とテキストのリンクに対し、:link(未クリック)、:visited(クリック済)、:hover(マウスオン、ホバー)、:active(クリック時)の順にそれぞれスタイルを適用しています。見出しのリンクにはリンクテキストの下線を非表示にするために、text-decorationプロパティを無効にしています。上記のリンクへのスタイル指定は、次のようにまとめることも可能です。class="text-excerpt">a要素のリンクについて、マウスが乗ったとき(ホバー状態)やクリック済みなど各状態のスタイルを設定する方法を解説します。»</a></p></section>aはa:linkとa:visitedの状態に対応し、a:hoverはa:hoverとa:activeの2つの状態に対応します。ボタン状態のリンクにスタイルを設定する続いて、テキストに含まれるリンクではなく、ボタンの形になったリンクのスタイル適用例を解説します。class="text-excerpt">a要素のリンクについて、マウスが乗ったとき(ホバー状態)やクリック済みなど各状態のスタイルを設定する方法を解説します。href="#">もっと見る</a></p></section>displayプロパティでインラインのブロック要素に設定し、ボタン状態にしています。今回の場合はテキストの色ではなく、背景色を通常時とマウスオン(ホバー)時で切り替えることで押せるボタンを表現しました。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND人類を前に進めたいチームラボ代表・猪子寿之さんと評論家・宇野常寛さんによる、チームラボの目指す「境界のない世界」についての対談がまとまった一冊。内容はもちろん、フルカラーで写真も綺麗でした。