2006年01月18日

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

このブログの記事欄は、枠に角がない。

滑らかな感じの枠にしているわけなのだが、需要があるかは兎も角として、

角のない枠の作成方法を数回に分けて解説して行こうと思う。

このブログのソースは、面倒なのでTableを多用して組んでいるのだが、divを使った方法にも挑戦する予定である。

角のない枠といっても幾つか方法があるので、簡単なものから順番に解説していく。

なお、これから書くことは小生の独学なので、もっと効率的な方法があるかもしれないのだが、知ってる方は教えてください。

また、画像が必要になってくるのだが、その作成方法は解説できるレベルに無いので独自にお願いしたい。


1.背景に枠を書く方法

用意する画像は以下のように作成したい枠内全体のデザインである。

この例だと、300×100pxのサイズの枠画像。分かりやすいように背景色を記事の背景と変えているのだが、実際作成する場合は表示する周りの背景と同色にする。

この画像を普通に表示した場合、もちろん画像の上にTEXTを書くことは出来ない。

したがって、これを背景として表示させることで問題を解決する。

DIVで囲むわけなのだが、

必須なCSSは、まずは縦幅と横幅の指定、

この場合は300×100なので

height: 100px;
width: 300px;

となる。お好みでマージンや余白を設定する。

次に

上記の画像を背景表示させるためのソースとして

background-image: url(画像URL);

を指定する。

実はこれだけでは不十分で、背景画像はスペースがある限りリピートで表示されてしまうので、リピートをキャンセルしなければいけない。

background-repeat: no-repeat;

このように指定してやれば、上記の画像を一度だけ背景として表示して、残りのスペースがあったとしても繰り返される事はない。まとめると以下のようになる。

.samp1 {
background-image: url(画像URL);
height: 100px;
width: 300px;
background-repeat: no-repeat;
}

さて、これらのCSSソースを用いて実際に表示させてみると以下のようになる。

一見最初に表示した画像と同じように見えるが、背景で表示させているために画像の上に文字を入力する事が可能である。

あとは、実際の見出しとメニューリンクを適度な設定を作って表示させればよい。 例えば、カテゴリタイトルをh6タグで表示させてみると

カテゴリ

このようにh6タグをCSSで調整してやることで、綺麗に表示される。

h6タグのCSSはこの場合このように指定している。

.samp1 h6 {
margin: 0px 0px 0px 15px;←左に15pxのマージン
padding: 0px;←余白0px
font-weight: bold;←太字表示
color: #FF0000;←赤色
font-size: 17px;←フォントサイズ
line-height: 30px;←行間30px
}

注意しないといけないのは文字の高さ指定である。マージンなどで上に余裕を取る事で、『カテゴリ』の文字を適切な高さに表示させたくなる人が多いと思うが、マージンや余白で高さを調節してしまうと、IEで適度な表示位置であっても、他のブラウザでは不適切な位置に表示されてしまう。したがって、行間を指定するline-heightは必須だと思われる。

細かいことを書くと小生は、表示に必要がない場合でもマージンや余白の0pxは指定している。曖昧なところがあるとブラウザによっては影響が出そうだからである。

因みにココまでの上記のソースは以下のようである。

<div class="samp1">
<h6>カテゴリ</h6>
</div>

たったこれだけである。

簡潔なソースで、デザイン的には全然オサレになるでしょう?

同様にしてメニューの位置も設定してやると以下のようになる。

リンクメニューのCSSは、

.samp1_menu {
padding: 0px;
margin-top: 0px;←上に0pxのマージン
margin-right: 0px; ←右に0pxのマージン
margin-bottom: 2px;←下に2pxのマージン
margin-left: 20px; ←左に20pxのマージン
}

マージンはまとめて
margin: 0px 0px 2px 20px;
と書くことも可能である。

ココまでのソースは
<div class="samp1">
<h6>カテゴリ</h6>
<div class="samp1_menu"><a href="URL">GetMoney!純情編</a></div>
<div class="samp1_menu"><a href="URL">サイト作成希望編</a></div>
</div>

でとてもスマートである。


さて、この方法はとてもソースが簡略化されている上に作成が簡単だという利点があるのだが、欠点もある。

1.枠内全体を画像を使って表示させているわけなので、多用したり大きな枠の場合はページ全体の容量が大きくなってしまう

2.枠内を画像で表示させているために、コンテンツが増えた場合に枠からはみ出てしまい、その場合いちいち画像を作り直す必要がある。

といった感じなので、ちょっとしたコーナーを作成する場合や表示の遅さを無視してSEOを重視する場合以外には、使いどころが難しいかもしれない。

しかしながら、いろいろ応用が利くので知っておいて損はないと思われる。

近いうちに、上記の不具合に対応した、ちょっとソースが複雑だけれど角のない枠の作成を解説する予定である。

こうご期待?

posted by れいえん at 12:07| Comment(0) | TrackBack(0) | サイト作成希望編 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


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

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