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

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

  • CSS
  • 2013-08-05 - 更新:2013-08-08

簡単なレスポンシブ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を使って指定していきます。
続きを読む…»

, ,
1,853 views