2週間前に投稿

Cool SVG Horizontal Rule

2019年9月5日

この記事は約 3 分で読めます。

4.5

CoolなSVGの hrを発見したので
ご紹介いたします。

HTML の <hr> 要素は、
段落レベルの要素間において、
テーマの意味的な区切りを表します。
例えば、話の場面の切り替えや、
節内での話題の転換などです。

おしゃれでエレガント、
美しく流れるようなラインが特徴の
Great Vibes 」と言う
Google Fonts と組み合わせてみました。

Good, there’s somebody I’d like you to meet. Lorraine. Marty, don’t be such a square. Everybody who’s anybody drinks. What, what, ma? Marty, you seem so nervous, is something wrong? Well, ma, we talked about this, we’re not gonna go to the lake, the car’s wrecked.


Yes, definitely, god-dammit George, swear. Okay, so now, you come up, you punch me in the stomach, I’m out for the count, right? And you and Lorraine live happily ever after. His head’s gone, it’s like it’s been erased. That’s right. My name’s Lorraine, Lorraine Baines. Marty, don’t be such a square. Everybody who’s anybody drinks.

hr要素の使用に関して注意すべき点として、
視覚的な区切り線として利用してはいけません。
例えば、
「見出しの下に線があるとデザイン的にかっこいいから」
という理由で使ってはいけません。

この記事のタイトルに
水平線 (horizontal rule)と付けましたが、
HTML5では水平線の定義はないようです。

HTML4.01ではhr要素には非推奨とされながらもalign属性・noshade属性・size属性・width属性が用意されていました。 HTML5ではこれらの属性はすべて廃止されています。
また、hr要素は、HTML 4.01では水平線(horizontal rule)が描画されると定義されていますが、 HTML5ではテーマ・話題の区切りを表す要素であり、水平線の定義はありません。

http://www.htmq.com/html5/hr.shtml

See the Pen Fluid/Fixed SVG hr by Chris Coyier (@chriscoyier) on CodePen.

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Cool SVG Horizontal Rule