【ホームページ作成】ボックスや枠線の表示・装飾 (HTML,CSS)

ノートのように罫線（下線）を引くデザイン

「ノート」のように、文中の各行に下線を引くデザインを作ってみましょう。画像とスタイルシートを組み合わせて、簡単に「ノート」っぽく見えるデザインが作れます。

イラストなどでカラフルな区切り線を作る

区切り線を引く目的でhr要素を使うこともあるでしょうが、hr要素では横向きの罫線が引かれるだけです。もっとカラフルな区切り線を描いてみましょう。表示幅に合わせて伸縮自在な区切り線を画像で作る方法をご紹介。

縞模様で目立つ枠線(囲み)を作る

赤と橙色、緑と黄色、青と水色……など、複数の色を組み合わせた縞模様の枠線を使って「囲み」を作ってみましょう。スタイルシートのborderプロパティだけで線を引くよりも、かなり目立つ枠を作ることができます。

CSSを1行書くだけで枠の角を丸くする！

枠の角を丸くする方法として、スタイルシートに1行書き加えるだけで済む方法をご紹介したいと思います。丸みの半径を自由に指定できるなど、画像とHTMLを駆使するよりも楽に作れます。