レスポンシブ Web デザインは、すべてのデバイス（デスクトップ、タブレット、携帯電話）における Web ページを見栄えのよいものにします。
レスポンシブ Web デザインは、全ての画面での見映えを良くするために、コンテンツのサイズ変更、非表示、縮小、拡大、または移動を行うための CSS と HTML 使用に関するものです：
注： Web ページは、デバイスに関係なく見映えがよく、使いやすいものにしてください！
レスポンシブデザインを作成する 1 つの方法は、自分自身で作成することです：
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
max-width: 300px;
height:
300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="city">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe, with more than 12 million
inhabitants.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area, and the most populous
metropolitan area in the world.</p>
</div>
<div class="city">
<h2>New York</h2>
<p>The City of New York is the most populous city in the United States.</p>
<p>New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.</p>
</div>
</body>
</html>
Try it Yourself »レスポンシブ Web デザインの詳細は、 RWD チュートリアルをご覧ください。
レスポンシブ・デザインを作成するためのもう１つの方法は、 W3.CSS ようなレスボンシブ・スタイルシート を使用することです。
W3.CSS を使用すれば、デスクトップ、ノートパソコン、タブレットや携帯電話のような、どのようなサイズでも見映え良いサイトを簡単に開発できます：
Resize this responsive page!
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3schools.com/lib/w3.css">
<body>
<div
class="w3-container w3-orange">
<h1>W3.CSS Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div
class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital of England.</p>
<p>It is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="w3-third">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe,
with more than 12 million
inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
Try it Yourself »
W3.CSS の詳細は、W3.CSS チュートリアルをご覧ください。