resultsReadingCSS3のメディアクエリを利用したWebサイトデザイン30個まとめ+使い方ShareTweetHomeウェブ制作ウェブデザインウェブデザインウェブデザインまとめCSS3のメディアクエリを利用したWebサイトデザイン30個まとめ+使い方2011年6月7日129129shares129iPhoneやAndroidなどのスマートフォン端末が普及するのと同時に、パソコン画面以外のさまざまなウィンドウ幅にも対応したWebサイト制作が行われるようになっています。読者ユーザーの見ている画面サイズを自動的に調べ、ウィンドウ幅に応じて最適なスタイルシートを適用するメディアクエリというテクニックが利用されているケースが多いようです。Design」が公開されていたので、今回はご紹介します。最後には、実際にメディアクエリ利用したWebサイトを作成するときに活用したい、WordPress用テンプレート素材や使い方などを別途まとめています。Web制作の参考にしてみてはいかがでしょう。Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。「メディアクエリってなに?」という方は、以下のエントリーを参考にしていただくとさらに詳しく解説されています。Coliss.comメディアクエリを利用したWebサイトデザインまとめGlitchヘッダー部分にクリエイティブなイラストをデザインしたWebサイトで、ウィンドウ幅を変更することで2カラムから1カラムに変更されます。Challengeパソコンで表示するときは大きなピクトグラムアイコンを利用していますが、スマートフォンサイズ幅ではリスト表示に切り替え最適化しています。WaltonWebフォントを利用してレイアウトされたヘッダーデザインが、ウィンドウ幅に応じリサイズさせたユニークなレイアウトデザイン。SenoWebデザイナーさんのポートフォリオサイトのひとつ。制作実績などを並べたギャラリーデザインもウィンドウ幅に応じてサイズ変更されています。Caver極太タイポグラフィーが印象的なWebデザインで、ウィンドウ幅に応じてサイズ変更されています。メニュー部分の展開方法も参考になりそうなのでメモとして。Festival5月に行われた音楽フェス用のホームページで、イラストとタイポグラフィーを効果的に利用しています。サムネイル画像やメニューなどもサイズに応じて変化させることで、読みやすさもアップ。Collyグリッドレイアウトですっきりと並べられたコンテンツが、ウィンドウ幅に応じてサイズも変更しながら整列します。Hicksdesignパソコンで見ると3カラムですが、スマートフォンデバイスでは1カラムにレイアウト変更し、サイドバーはコンテンツ下に移動します。Alistapartビンテージ風のイラストデザインがユニークなレトロ系Webサイトデザイン、横に並べられたサムネイルがウィンドウ幅に応じて変化しています。Tigersパソコンではフルサイズで表示されているイメージ写真も、スマートフォンでは非表示するように設定したりすることも可能ですね。Bakeryグリッドレイアウトを利用して整列されたかわいいアイコンも画面サイズに応じてサイズ変更、メニューバーのレイアウトも切り替わります。GalleryかっこいいTシャツを集めて公開しているユニークなコンセプトのWebサイト。ショッピングサイトに応用することもできそうですね。Staffanstorpパソコン画面ではサムネイルに対してテキストの回り込みを設定していましたが、ウィンドウ幅を縮小すると回り込みも解除されています。Teixidoスマートフォンメディアにおいての画像の読み込み速度を考慮して、小さいサイズでは画像非表示で設定したWebサイトデザイン。Pulpこちらもグリッドレイアウトを利用して、ギャラリー風にサムネイルを並べたWebサイトのひとつ。ウィンドウ幅に応じてカラム数を変化させて対応しています。Oltasticかわいいフクロウのイラストをマスコットデザインとして利用したWebサイトデザインで、同時に視差効果も利用したヘッダーが魅力的。Designどんな画面サイズで見てもユーザーに応じて適切なスタイリングが適用されるので、企業用サイトなどで利用してもよいかもしれません。2010年6月7日現在、165個のWebサイトデザインがまとめられており、ウィンドウ幅に応じたレイアウトデザインをまとめてみることもできます。実際にメディアクエリを利用したWebサイトを作成するときに参考にしたい記事をピックアップしています。Coliss.com「メディアクエリとは何なのか。」から分かりやすく解説されており、実際にレイアウトに実装する方法も紹介されています。ちびと.netメディアクエリを利用し、いろいろなデバイスで最適に表示されるように調整されているWordPress用無料テンプレートが多数まとめられています。ちびと.netHTMLで作成されたメディアクエリ用の無料テンプレート、使いやすそうなシンプルデザインが魅力的です。iPadなどのモバイル用にスタイルシートを分けるためのフレームワークを紹介します。Magazineウィンドウ幅に応じてイメージサイズを変更する方法や部分的にコンテンツを非表示にする方法などなど。Magazineメディアクエリを利用してスマートフォンモバイル対応のWebサイトデザインを作成するTip。今後がますますたのしみなWebサイトデザインテクニックかもしれませんね。最高のロゴをつくろう!無料ロゴテンプレート72個まとめPhotoshopVIPの歴代人気記事、あつめました。resultsブログでは紹介しきれない、ここだけのニュースやお得なクーポンなども配信中。ボットではない場合はこの欄を空のままにしてください:129。