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

縞模様の枠を作ろう!(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

それでは、具体的な記述方法をご紹介していきましょう。

縞模様の枠線を作る

STEP1. 画像

まず、縞模様の画像を用意します。 作るのが面倒な方は、素材集サイトから探してみるのも良いでしょう。 また、下記の画像は、ご自由にダウンロードしてお使い頂いて結構です。
もちろん縞模様である必要はありませんので、いろいろな模様で試してみてください。

サンプル画像(ご自由にコピーしてお使い下さい)
縞模様サンプル:青 縞模様サンプル:赤 縞模様サンプル:緑

STEP2. その画像を背景にして枠を作成

上記の画像を背景にして枠を作成します。 次のように記述します。

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td background="backsample2.gif" bgcolor="#ff9f5f">
    (中身)
    </td>
  </tr>
</table>
: TABLEタグの各属性(枠線の太さなど)はすべて値を0にします。
: 背景画像ファイル名です。(ここでは、先ほどのサンプル画像の「赤色縞模様」のファイル名(backsample2.gif)を指定しています。)
: 背景色の指定です。これは本来は意味のない指定ですが、もし背景画像が何らかの原因で表示されなかった場合のために、画像と似た色を背景色として指定しておきましょう。

STEP3. その内側に背景が白色の枠を作成

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td background="backsample2.gif" bgcolor="#ff9f5f">

      <table border="0" cellspacing="3" cellpadding="2">
        <tr>
          <td bgcolor="#ffffff" background="">
            ここが枠の中身です。
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>
: border属性の値を「0」にするか「1」にするかで、少し見栄えが変わります。試してみてください。
: cellspacing属性は、縞模様枠の太さになります。ここでは「3」を指定しています。cellpadding属性は、枠から中身までの余白の大きさです。いろいろ試してみましょう。「0」を指定すると枠にぴったりくっつきます。
: 背景色です。ここでは白色(#ffffff)を指定していますが、好きな色を記述して下さい。
: これが重要で、Netscape Navigator 4.xでは、この記述がないと背景色(ここでは白色)が解釈されず、縞模様が全体に表示されてしまいます。

STEP4. 微調整をすれば出来上がり

上記のように記述すると、次のような枠が出来上がります。

TABLEタグの各属性の値をいろいろ変えてみましょう。

ここでは縞模様を使いましたが、他の模様でも試してみると面白いでしょう。

太さ1pixelの枠線を作る

太さが1pixelの枠線も、作成方法は上記の縞模様の方法と同じです。(背景画像の指定がないだけです。) 上記と同じ手順で、次のようなHTMLを記述することで実現できます。

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#0000cc">

      <table border="0" cellspacing="1" cellpadding="1">
        <tr>
          <td bgcolor="#ffffff">
            ここが中身です。
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

: これが枠の色になります。ここでは濃い青色(#0000cc)です。
: これが枠の内側の色(背景色)になります。ここでは白色(#ffffff)です。
: cellspacing属性は、枠線の太さになります。ここでは「1」を指定していますので、最も細い線になります。
: cellpadding属性は、枠線と中身との間の余白の大きさになります。「0」を指定すると枠にぴったりくっつきます。

上記のように記述すると、次のような枠が表示できます。

cellspacing属性を変えると、太さを自由に変えられます。

いろいろ試してみましょう

というわけで、今回は、縞模様の枠線を作る方法と、1pixelの枠線を作る方法をご紹介いたしました。
HTMLの標準的な枠だけでは物足りない方は、ぜひ活用してみてください。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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