2006年01月19日

カドのない枠の作り方〜その2〜

この所、ギャップのある記事が連続しているのだが、

今回は昨日不評のうちに終了した.?カドのない枠の作成方法の2回目である。

まぁ当ブログはコメントが付かないのがデフォルトですけれど。

前回の記事から読んでいただくと少しは理解が増すと思います。

前回の方法では、多用するとサイズが大きくなって表示に時間がかかる。カスタマイズ性がわるい。という欠点があった。

したがって、今回はそれらに対応した方法を解説する。


2.要素別に分解する方法。

前回は、枠内を丸ごと画像で作成したが、今回の方法は作りたい枠をhtmlソースだけで表現できる部分と、出来ない部分に分けて表現できない部分だけを画像で処理するという方法である。

具体的には曲線が含まれる部分をhtmlで表現する事は出来ないので、それを含む部分を画像で作成する。

したがって、今回用意する画像は次のようなものになる。

1.ヘッダー部分。290×23pxの画像
2.フッダー部分。290×9pxの画像


コンテンツ部分はそこだけ独立させて考えると灰色ライン入りの四角い枠なので、htmlソースだけで表現できるのだが、

たとえば、枠線のデザインを凝ったものにする場合、ラインをhtmlソースで表現できない場合がある(陰をつける場合など)。
その場合は、コンテンツ部分も画像を用意する必要がある。

その場合に、用意する画像は次のようなものである。

3.コンテンツ部分。290×5pxの画像

このような細い画像を縦に繰り返し表示させる事で、サイズを軽減する。
横幅は290になっているが、これは自分のサイトデザインに合わせて作成する。


まずは、Tableを使って作成する。
要素が3つに分かれているので3段に分けたTableを用意する。

 
 
 

なお、見やすいようにボーダー1をTableに付けたまま作成していく。
上段に、1の画像を背景表示させる必要があるので、それ用のCSSを作成する。

具体的には、

.samp2 {
background-image: url(画像URL);←背景画像
background-repeat: no-repeat; ←繰り返し表示のキャンセル
width: 290px;←画像の横幅
height: 23px; ←画像の縦幅
}

となり、前回画像を背景表示させた方法と同じである。
これを上段の<td> にclassとして表示させると以下のようになる。

 
 
 

次にフッダーのラインであるが、これは上に文字が入力されない部分なので、普通に画像を表示させるだけでも十分だろう。
因みに背景で表示させる場合は、ヘッターと同様の方法を行う。
フッターに画像を表示させると以下のようになる。

 
 

ココまでのhtmlソースは以下のようになる(ボーダーは無しとして)
<table >
<tr>
<td class="samp2"></td>←ヘッター部分
</tr>
<tr>
<td ></td>←コンテンツ部分。未設定。
</tr>
<tr>
<td ><img src="画像URL" width="290" height="9" alt="" /></td>←フッター部分
</tr>
</table>


最後にコンテンツ部分を設定するわけなのだが、これは上述したように画像を使う方法とソースで作る方法の二種類がある。
まずは、ソースで作成する方法である。
その場合のCSSは以下のようになる。
.samp2_1_1 {
width: 288px;←横幅
border-right-width: 1px;←右のラインの幅
border-left-width: 1px;←左のラインの幅
border-right-style: solid;←右ラインのラインのデザイン。ここでは実線。
border-left-style: solid;←左ラインのラインのデザイン。
border-right-color: #999999;←右ラインの色。
border-left-color: #999999;←左ラインの色。
}
この場合、枠の横幅が290pxで、その内の左右1pxずつがラインなので、横サイズは290-2=288pxとなるので注意が必要である。
高さを指定していないが、これはコンテンツ内が縦に伸びると自動的に横のラインも拡張されていくために必要ない。
具体的には以下の様になる。

 
 


さて、ここでコンテンツ部分を画像を用いて表示する場合のCSSも解説しておく。CSSソースは以下のようになる。
.samp2_1 {
width: 290px;←横サイズ
background-image: url(画像URL);←背景画像
background-repeat: repeat-y;←縦に繰り返し表示
}

