ホームページ作成 - 影を入れる方法（背景色） - WEBサイト作成　フリー素材コード　の1uphp.com スタイルシート,htmlやFirefox,Operaなどのブラウザの表示結果まで。

ホームページ作成ＴＯＰ > レイアウト > 影を入れる方法（背景色）

影を入れる方法（背景色）

影を表現して、ページ内に立体的に見える範囲を作成する方法です。

影を表現するには、

影のある画像を背景として配置
影に見える色のブロックを背後に配置

の２種類を行う事で可能になります。

今回は、２番目の『影に見える色のブロックを背後に配置』する方法をスタイルシートにて行います。

sample

影に見える色のブロックを背後に配置

ＨＴＭＬ　

スタイルシートにて行います。

ホームページ作成ＴＯＰ > レイアウト > 影を入れる方法（背景色） > このページのＴＯＰ　▲

スタイルシート　position:relative;

スタイルシートにて背景に影がある様にする事を、画像を使用しないで表現する方法です。

【考え方】

ブロック要素(<div>～</div>)を、２個用意する。
片方（前面にする側）の<div>を背面側の中に入れる。
影に見える様に、２つのブロックをずらす。
内容を前面ブロックに入れる。

１．ブロック要素(<div>～</div>)を、２個用意

<div>～</div>を２つ用意します。

この際、ブロックの大きさは同一にして、背景色を設定します。

設定	内容	備考
幅	200px
高さ	60px
背景色（背面側）	#cccccc	shadowbox
背景色（前面側）	#ff6666	mainbox

スタイルシートの書き方は


.shadowbox {
            width:200px;
            height:60px;
            background-color:#cccccc;
           }
.mainbox   {
            width:200px;
            height:60px;
            background-color:#ff6666;
           }

ＨＴＭＬの書き方は


<div class="shadowbox"></div>
<div class="mainbox"></div>

ホームページ作成ＴＯＰ > レイアウト > 影を入れる方法（背景色） > このページのＴＯＰ　▲

２．片方（前面側）の<div>を背面側の中に入れる。

用意した<div>～</div>の中に、もう一つの<div>～</div>を入れます。
重なった状態になります。

　↓　重なります　↓　

書き方は


<div class="shadowbox"><div class="mainbox"></div></div>

ホームページ作成ＴＯＰ > レイアウト > 影を入れる方法（背景色） > このページのＴＯＰ　▲

３．影に見える様に、２つのブロックをずらす。

重なっている<div>～</div>をずらします。今回は右下に向かって５ｐｘずらします。

これを実現するには、ブロック要素をずらして移動する内にあるposition:relativeを使用します。

position:relativeを使用すると『相対的に移動する事』が出来ます。

【考え方】

全体の<div>を、上から5px・左から5pxずらす。
中身の<div>を、上に-5px・左に-5pxのマイナス方向にずらす。

上記の考え方になりますので、以下に説明していきます。

１．全体の<div>を、上から5px・左から5pxずらす。

まず、最初に全体をずらす為に最も外側の全体を囲っている<div>（今回では影の部分になります。）に

position:relative
top:5px
left:5px

を設定してずらします。

ホームページ作成(影)

２．中身の<div>を、上に-5px・左に-5pxのマイナス方向にずらす。

次に、中身である<div>にマイナスの方向の設定である

position:relative
top:-5px
left:-5px

を設定し、元の位置に戻します。

これで、背景色となる<div>を残して、前面側の<div>だけ元の位置に戻ります。

ホームページ作成(影)

スタイルシートの書き方は


.shadowbox {
            width:200px;
            height:60px;
            background-color:#cccccc;
            position:relative;
            top:5px;
            left:5px;
           }
.mainbox   {
            width:200px;
            height:60px;
            background-color:#ff6666;
            position:relative;
            top:-5px;
            left:-5px;
           }

ＨＴＭＬの書き方は


<div class="shadowbox"><div class="mainbox"></div></div>

ホームページ作成ＴＯＰ > レイアウト > 影を入れる方法（背景色） > このページのＴＯＰ　▲

４．内容を前面ブロックに入れる。

最後に内容を前面ブロックに入れて完成になります。

前面になっている<div>～</div>の中に『内容』を入れていきます。

今回は区別する為に内容は、<p>～</p>にて行っていきます。

<p>影に見える色のブロックを背後に配置</p>を入れて見ましょう。
（文字色を今回は白色#ffffffにします。）

影に見える色のブロックを背後に配置

上部の接触していて見にくいので、余白を取ります。（padding:10px）

また、この段階でOpera7では、段落<p>の余白(margin)が影響して、背景部分が重なってしまい影の様に見えません。
よって、margin:0px;にてマージン部分を無くします。

影に見える色のブロックを背後に配置

完成です。

全部の書き方

スタイルシート、ＨＴＭＬの書き方は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

.shadowbox {
            width:200px;
            height:60px;
            background-color:#cccccc;
            position:relative;
            top:5px;
            left:5px;
           }
.mainbox   {
            width:200px;
            height:60px;
            background-color:#ff6666;
            position:relative;
            top:-5px;
            left:-5px;
           }
p          {
            margin:0px;
            padding:10px;
            color:#ffffff;
           }

 -->
 </style>
 </head>
 <body>

<div class="shadowbox"><div class="mainbox">
<p>影に見える色のブロックを背後に配置</p>
</div></div>

 </body>
</html>

こうなります