カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

レスポンシブwebデザインのCSS

  • CSS
  • 2013-08-05 - 更新:2013-08-08
この記事は最終更新日から1年以上経過しています。

簡単なレスポンシブwebデザインを実装してみましょう。
以下のようなHTMLがあったとします。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div class="content">
    sample
</div>

</body>
</html>

まず、どんな画面サイズでも共通となるスタイルを記述します。

@charset "utf-8";

*
{
    margin: 0;
    pading: 0;
}

各画面サイズに適用するスタイルをMediaQueryを使って指定していきます。

画面サイズが480px以上の場合のスタイル

@media screen and (min-width:480px){
    div.content
    {
        width: 300px;
        background: #cbcbcb;
    }
}

画面サイズが768px以上の場合のスタイル

@media screen and (min-width:768px){
    div.content
    {
        width: 550px;
        background: #cbcbcb;
    }
}

画面サイズが1024px以上の場合のスタイル

@media screen and (min-width:1024px){
    div.content
    {
        width: 800px;
        background: #cbcbcb;
    }
}

ここでは、幅をピクセルで指定していますが、相対指定で指定することによって更に柔軟に対応できると思います。

※MediaQueryはIE8以下には対応していないので注意が必要です。

この記事がお役に立ちましたらシェアお願いします
, ,
1,677 views
≪ ≫

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です