LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

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

<<   作成日時 : 2014/10/01 22:11   >>

ブログ気持玉 0 / トラックバック 0 / コメント 1

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

用意するものは背景が透過された画像と、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内に記述した。

<head>
 (略)
<style>
 #fore {
  z-index: 1000; /*重ね順。数値は任意*/
  position: fixed; /*スクロールしても固定*/
  bottom: 0px; /*divを一番下に*/
 }
 #fore img {
  position: absolute; /*浮かせる*/
 }
 #fore img#foreimg {
  margin-top: -256px; /*divの始点が画面外になるので頭をマイナス方向に*/
 }
</style>
</head>



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

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(1件)

内 容 ニックネーム/日時
If you desire to get a good deal from this article then you have to apply such techniques to your won webpage.
Cedric
URL
2017/07/24 22:21

コメントする help

ニックネーム
URL(任意)
本 文
影付き画像をサイト最下部に固定配置する LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる