「 区切り線 」一覧

今まで要素にグラデーションをかける場合はbackground-imageなどにグラデーションさせた画像を指定する必要がありましたが、CSS3では画像を指定できる全てのプロパティにlinear-gradientなどの関数を渡してグラデーションさせることができるようになりました。ここでは枠線や区切り線にグラデーションをかける方法を解説します。

従来のCSSでしましまの枠線などを作ろうとすると縞模様の画像をリピートさせる方法しかありませんでした。しかしCSSで追加されたrepeating-linear-gradientプロパティを使うと画像を使うことなくきれいな縞模様のついた枠線や区切り線を作ることが可能です。ここではそのような枠線の作り方を解説します。

枠線や区切り線を変えるとサイトがオシャレになったり、読者の注目を引いてに大事な部分を読んでもらいやすくなるなどの効果があります。そこでここではCSSだけでグラデーションやシマシマ模様のついた枠線や区切り線を作る方法について解説します。もし気に入ったデザインがあればコピー・改変して使ってください。