影付き画像をサイト最下部に固定配置する

サイトデザインでスクロールしても常に画像を最下部に表示し、さらに遠近感を出すために画像の影をコンテンツ内に落とす手法を実装することにした。

用意するものは背景が透過された画像と、CSSだけでよい。
下図は実装した時の例となる。
考え方としてはコンテンツ部と画像部を分け、画像部の重ね順を最前面に配置する。

 影付き画像の配置


まず、背景透過の画像を用意する。
透過するには画像形式がGIFかPNGになる。
JPEGは透過に対応していないので、コンテンツの前面に配置しても白背景が出て文字等が隠れてしまう。

GIFは昔から使われている画像形式だが、利用できる色数に限りがあるので綺麗な画像を作るには向いていない。
そのためPNGを利用するのが一番良いが、古いブラウザはPNGの透過に対応していないことがあるのでこの点は注意が必要となる。
最近のブラウザはPNGに対応しているので今回はこの形式を利用する。

 背景透過画像


次にHTMLに画像を配置する。
コンテンツ部分と画像部分を下記のようにする。

<body>
 <div id="fore">
  <img id="foreimg" alt="" src="01.png">
 </div>

 <div id=main>
  <p>[1][2][3][4][5][6][7][8][9][0]</p>
  <p>[1][2][3][4][5][6][7][8][9][0]</p>
  <p>[1][2][3][4][5][6][7][8][9][0]</p>
  <p>[1][2][3][4][5][6][7][8][9][0]</p>
  <p>[1][2][3][4][5][6][7][8][9][0]</p>
  <p>[1][2][3][4][5][6][7][8][9][0]</p>
  <p>[1][2][3][4][5][6][7][8][9][0]</p>
  <p>[1][2][3][4][5][6][7][8][9][0]</p>
  <p>[1][2][3][4][5][6][7][8][9][0]</p>
 (略)
 </div>
</body>



最後にCSSでデザインを適応する。
外だしのCSSに記述してもよいし、HTML内に記述してもよい。
今回はHTML内に記述した。


 (略)




CSSのmargin-topで-方向に画像を配置しているが、この数値は画像の大きさによるもので今回の画像が256×256pxで作成しているためである。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

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