WEBデザイン基礎（４）レスポンシブWEBデザイン

鶴岡建二

レスポンシブWEBデザインってどんなデザイン？

レスポンシブWEBデザインとは、パソコン、スマホ、タブレットなど、画面サイズが違っていても、デバイスの大きさに合わせて、最適化して表示させるデザインのことです。
デバイスごとにHTMLを作っていたら、作業が増えます。CSSで表示を切り替えれば、複数のHTMLを作らずに済みます。

レスポンシブWEBデザインの方法

headタグ内にviewport設定をします。

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

CSSは、メディアクエリ、@media screenを使って、画面サイズで振り分けします。
以下は、０から480pxまでの画面の場合は...の意味。

@media screen and (max-width: 480px)　{
}

以下のHTMLをブラウザで見て、左右の幅を変えてみよう。

responsive.html

<!Doctype HTML>
<html> 
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RESPONSIVE</title>

<style type="text/css">
<!--

#content {
width: 600px;
background: white;
}

@media screen and (max-width: 480px) { 
#content {
width: 100%;
background: white;
}

}

.box {
height: 100px;
float: left;
}
.a {
width: 25%; 
background: red;
}
.b {
width: 25%;
background: blue; 
}
.c {
width: 25%; 
background: yellow;
}
.d {
width: 25%;
background: green;
}
.fc{
clear:both;
}
-->
</style>

</head>
<body>

<div id="content">
<p>レスポンシブWEBデザイン</p>

<div class="box a">
<p>red</p>
</div>

<div class="box b">
<p>blue</p>
</div>

<div class="box c">
<p>yellow</p>
</div>

<div class="box d">
<p>green</p>
</div>
<div class="fc">
</div>

</div>


</body>
</html>

次のコードは、Tabeleの表示を画面サイズに合わせて変えることができます。

<!Doctype HTML>
<html> 
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RESPONSIVE TABLE</title>

<style type="text/css">
<!--

table {
 border-collapse: collapse;
 width: 100%;
}
table th,
table td {
 padding: 10px;
 border: 1px solid #000000;
}
table th {
 background-color: #000000;
 text-align: center;
 width: 30%;
}

@media screen and (max-width: 480px) {
 table {
   border-top: 1px solid #000000;
 }
 table td {
   display: block;
   text-align: center;
 }
 table th {
   display: block;
   border-top: none;
   border-bottom: none;
   width: 100%;
 }
}

}
-->
</style>

</head>
<body>

<h1>画面の幅が480px以下で、表が1列になる</h1>
<table>
<tr>
<td>★★　MENU　★★</td>
<td>★★　MENU　★★</td>
<td>★★　MENU　★★</td>
<td>★★　MENU　★★</td>
</tr>
<tr>
<td>★★　MENU　★★</td>
<td>★★　MENU　★★</td>
<td>★★　MENU　★★</td>
<td>★★　MENU　★★</td>
</tr>
<tr>
<td>★★　MENU　★★</td>
<td>★★　MENU　★★</td>
<td>★★　MENU　★★</td>
<td>★★　MENU　★★</td>
</tr>
</table>


</body>
</html>

演習　レスポンシブWEBデザインでコードを書こう。

これまで制作した、divボックスを利用し、レスポンシブWEBデザインに挑戦しよう。
floatで左寄せで、横並びに並んでいる3個以上ボックスが、幅480px以下の画面だと、floatがキャンセルされるようにコードを書いてみましょう。

この記事が気に入ったらサポートをしてみませんか？