イイダリョウのブログ。リンクでよくある「>」アイコンを画像じゃなくてCSSだけで作る2017-10-11リンクでよくある「>」アイコンを画像じゃなくてCSSだけで作るCSSリンクや更新一覧などでタイトルの右側に「>」アイコンをつけることがよくあると思う。imgファイルを配置してもいいのだけど、修正のたびに画像編集ソフトを立ち上げる必要がある。テキストの「>」を配置してもいいけど見た目はイマイチ...。あとシステムフォントによって形が変わる。Awesomeは色やサイズを調整できるが、太さを調整できないのが惜しい。いうことで、単純な図形なのでCSSだけで完結する方法を検討した。目次リンクの「>」完成見本HTMLCSS原型CSSで「>」アイコン追加まとめ※参考:CSSの基本についてはこちら【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-3リンクの「>」完成見本リンクの「>」ってこーいうやつね。CodePen.HTMLHTMLの構成は下記です。href="">メニュー5</a></li></ul>ごく普通の<ul>のリストですね。これは<ol>(番号付き)でも<dl>(項目付き)でもリスト以外(<div>や<p>)でも無問題です。CSS原型CSSの原型は下記です。見た目は各自のお好みで。<h1>はtext-align、<ul>はmarginでひとまず画面の中央寄せに配置。<ul>のborderで外枠線を設定。widthで幅を設定。<li>のlist-styleをnoneに(お好みで)。borderで下線を設定。<a>のdisplayをblock(リンク範囲をブロックに)。文字色、背景色を設定。<a>に擬似クラスhoverでカーソル置くと透明度0.7(お好みで)。CSSで「>」アイコン追加まず<li>の最後に1行追記します。relativeでこの<li>をアイコンを配置する際の基準位置にします。次に<li>に擬似クラスafterでアイコンを加えます。まとめこれでリンクの「>」のサイズ、位置、色、太さ、角度などが全てCSSのみで調整できます。作業時にいろんなソフトを立ち上げて、切り替えて...は昔は当たり前でしたが、いまはテキストエディタだけでかなりのことができるようになってきたので、できるだけ絞りたいですね。拡大縮小に耐えられるのもCSSの強みなので、また何かあれば書いていきます。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-08-24【CSS】form用のリセット設定(ノーマライズCSS、リセットCSSとの比較)フォームのCSSって結構手間がかかったり、効いてくれなかったり...2019-04-12【JS】Math.random()でつくるサイコロとおみくじJSのMathオブジェクトには数値系の組み込み関数が用意されてい...2019-02-03【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させるフォームの送信ボタンのinputタグにアイコン(擬似要素)を加え...2018-07-05CSS変数でドット絵マリオをルイージにしたった!「CSSドット絵マリオ」の続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。