CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのattr()関数とは？属性値を取得して表示する方法と実装例

CSSのattr()関数は、選択した要素が持つHTML属性の値を取得し、その値をCSS内で利用できるようにする便利な機能です。特にcontentプロパティと組み合わせて使われることが多く、リンク先URLを自動的に表示したり、カスタムツールチップを作成したりする際に活用されます。

attr()関数の基本的な仕組み

attr()関数は、対象となる要素の指定した属性名を引数として受け取り、その属性値を文字列として返します。例えば、<a>タグのhref属性の値を取得したい場合は、attr(href)と記述します。

以下のコード例では、:before疑似要素と組み合わせることで、リンクテキストの前に括弧で囲まれたURLを自動的に表示しています。

実装例

<!DOCTYPE html>
<html>
   <head>
      <style>
         a:before {content: " (" attr(href) ")";}
      </style>
   </head>
   <body>
      <h2>情報リソース</h2>
      <p>リソース：<a href = "https://www.qries.com">Qriesへようこそ</a></p>
   </body>
</html>

コードの解説

  • a:before：すべてのアンカー（リンク）要素の直前にコンテンツを挿入する疑似要素です。
  • content: " (" attr(href) ")"：リンクのhref属性の値を取得し、括弧で囲んで表示します。

このコードを実行すると、ブラウザ上には「Qriesへようこそ (https://www.qries.com)」のように、リンクテキストの後ろにURLが自動的に表示されます。印刷用スタイルシートでリンク先を見せる場合などにも応用できる実用的なテクニックです。

  1. CSSのrotate()関数の使い方 – 要素を回転させる方法を解説

    CSSのrotate()関数とは？CSSのrotate()関数は、要素を回転させるための変換関数です。transformプロパティと組み合わせて使用し、指定した角度だけ要素を回転させることができます。引数には回転角度を指定します。単位はdeg（度）やrad（ラジアン）などが利用可能で、正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。指定できる角度の単位deg（度）：360degで1回転rad（ラジアン）：約6.28rad（2π）で1回転grad（グラード）：400gradで1回転turn（回転数）：1turnで1回転使用例以下の例では、複数の段落要素を表示し、そのうちの

  2. CSS rgba()関数の使い方を解説！透明度付きの色指定方法と実例

    rgba()関数とはCSSのrgba()関数は、赤（Red）、緑（Green）、青（Blue）の3原色に加えて、アルファ（Alpha）チャンネルによる透明度を含めたRGBAカラーバリューを定義するための関数です。アルファ値は色の不透明度を表し、0.0〜1.0の範囲の数値で指定します。1.0が完全に不透明な状態、0.0が完全に透明な状態を意味します。基本的な構文は以下のとおりです。rgba(red, green, blue, alpha)red / green / blue：各色成分を0〜255の整数、またはパーセンテージで指定します。alpha：不透明度を0.0（完全に透明）〜1.0（完全に不