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

縞模様の枠を作ろう!

TABLEタグを普通に使って作る枠では満足できない方々のために、縞模様の枠の作り方と、細い枠線の作り方をご紹介致します。特に縞模様の枠は目立つこと間違いなし! ぜひ、活用してみて下さい。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

※より良い実現方法を別記事で解説しています。
この記事でご紹介している方法は、HTMLのみを用いて実現する方法です。 スタイルシートを用いてもっと自由自在に実現する方法を、新記事「縞模様で目立つ枠線(囲み)を作る」(2008年2月2日)で公開しています。 そちらもぜひご参照下さい。

普通ではない枠を作りたい

HTMLのtableタグを使って枠を作ると、次のように表示されます。 代表的なブラウザでは、枠が立体的に見えます。

このような枠だけではつまらないと思う方々のために、今回は次のようなちょっと変わった枠の作り方をご紹介いたします。

●縞模様の枠線

●太さ1pixelの枠線

HTMLのtableタグを用いて表を作成すると、(少なくとも代表的なブラウザでは)枠線が立体的に表示されます。 tableタグには枠線の太さなどを指定する属性がありますが、それを最小にしても、立体的に表示されることには変わりありません。
たまには、立体的ではない細い線を使った枠や、もっと複雑な模様の枠を使ってみたいとは思いませんか?

というわけで、今回は、上記のようなちょっと変わった2種類の枠を作ってみましょう。

縞模様の枠線を作る

まずは、実現方法の流れを簡単にご説明致します。詳しい記述内容は次のページで解説しています。

1. 次のような画像を用意します。
縞模様サンプル:青 縞模様サンプル:赤 縞模様サンプル:緑
2. その画像を背景色にして(TABLEタグで)枠を作ります。
3. その枠の内側に、背景色が白色の枠を作ります。
4. 外側と内側のtableタグの属性を調整します。

以上です。簡単ですね。具体的な記述方法は、次のページでご紹介しています。
※スタイルシートを用いてもっと自由自在に実現する方法を、新記事「縞模様で目立つ枠線(囲み)を作る」(2008年2月2日)で公開しています。

太さ1pixelの枠線を作る

太さ1pixelの細い枠線も、実現方法はほとんど同じです。

1. 適当な色を背景にして枠を作ります。
2. その内側に、背景色が白色の枠を作ります。
3. 外側と内側のtableタグの属性を調整します。

以上です。非常に簡単ですね。 具体的な記述方法は、次のページでご紹介しています。

具体的な記述方法(HTMLソース)は次のページで >>

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます