新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

背景(バックグラウンド)のイメージをモニター(ウインドウ)のサイズによって変える(レスポンシブルデザイン)Webサイトの作り方【CSS3コーディング】

      2014/11/26

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

今、作っている某総合福祉センターのサイトはレスポンシブルデザインにしようと思っています。
ただのレスポンシブルデザインではなく、ウインドウサイズによってメインのイメージのサイズが変わるかたちに挑戦してみました。
雰囲気としては以下のスタジオジブリのサイトと似た感じです。
メインのイラストであるトトロの大きさがウインドウサイズによって大きくなったり小さくなったりします。
ここで実際使っている方法かどうかはわかりませんが、なんとかうまくいったのでその方法をお伝えします。

□ スタジオジブリ – STUDIO GHIBLI

ジブリ小 ジブリ大トトロの大きさがウインドウサイズに合わせて可変します。

スポンサーリンク
 

これはCSS3のプロパティを使わないとできません。
具体的には「background-size」プロパティを使用します。

□ background-size-CSS3リファレンス

■値
auto:自動的に算出される(初期値)
contain:縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover:縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
長さ:背景画像の幅・高さを指定する
パーセンテージ:背景領域に対する背景画像の幅・高さのパーセンテージを指定する

今まで(HTML4及びCSS2)はバックグラウンドに敷く画像のサイズを変更することはできませんでした。
それが、CSS3で追加になった「background-size」で可能になったわけです。

いくつかプロパティ値が紹介されていますが、この中の何を使うかというと「contain」になります。
「background-size:conten」と書くことでその要素の高さ、及び幅に合わせてバックグラウンドイメージを表示してくれるようになります。

つまり、要素の高さ(height)と幅(width)を可変(例えばパーセンテージで指定してあげる)にしておけば、
それに合わせたバックグラウンドイメージを表示してくれるというわけです。

「div id=”wapper”」にバックグラウンドイメージを敷くことを前提として、具体的にはどのように書けばいいかというと、

#wrapper{
   width:100%;
   height:100%;
   background-image: url(images/top.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position:center center ;
}

といった感じ、

まず、width、heightはパーセント表示で書きます(ここでは100%)。
これで、画面サイズに合わせたブロックレベル要素が作られるわけです。

あとはバックグラウンドに敷くイメージの設定。
background-repeatは「no-repeat」(1回のみ、繰り返さない)にして
background-positionは上下ともに中央(center)にしています。
この辺りはデザインに合わせて調節してあげればいいと思います。

と、これだけ。
では実はうまく行きません。

#wapperにborderでも入れてあげて確認してみるとわかると思いますが高さが100%になってくれていないと思います。

実はこれ、親要素の影響を受けているからです。

「div id=”wapper”」の親要素はおそらく「body」(中にはさらに「div」で囲っている人もいるかもしれませんが)。
そして、さらに「body」の親要素は「html」。
その、それぞれにheight:100%を指定してあげないといけません。
参考) CSSでheight:100%を使う方法について。 | Ginpen.com

ということで、最終的にはこんな感じのCSSになってくると思います。

html {
   height:100%;
}
body {
   height:100%;
}
#wrapper{
   width:100%;
   height:100%;
   background-image: url(images/top.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position:center center ;
}

これで無事、見本で見せたジブリのサイトのようになってくれると思います。

ちなみに「background-size」に対応しているブラウザは新し目のものに限られますので、
対応していない古めのブラウザでもちゃんと表示されるように確認しておきましょう。

で、できたものを紹介したいところですが残念ながら現在制作中のサイトでしてお見せするわけにはいきません。
正式にサイトがオープンしたらこちらにリンクを入れて紹介したいと思います。

 - Webデザイン, プログラミング, 覚え書き ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

ワードプレス(WordPress)にRSSを読み込ませる方法 #wp

1年以上前の記事です。内容が古い可能性があります。ワードプレスにはRSSを読み込 …

現役ヤクザが解説する絶対見つからない死体の処理方法

1年以上前の記事です。内容が古い可能性があります。インターネットも良し悪しです。 …

no image
Ajaxもどき第一弾 CSS切替スクリプト

1年以上前の記事です。内容が古い可能性があります。以前、お話したCSSをフォーム …

OpenOffice「Calc」のセルの結合はメニューから

1年以上前の記事です。内容が古い可能性があります。タイトル通り。 表計算ソフト「 …

no image
ネットの犯罪抑止力

1年以上前の記事です。内容が古い可能性があります。ネットの普及は犯罪抑止になって …

no image
ノラ電波を勝手に使ったら何かの罪に問われるの?

1年以上前の記事です。内容が古い可能性があります。ノラ電波とはセキュリティ対策の …

no image
梅雨前の週末晴天時のディズニーランドは大混み

1年以上前の記事です。内容が古い可能性があります。僕の住んでいる北関東は本日梅雨 …

mixiのチェックボタンをつけてみた【前編】

1年以上前の記事です。内容が古い可能性があります。CNET Japanの記事に「 …

湘南新宿ライン(赤羽⇔池袋間)は埼京線と並行して走っていない。山手線と並行して走ってた

1年以上前の記事です。内容が古い可能性があります。最近ダイヤ改正して上野東京ライ …

アメブロ(Amebaブログ)をケータイで更新する方法

1年以上前の記事です。内容が古い可能性があります。今さらですが生徒さん及び娘がア …

血液型オヤジ