スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > 3つのステップでレスポンシブデザインを作成する方法

3つのステップでレスポンシブデザインを作成する方法

投稿日:2013年12月5日   ソフトウェア:-

このチュートリアルでは3つのステップでレスポンシブデザインを作成する方法について紹介します。


Step1:はじめに

レスポンシブWebデザインが現在重要なものであることは疑いもありません。
まだレスポンシブデザインについてご存じなければ、私が最近掲載したいくつかのレスポンシブサイトをご参照ください。
初めての人はややこしく感じるかもしれませんが、実際は思ったより簡単なことです。
レスポンシブデザインがすぐに始められるように簡単なチュートリアルを作成しました。
レスポンシブデザインとメディアクエリの基本を3つのステップで学ぶことができます。
(基本的なCSSの知識がある場合)



Step2:メタタグ

ほとんどのモバイルブラウザはHTMLページを画面に合うようにサイズを変えて表示します。
ビューポート・メタタグを使えばこれをリセットすることができます。
下記のビューポートタグは機器の横幅を使用するようにブラウザに命令し、元々のサイズ変更は無視されます。
このメタタグを<head>部分に書きます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

インターネットエクスプローラー8以前のものはメディアクエリをサポートしていませんが、media-queries.jsrespond.jsを使えば、IEでもメディアクエリを使用することが可能です。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->





Step3:HTML構造

この例ではヘッダ、コンテナ、サイドバー、フッタだけの基本的なレイアウトを使っています。
ヘッダは高さ固定の180px、コンテナの幅は600px、サイドバーの幅は300pxです。

HTML構造



Step4:メディアクエリ

CSS3 media queryがレスポンシブデザインの決め手となります。
これはブラウザが画面に合わせて横幅を変えるためのIF条件文を書いているようなものです。

画面の横幅が980px以下の場合、次のルールが適用になります。

メディアクエリ

次に、画面の横幅が700px以下の場合、コンテナとサイドバーの横幅をオートにして、フロートを無効にし、横幅いっぱいに表示されるようにします。

メディアクエリ

画面の横幅が480px以下(モバイル画面)の場合、ヘッダの高さをオートに、h1のフォントサイズを24pxにして、サイドバーを隠します。

メディアクエリ

メディアクエリは好きなだけ書くことが出来ますが、ここでは3つのメディアクエリのみ紹介しました。
メディアクエリの目的は様々な画面サイズに合わせて異なるCSSルールを適用し、異なるレイアウトで表示させることです。
メディアクエリは同じスタイルシートに記載しても、別のファイルにしても、どちらでも構いません。



Step5:最後に

このチュートリアルはレスポンシブデザインの基本をご紹介するためのものです。



引用:Web Design Library   著者:webdesignerwall  翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング