モニター全体に広がるメインビジュアルのサイト11つ
2012/01/21
タグ: CSS, javascript, JQuery, WEBデザイン, デザイントレンド
前回の記事の「CSSNite デザイントレンド再演に参加したのでレポートします」でモニターの端から端まで広がったメインビジュアルを取り上げたのですが、実際どんな手法でやっているのか気になったので調べてみました。いろんな手法があって楽しかったです。
大きなメインビジュアルを配置する方法
大きく分けて3つの方法があるようです。
- CSSの背景画像で配置
- HTMLイメージで配置
- CSSとHTMLイメージで配置
さらに、アニメーションしたい場合にはjavascriptを使用しているサイトが目立ちました。
CSSの背景画像で配置しているサイト
jennyandgrayden
http://www.jennyandgrayden.com/
僕は英語が苦手なので内容はあまりわからないのですが、最後までスクロールするとほのぼのします。面白いサイトだな～。
devpepper
おそらく海外のWEB制作会社のサイトです。
cofinery
esaramago
runwithchrissie
http://www.runwithchrissie.com/
こちらはメインビジュアル部分全体がCSSのbackground-imageで配置してjavascriptでイメージを切り替えています。ちなみに以下のようにしていますね。
HTMLイメージで配置しているサイト
bluecadet
こちらはHTMLイメージで画像を配置して、さらにjavascriptで切り替えています。ちなみに、<img>を横並びにしているので、幅が1650pxもの大きい画像を配置しています。なので一般的なモニターなら一枚しか見れませんね。
virtualoffice
circlemeetups
このサイトは画面を拡大しても画像の位置も大きさも変わりません。これはHTMLイメージに対してwidth:100%;とするだけでできます。
momentskis
momentskisという海外のスキー板を作っている会社？のWEBサイトです。このサイトはでっかいモニターで見るのをお勧めします。実は、モニター外に画像が横並びになっています。
CSSとHTMLイメージで配置しているサイト
art4web
http://www.art4web.sk/en/hello
海外のWEB制作会社のサイトです。おしゃれですね～。ちなみに、メインビジュアル部分ですが、POPでカラフルな画像はCSSで背景画像として配置しています。真ん中の椅子に座っている女性のイメージはHTMLイメージで配置していてjavascriptでアニメーションさせています。
unmatchedstyle
http://unmatchedstyle.com/cssoff/
こちらは「プロレスラー」のイメージと左にあるイメージは<img>です。背景の「くも」？の部分はCSSのbackground-imageですが、面白い手法で配置しています。
ブロック要素をいくつもネストしてその背景にそれぞれ違う画像を配置しています。僕は「プロレスラー」のイラストが面白くて好きです。ちなみに、「CSSOFF」と書かれている部分はテキストです。
まとめ
もっとたくさん調べさせていただいたのですが、特に気になったサイトをご紹介しました。CSSやHTMLイメージで配置したりいろんな手法があることがわかりました。さらに、アニメーションはjavascriptというかjqueryで行うのが主流のようです。ファイルサイズやスマフォのことを考えてのことなんでしょうか。
やはりメインビジュアルを画面いっぱいに配置するとインパクトがありますね。さらに流行りだからなのかセンターレイアウトが多かったです。今後もいろんなサイトを見て研究したいと思います。
関連記事
- CSSNite デザイントレンド再演に参加したのでレポートします
- 【連載：第二回】WEBデザイナーがjQueryを書けるようになるまで
- 【連載：第三回】WEBデザイナーがjQueryを書けるようになるまで（Chromeデベロッパーツール）
- 【連載：第四回】WEBデザイナーがjQueryを書けるようになるまで(jQueryの書き方編）
- 何のWEBフォントが使われているか調べる方法
最後まで読んでくれた方へ
最後まで読んでいただきありがとうございます。
Facebook等でシェアしていただけたら嬉しいです。今後もよろしくお願いします。
Keywords Search
知りたいキーワードを入力して下さい。
タイトル、本文、タグ、カテゴリ名から検索されます。