0

hr要素の罫線をちょっと装飾してみる。

hr要素の罫線をちょっと装飾してみる。

<hr>要素は「罫線(けいせん)」を表示するタグですが、そのまま罫線を引くだけでは面白くないので、CSSでちょっと装飾してみることにします。

▼まずは、デフォルトで設定されていhr要素のスタイルをリセットしておきましょう。

CSSでhr要素をリセット

  1. 実線
  2. 二重線
  3. 破線
  4. 点線
  5. 注意線
  6. 点線(色あり)
  7. 立体線
  8. 立体線~二重線~
  9. 立体線~破線~
  10. 背景画像~その1~
  11. 背景画像~その2~
  12. 影付き
  13. グラデーション

デモサンプル

それでは見ていきましょう。




1.実線

実線

2.二重線

二重線

3.破線

破線

4.点線

点線

5.注意線

注意線

6.点線(色あり)

6.点線(色あり)

7.立体線

立体線

8.立体線~二重線~

立体線~二重線~

9.立体線~破線~

立体線~破線~

10.背景画像~その1~

hr-bg1

このパターン画像をリピートさせます。

背景画像~その1~

11.背景画像~その2~

hr-bg2

このパターン画像をリピートさせます。

背景画像~その2~

12.影付き

影付き

13.グラデーション

グラデーション

デモサンプル

以上13パターンをご紹介しましたが、いざという時に使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > hr要素の罫線をちょっと装飾してみる。