2006年01月20日

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

懲りずに角のない枠の作成方法である。前々回前回も読んでいただきたい。

なお、このシリーズ、記事内のソースが結構複雑化しているため、1回UPロードをすると大抵ミスがでる。

ブログはPINGというものがあるのでアップすると直ぐに見に来られる方もいるわけなのだが、

Seesaaで記事数が400本以上もあるとカナリ更新に時間が掛かるため修正前の記事に遭遇する方もいらっしゃる。

急いで直しているのだが、気になるアラを見つけた方は後ほど再び覗いてみると修正されていると思います。

また、ちゃんと記事を読んでいる人がどれほどいるかは分からないが、技術的な質問にもなるべく対応しようと思っております。

気軽にメールを下さるとうれしいです。


さて。

今回は、前回の方法を更に洗練させたものである。

使う画像は必要最小限にとどめて、同じ画像で、横幅も伸縮自在(CSSを変える必要があり)なカドのない枠の作成方法について解説する。

まずは、用意する画像から。

必要最低限の画像なので、枠を構成する特徴的な部分を抜き出して、使用する。

具体的には以下のような画像が必要である。

1.ヘッダー左部分 10×23px
2.ヘッダー中央部分 10x5px
3.ヘッダー右部分 9×23px
4.フッダー左部分 10×9px
5.フッダー中央部分 5×9px
6.フッダー右部分 9×9px

コンテンツ部分は、複雑になってしまうので前回の細長い画像を使うか、htmlソースで作成した方が良いと思う。ただし、画像を使った場合は同じ画像で横にカスタマイズ自由というふうには行かなくなる。

さて、前回と同じようにTableを用意する。

     
 
 

前回と違うのは、ヘッダー部分が3パートに分かれていることである。

横に3パート化したことにより、横幅の詳細な設定が必要になったので、tableの横幅を設定する。
上記の場合は、CSSでwidth;290pxと指定してる。

上記の tableのヘッダーの右と左にそれぞれ対応する画像を表示させる。
具体的には以下のようになる。

 
 
 

次にヘッダーの中央部分を設定する。
<td> に設定するcssは以下のようになる。
.samp3_1 {
background-image: url(画像URL);←背景画像、ここでは2番のもの
background-repeat: repeat-x;←X軸に背景画像を繰り返し表示させる
width: 271px;←横幅
height: 23px;←縦幅
}
それぞれの解説をすると、横幅がもともと5pxのものをbackground-repeat: repeat-xでX軸方向に繰り返し表示させる事でサイズを軽減させている。
その際の横幅は、左の画像の横幅10pxと右の画像の横幅9pxを全体の290pxから差っぴいた値である271pxとなる。
実際に表示させてみると、以下のようになる。

 
 
 

因みにここまでのソースは以下のようになっている。
<table class="samp3_table">←classで横幅指定
<tr>
<td><img src="画像URL" width="10" height="23" alt=""/></td>←ヘッダー左部分
<td class="samp3_1"></td>←ヘッダー中央部分
<td><img src="画像URL" width="9" height="23" alt="" /></td>←ヘッダー右部分
</tr>
<tr>
<td colspan="3"></td>←コンテンツ部分、未設定
</tr>
<tr>
<td colspan="3"></td>←フッダー部分、未設定
</tr>
</table>

次にフッダー部分の作成に入る。
まずフッダー部分に、4、5、6の画像を表示させてみる。
すると以下のようになる。

 
 

ご覧のように全然横幅がたりない。これは、5番のフッダー中央部分の画像の横幅が5pxしかないためである。
しかしながら、この5番の画像はY軸に対象な画像なので、いくら横に伸ばしてもデザインが崩れない
そこで、画像のサイズ指定をデフォルトの5pxから271pxに拡張して表示させる。
具体的なソースはつぎのようになる。

<img src="5番の画像URL" alt="" width="5" height="9" />

<img src="5番の画像URL" alt="" width="271" height="9" />

実際に表示させてみると以下のようになる。

 
 


