新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

no image
マーケティングに使えそうなツール

1年以上前の記事です。内容が古い可能性があります。Webマーケティングに使えそう …

iPhoneに現れる謎のメール受信画面の原因を追え

1年以上前の記事です。内容が古い可能性があります。いつからかiPhone(アイフ …

Androidスマホで「・(中黒・中点)」を入力する方法

1年以上前の記事です。内容が古い可能性があります。「ダイ・ハード」や「プロット・ …

no image
各検索サイトの特徴

1年以上前の記事です。内容が古い可能性があります。3大検索サイトのSEOに関する …

no image
検索ワード順位アゲアゲ大作戦 #2 ページランクアゲアゲ大作戦

1年以上前の記事です。内容が古い可能性があります。まずはgoogle=ページラン …

ライトボックス(Lightbox)のJavaScript読み込みはヘッダー<head>じゃなくてボディー<body>【Webデザイン】

1年以上前の記事です。内容が古い可能性があります。最近、LP(ランディングページ …

no image
これから

1年以上前の記事です。内容が古い可能性があります。これからのネット社会はどうなっ …

Chromeで「Adobe Reader」を使ってPDFを開かせる方法

1年以上前の記事です。内容が古い可能性があります。激速ブラウザ「Google C …

LINE(ライン)のタイムラインは友達ごとに公開設定可能

1年以上前の記事です。内容が古い可能性があります。LINEにツイッター(Twit …

iPhoneでOSのバージョンを確認する方法

1年以上前の記事です。内容が古い可能性があります。カメラでズームのできる無料アプ …

血液型オヤジ