2020年1月22日CSSシリーズは定期的やっていきたいですね。今回は、マウスホバーすると表示されるツールチップのような補足情報をCSSだけで実装する方法です。CodePen.方法は簡単で、attr()関数を使ってツールチップを表示させます。親要素の属性の値をattr()関数で受け取って、擬似要素で表示させるこんな感じになりますが、噛み砕いて解説していきます。aria-label="テキストテキストテキスト">ツールチップ表示</span></div>親要素に表示テキスト情報を記述、これが親要素になります。これが、予め画面上に表示されているテキスト。aria-lagel属性の中に、補足情報として表示させたいテキストを入力しておきます。この属性情報を、attr()関数で受け取って擬似要素で表示させます。20px;}方法は簡単で、contentにattr(属性名)を指定するだけです。これで、親要素の属性値が返されます(この場合は、「テキストテキストテキスト」)あとは、位置やサイズを整えたら完成です!それにしてもattr()関数って便利。覚えておけば何か他の用途にも使う機会があるかもしれませんので、頭の片隅に残しておきたいと思います。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。