ここまでの実際のソースは以下のとおりである。
<table class="samp3_table">
<tr>
<td><img src="画像URL" width="10" height="23" /></td>←ヘッダー左部分
<td class="samp3_1">;</td>←ヘッダー中央部分
<td><img src="画像URL" width="9" height="23" /></td>←ヘッダー右部分
</tr>
<tr>
<td colspan="3"></td>←コンテンツ部分、未設定
</tr>
<tr>
<td colspan="3"><img src="画像URL" alt="" width="10" height="9" /><img src="画像URL" alt="" width="271" height="9" /><img src="画像URL" alt="" width="9" height="9" /></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;←左ラインの色。
}

これをコンテンツ部分の<td>にclassとして設定して、前回の記事のようにtableにセル余白0をあらわす cellpadding="0"とセル間隔0をあらわすcellspacing="0"を<table>に付け足してやると完成である。

 
 

さて、実際のソースを見ていただければ分かるが、この方法はヘッダー部分のtableを3パートに分けて作成している。
そのため、前回のソースより若干複雑化している。

そういうわけで、こんどはヘッダー部分を1パートのtableで作成してみよう。
因みにこのブログの記事欄はこの方法で作られている。

ヘッター部分以外は、上記と一緒なので、最初に用意するtableはこのようになる。

 
 

見やすいようにボーダーをつけたが、これを元にヘッダーを再び作り直していく。
まず、ヘッダーを構成する要素を考えると次のようになる。

左カド画像 見出し 右カド画像

今回は見出しをh4タグで、表示するということにする。
カテゴリコーナーを作成すると仮定すると、具他的なヘッダーの並びはこのようになる。

左カド画像 <h4>カテゴリ</h4> 右カド画像

これをこのまま、CSSのレイアウトなしでヘッダー部分のテーブルに入れると以下のようになる。

カテゴリ

 

全然形になっていないのだが、これをCSSでキチンと表示されるように設定していく。
まずは、それぞれの要素が縦に並んでいるのを横に表示させたいので画像部分のCSSは、以下のようなソースにする。
.samp3_0 {
float: left;←次のソースを横に表示させる
}

これをヘッダー部分の2つの画像にclassとして設定すると次のようになる。

カテゴリ

 

カテゴリが、画像の横に来た。

次にカテゴリの文字を表示させる見出しのh4タグをCSSで次のように設定する
.midashi {
font-size: 16px;←見出しの文字サイズ
line-height: 23px;←見出しの行間
background-image: url画像URL);←ここでは2番の画像
background-repeat: repeat-x;←2番の画像をX軸方向に繰り返し表示
height: 23px;←縦幅
width: 271px;←横幅
float: left;←となりの画像を横に表示させる。
margin: 0px;←マージン0
}
基本的な考え方は、ヘッダーを3つのTableに分けたときの真ん中のTableと同じである。
ただし、h4タグなので、デフォルトだとマージンがいくらか設定されている。したがって、0pxなどを指定してやる必要がある。

さて、これらをすべて設定して表示させると以下のようになる。ボーダーは取っ払った。

実はここで、 横間隔0のhspace="0" をヘッダー部分の2つの画像に追加している。
これをやらないと枠がつながらないのだ。気づきづらいがココがポイントだったりする。
ちなみにこれもCSS側での表記の仕方がわからないので、知っている方は教えてください。

カテゴリ

 

完全にくっついたものになり完成である。

ちなみに、float:leftを使った場合は、どこかでこの設定を無効にするclear:leftが必要である。
table内なので必要ないかもしれないが、入れておいたほうが安全だろう。
したがって、この場合は、コンテンツ部分のCSSソースにclear:leftを入ておいた。

ここまでのソースは以下のようになっている。

<table cellpadding="0" cellspacing="0" class="samp3_table">
<tr>
<td>
<img src="画像URL" width="10" height="23" hspace="0" class="samp3_0" />
<h4 class="midashi">カテゴリ</h4>
<img src="画像URLf" width="9" height="23" hspace="0" class="samp3_0" />
</td>
</tr>
<tr>
<td class="samp2_1_1"></td>
</tr>
<tr>
<td>
<img src="画像URL" alt="" width="10" height="9" />
<img src="画像URL" alt="" width="271" height="9" />
<img src="画像URL" alt="" width="9" height="9" />
</td>
</tr>
</table>

