ホームページ作成

【ホームページ作成】縞模様で目立つ枠線(囲み)を作る

ボックスや枠線の表示・装飾 (HTML,CSS)

更新日：2008年02月02日

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

西村文宏

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

スタイルシートのborderプロパティを使うと様々な枠線を作れますが、もっと目立つ凝った枠線を作ってみましょう。今回は、以下のような枠を作る方法をご紹介いたします。

緑色と黄色の斜線からなる縞模様の枠線です。

橙色と赤色にもできます。

水色と青色にも。記述する文字列が多ければ、枠の高さも自動的に広がります。

上記の3つは、どれも枠線の太さが5pxです。この太さは、スタイルシートで自由に変更できます。

枠線の太さは自由に変えられます。細くした例。

これは太くした例。

「縞模様の枠線」の枠線をなくすと、以下のようにもできます。

枠線の枠線をなくした版。

「縞模様の枠線」の枠線の色を工夫すると、枠線そのものを立体に見せることもできます。

縞模様の枠線が浮き上がったように見える例。

縞模様の枠線が凹んでいるように見える例。

いかがでしょうか？なかなか目立つ枠になっているのではないでしょうか。
これらの枠線は、画像とスタイルシートを使って実現しています。

それでは、この枠線の作り方を順にご説明いたします。

人気ホームページ作成ランキング

関連キーワード[PR]

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

おすすめ厳選サイト

季節特集

All Aboutスタイルストア

COCOMO ココロのこもった贈り物。

専門家を探せる、相談できる。

All About モバイル

All Aboutがケータイで読める！

オススメ記事をメールでチェック