画像を利用した枠を作成するには

今回から数回に分けて、「画像を利用した枠の作成方法」について説明していきます。

当ブログのエントリー部分や右サイドメニューを見ていただくと、角が丸い枠で囲まれています。このような枠の作成方法を教えて頂きたいと「掲示板」にて、リクエストがありましたので、お答えしていきます。

画像を利用した枠の作成方法

まず最初に、画像を利用した枠の作成方法には、下記の２つの方法がありますので、それぞれ説明していきます。

1．テーブルを利用する方法
　3行×3列の表を作成し、中央のセル部分は、エントリーなどに利用し、その周りの8つのセル部分に、枠の画像を貼り付けたり、背景画像を指定する方法です。

	サンプル（9分割）

2．CSSを利用する方法
　divタグなどで３つのパーツに分け、スタイルシートで下記のような背景画像を指定する方法です。

サンプル（3分割）

テーブル利用とCSS利用との比較

テーブルを利用する方法とCSSを利用する方法について、上記で簡単に説明しました。では、実際に、画像を利用した枠で囲むには、どちらの方法で作成したらよいのでしょうか？

それを判断する材料として、テーブルを利用した場合とCSSを利用した場合を比較し、それぞれのメリットとデメリットを挙げていきます。

■ テーブル利用とCSS利用との比較

比較項目	テーブル利用	CSS利用
記述量	多い	少ない
表示速度	遅い	速い
画像数	8つ使用	3つ使用
固定幅	OK	OK
可変幅	OK	NG

テーブルの場合は、HTMLタグをメインに使用するため、非常に記述が多くなり、表示速度にも影響があります。
しかし、横幅が違う枠を別に作成する場合、一度画像を作成しておけば、同じ画像を使いまわしすることができます。また、可変幅でも対応可能です。

それに比べ、CSSの場合は、スタイルシートをメインに編集するため、枠をいくつ作成しても、記述は少なくてすみます。
ただし、横幅が違う枠を作成する場合は、その横幅ごとに画像を作成する必要があります。また、可変幅では、背景画像の横幅が固定しているため、適していません。

このように、テーブルとCSSには、それぞれメリットとデメリットがありますが、デザインに関する記述は、できるだけCSSに記述し、HTMLを軽減する方が望ましいとされています。しかし、CSS利用の場合では、可変幅のレイアウト部分では使用することができません。ですので、使用する部分に応じて、使い分けてみてはいかがでしょうか？

次回からは、それぞれの作成方法を具体的に説明していきます。

	ブログカスタマイズ講座～デザイン編 ・画像を利用した枠を作成するには ・画像を利用した枠の作成（テーブルヴァージョン） ・画像を利用した枠の作成（CSSヴァージョン） 　MTカスタマイズ講座～デザイン編 ・画像で作成した枠で囲む（テーブルヴァージョン） ・画像で作成した枠で囲む（CSSヴァージョン）

ブログランキングに参加中です。応援お願いします。