縞模様の枠線を作る
スタイルシートのborderプロパティを使うと様々な枠線を作れますが、もっと目立つ凝った枠線を作ってみましょう。 今回は、以下のような枠を作る方法をご紹介いたします。
緑色と黄色の斜線からなる縞模様の枠線です。
橙色と赤色にもできます。
水色と青色にも。記述する文字列が多ければ、枠の高さも自動的に広がります。
上記の3つは、どれも枠線の太さが5pxです。この太さは、スタイルシートで自由に変更できます。
枠線の太さは自由に変えられます。細くした例。
これは太くした例。
「縞模様の枠線」の枠線をなくすと、以下のようにもできます。
枠線の枠線をなくした版。
「縞模様の枠線」の枠線の色を工夫すると、枠線そのものを立体に見せることもできます。
縞模様の枠線が浮き上がったように見える例。
縞模様の枠線が凹んでいるように見える例。
いかがでしょうか？ なかなか目立つ枠になっているのではないでしょうか。
これらの枠線は、画像とスタイルシートを使って実現しています。
それでは、この枠線の作り方を順にご説明いたします。
