コンテンツ両側に影を入れる

　コンテンツ部分と背景部分にcssを利用して影をつける　2012/5/16　安倍

影なし下側の表と比較されたし

この表の上半分は左右のマージンを設定するために表を入れ子にした。

本文コンテンツを入れた１行１列の両側に１列づつ追加、すなわち１行３列にして両側の列に影画像を入れる技法である。
コンテンツの長さにあわせて影の長さを自動的に変えるようにCSSを使う。

影の両端に空白の白線が入ることがある。
対策：
　・表全体の背景色を白にすることで解決するようだ。
　・CSS内で背景色を白に指定する必要はないはず。
　

影画像の幅：１５px、高さ：1px　である。　この幅を変更すると影の濃度が変わるだけで幅は変わらない。
CSSの幅 15px を変えると表両端幅が変わるがborde色rは変わらない。

ああ

いい

うう

ええ

おお

例ＨＰ

http://canon.jp/

http://www.club-barbarian.com/index.html

安倍試作
http://www.geocities.jp/seikei1958/reikai/about33kai.htm

上のＨＰ例の基本構成
・本文
・style.css
・image/ フォルダの中の左右画像　「bg_left2.jpg」「bg_right2.jpg」

本文の記述
・全体を１行１列の表に入れる。背景色：EEEEEE（グレー）
・その表の冒頭 <tr>の後に<td class="main_left"> </td>
・その表の末尾</tr>の前に<td class="main_right"> </td>
･本文の冒頭Titleの下に<link href="style.css" rel="stylesheet" type="text/css" />
の記述を入れる。　すなわち、表両側に1列づつ挿入する下記記述。
-----------------------------------
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="main_left"> </td>
<td>なんたらかんたら</td>
<td class="main_right"> </td>
</tr>
</table>
-----------------------------------

スタイルシート style.css の内容

/****　以下ブロック4行　は不要の場合が多い。　*****　*/
body,td,th {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}

/* ******　以下　影の基本　**********/

.main_left {
background-image: url(image/bg_left2.jpg);
background-repeat: repeat-y;
width: 15px;
background-position: right top;
margin: 0px;
padding: 0px;
}.main_right {
background-image: url(image/bg_right2.jpg);
background-repeat: repeat-y;
width: 15px;
background-position: left top;
}
-----------------------------------

影画像（縦1px につき見えない）

「bg_left2.jpg」「bg_right2.jpg」というのが影の画像

ネット解説
http://oshiete.goo.ne.jp/qa/3449804.html

上の例のHP引用元：
http://www.club-barbarian.com/index.html

以上。

ホームページ作成体験にもどる