画像を使わないCSSの横幅が288だったのに対して、ラインも一緒に画像になっているのだからコチラの場合は290pxのままでよい。
細い3の画像を縦に繰り返し表示させるために、background-repeat: repeat-y という設定をしている。
これは背景画像をY軸に繰り返し表示させるためのものである。
もちろん、X軸に繰り返し表示させることもでき、その場合はrepeat-xとなる。

どちらでも良いのだが、以降は画像を使わないタイプのコンテンツで話を進めていく。

ラインが見づらいので、ここでボーダー1を外してみると以下のようになる。

 
 

ご覧のように上手くつながっていない。
これはなぜかというとTableのセル余白とセル間隔が開いているからである。
したがって、これを解決するには、
セル余白0をあらわす cellpadding="0"とセル間隔0をあらわすcellspacing="0"を<table>に付け足してやる事で解決する。
具体的に設定すると以下のようになる。

 

きっちりくっつきましたね。 これでカドのないフレームの完成である。
あとは、中に入れる見出しやリンクの位置やデザインをそれぞれのCSSに追加してやればよい。
ココまでのソースは以下のようになっている。
<table cellpadding="0" cellspacing="0">
<tr>
<td class="samp2"></td>←ヘッダー部分
</tr>
<tr>
<td class="samp2_1"></td>←コンテンツ部分
</tr>
<tr>
<td ><img src="画像URL" width="290" height="9" alt="" /></td>←フッダー部分
</tr>
</table>

実際にはTable要素にもCSSでサイズなどを指定してやれば安全かもしれない。また、cellpaddingやcellspacingをCSS側でレイアウトする方法があるはずなのだが、小生にはどうしても再現できなかった。余白やマージンを設定するだけでは駄目なようである。
ご存知の方がいたら教えて下さるとうれしいです。



さて、序に上記のTableを使った枠をdivだけで組むことに挑戦してみよう。

といっても、divで組むとちょっとした影響ですぐデザインが崩れて泥沼化するのであまり推奨できない。
さまざまな方法があるが、一例をあげるとこんな感じで作成できる。

コンテンツ


上記のソースはこんな感じ。
<div>
<div class="samp2"></div>←ヘッダー
<div class="samp2_1"></div>←コンテンツ
<div class="samp2_2"></div>←フッダー
</div>

このうち、ヘッダーとコンテンツ部分のCSSは、Tableに用いたものと同じなのでソースは上述している。
フッダー部分は、画像として表示させるのではなく背景表示させてみた。コンテンツ部分も画像を使用した。その方が安定しそうな感じだからである。

フッダー部分のCSSソースは、ヘッターのものと同じように設定する。
この場合は、
.samp2_2 {
background-image: url(画像URL);←背景画像
background-repeat: no-repeat;←背景リピート無し
height: 9px;←縦幅
width: 290px;←横幅
}
もっともこの方法だと、フッダーが基本的に空タグになってしまうので微妙である。
安定性が悪くて実用度のほどは微妙だが、一度Tableで作ったソースをdivに置き換えて作成する練習をする癖を作ると何気にHP作成能力が上がるようである。

さて、この方法でずいぶんとサイズを簡略化し、縦幅がautoで変更されるようになりカスタマイズ性が上がったのだが、それでもまだ欠点らしきものがある。

1、横幅が自由に変更できないので、横幅の違う同じデザインの枠を作成する場合、似たような別の画像が必要になるためページサイズが大きくなるし、カスタマイズ性に難点がある。

2、このブログの記事欄のように横に長い枠を作成するとヘッダー部分のサイズが結構馬鹿にならない大きさになる事がある。

何度も言うように需要があるかは不明だが、余裕があったら、次回はこれに対応した角のない枠の作成方法を解説することにしようと思う。

続く?

posted by れいえん at 11:22| Comment(0) | TrackBack(0) | 小遣いサイトで迷走編 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/11913794

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。