最後に前回と同様にTableではなくdivで組んでみよう。

ソースは以下のような感じ。

<div class="samp2_1">
<div>
<img src="1番の画像URL" hspace="0" width="10" height="23" class="samp3_0" />
<h4 class="midashi">カテゴリ</h4>
<img src="3番の画像URL" hspace="0" width="9" height="23" class="samp3_0" />
</div>←ココまでヘッダー部分
<div class="samp1_menu"><a href="URL">サイト作成希望編</a></div>
<div class="samp1_menu"><a href="URL" >GetMoney!純情編</a></div>←ここまでコンテンツ部分
<img src="4番の画像URL" alt="" width="10" height="9" />
<img src="5番の画像URL" alt="" width="271" height="9" />
<img src="6番の画像URL" alt="" width="9" height="9" />←ココまでフッダー部分
</div>

ちょっとだけ解説すると,

class="samp2_1"というのは前回出てきたコンテンツ部分を背景画像を用いて表示するCSSソースである。
samp1_menuも前々回出てきた リンクの位置などのデザインだが、clear:leftを新たに追加している。
詳細は前回参照のこと。
のこりのCSSソースは上述のものと同じである。
.samp2_1 {
width: 290px;
background-image: url(画像URL);
background-repeat: repeat-y;
clear: left;
margin: 0px;
padding: 0px;
}
このclassで設定したdiv内にヘッダーとフッダーの要素を全部詰め込んで、枠として成立させている。


分かりやすく説明すると、上記のような横枠だけをまず背景表記させたdivを作って、その上に曲線の画像を置くというイメージである。
ライン的には曲線だが、画像的には全部四角形なので、端に置くと背景表示させたラインは、見えなくなるのである。
なお、上の例ではリンクも表示させているが、これは環境によっては空タグの場合横のラインが見えないので、それを防止するためのものである。

ソースでラインを作る方法だと、画像をソースで作成したラインの上に置く事が出来ないのでこの方法は不可能である。

こんな感じでしょうか?

記事を書くのに時間ばかりが掛かって激しく後悔している小生なのであった。

なれない事はするものじゃない。

posted by れいえん at 12:15| Comment(4) | TrackBack(0) | サイト作成希望編 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
いつも楽しく読ませていただいてます。

ど〜しても気になるので、『ヘッター』についてコメントさせてください。

ヘッター → ヘッダー の方が正確なのでは?

わざとなのか、釣りなのか、『ヘッター』で検索してくる人を捕まえようという高度な技なのか、若輩者の私には想像できませんが、一応釣られて見ました。

Googleで検索すると、
HTML CSS ヘッダー の検索結果 約 170,000 件
HTML CSS ヘッター の検索結果 約 140 件
で、圧倒的に『ヘッダー』の勝利です。

ちなみに、
HTML CSS フッター の検索結果 約 25,400 件
HTML CSS フッダー の検索結果 約 233 件
です。

いや、でも面白いので修正せずにそのままで残しておいてください。
Posted by とおりすがり at 2006年01月20日 19:05
>とおりすがりさん

SEOを狙うときは、一箇所だけヘッター、フッターと書くだけで済むので素で間違いです。
書くときに迷いましたがどっちでもよいか。などと思っておりました。
小生、以前にURLをUHLだとずっと思っていたという前科がありますので、結構アホな子です(笑)

あとでこっそり直しておきます。
コメント欄を読まれればまる分かりなんですけどね。ご指摘ありがとうございました。
Posted by ににっち at 2006年01月21日 07:37
ににっち様

うわっ、早速全て修正してありますね。
素早い。。。
でもコメント削除しないところが素敵です。
Posted by とおりすがり at 2006年01月24日 00:45
>とおりすがりさん
せっかくコメントしていただいたのですかラ消しませんよ。流石に関係ない宣伝は消しますけれど。

日曜日にこっそりやりました(笑)
Posted by ににっち at 2006年01月24日 09:56
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


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

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