Categories
SugiBlog ホームページ制作・システム開発

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

簡単なレスポンシブ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以下には対応していないので注意が必要です。

729 views

コメントを残す

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

*