【CSS3】アイコン画像を使わずにCSSのみで外部リンクアイコンを設置した方法メモ情報科学屋さんを目指す人のメモ方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。(17)スポンサーリンクよく、外部リンクの末尾に、小さいアイコン画像を配置することがあります。これは、aタグにpadding-rightを追加し、backgroundにアイコン画像を指定して右に配置すれば比較的簡単に実現できます。最近は画像を極力使わずにサイトを構築していたので、これも画像を使わずにCSSアイコンで実現しようと挑戦しました(PHP・JavaScriptでのタグ追加もしない)。その過程をメモしておきます。最近はアイコンをCSS3で作り、画像を極力使わないようにしていたので、今回もbackground+urlを使わないで、作ってみることにしました。使って配置してみるました。solid;}しかし、aタグ(リンク)の文章が長くて改行されている場合は、rightとbottomの基準位置がよくわからないことになり、意図しない位置に配置されてしまいました。↑画像では、下のリンクで、アイコンが変なところに表示されている。afterだけで頑張る問題は、before要素をright、bottomで上手くaタグの末尾に配置できなかったことなので、beforeを使わず、afterだけでどうにかすることにしました。afterをinline要素にして四角は簡単に作れます。今回のアイコンは形状があまりに簡単なので、左下の部分をbox-shadow(CSS3)で書き、境目部分をborder-left・border-bottomで作ることにしました。実際にやってみると配置が難しく、box-shadowで作られる影のサイズはborderも含んでしまうようだったので、隠すのに使ったborder-leftとborder-bottomの分まで、左下の箱が大きくなってしまい、変になります。そこで、box-shadowの4番目の引数に負を指定して、少し小さいサイズにしました。#E56B21;}その結果、まぁまぁいい感じになりました(※背景がrgbaで透過してしまっていて、直接指定すると変なことになるので、rgba(229,107,33,0.1)を白背景での不透明化した色#FDF0E9に変更しています)。↑下のリンクも、正しい位置に配置されている。外部リンクにだけ適用するここまでだと、外部リンクかどうか関係なく適用されてしまうので、内部リンクを無視するように記述を付け足しました(コンパクト重視)。{content:none;}URLは(いや、他色々も)、適宜読み替えてください。設定の変更方法などについて、解説記事をよく書いています。自分が困ったことをブログに書けば、次に困る人の参考になって、みんながみんな同じ苦労をせずに済む、というのが原点です。最近の関心は、スマホやパソコンが苦手な人の行動や思考、そしてそんな人を手助けする方法です。