CSS 矢印アンダーラインを引きたい

おしゃれな見出しを調べてみると、ものすごく大量に例が出てきて、どれもやってみたくなりますが、それだとwebサイトが見出しだらけになってしまうので、もっとも適したものを探して選ぶのが、楽しくて大変です。

javascript を使って動きをつけても面白いのですが、個人的には凝ったものよりシンプルで洗練されたものが好きなので、なるべくcssだけでできている、スマートなものを選ぶようにしています。決して javascript がわからないわけではないです。本当に。本当。

アンダーラインをつけたい見出しが「read more」という一言なので、こちらにまだまだ情報がありますよ!ってニュアンスにするために、矢印付きのアンダーラインにすることに決めました。

こちらのwebサイトを参考にしました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

線先に矢印、って項目ですね。丸コピペするとこんな感じ。

See the Pen WNbXRaM by ishi (@ishi-nagoya) on CodePen.

こっち見て!みたいなアピールが素敵ですね。これをアレンジして使います。

まず、アンダーラインをつけたい「read more」は、ブロックの右側にあるので、矢印の向きを右向きに変更します。h1:before で矢印の先端、h1:after で矢印の棒部分を構成しているので、h1:before の位置を右にします。

h1:before の中の border-left: を border-right: に変更すると、矢印の先端が右にきます。それから、left: を right: に変更して、 好みの位置になるように調整。私は「read more」の後ろあたりにくるようにしたかったので、 -20px にしました。

あとは h1:after の中の left: 10px; を、必要ないので 0 に変更。変更したら、矢印の棒が寸足らずになったので、どうしたもんかと考えた結果、 width を 103% にしたら、見た目はうまくいきました。すごく力業な気はしますが、ひとまずよし。

最後に色を決めたら完成。つくづく、CSSってすごい。発想次第でなんでもできると思う。

なぜCSSのborderで三角形ができるのか、実際にコードを書いて調べてみた | 株式会社LIG
こんにちは、おじいちゃんです。 Webサイトを作っていると、デザインによってはCSSを使って三角形を作るときがあります。便利ですよね。画像だとhover時に色が変えられなかったり、作ったとしてもアニメーションがつけられなかったり、かといってSVGにするほどでもない。 CSSのborderを利用することで、三角形は比較的...

矢印の先端がどうやってできているかの詳しい解説がありました。わかりやすい。最初に考えた人、すごい。コロンブスの卵ですね。先端だけに。CSSの世界には、いったいいくつの卵がさかさまに立っているのだろう。

かしこ

タイトルとURLをコピーしました