HTML/CSS入門編2:レスポンシブデザインにしよう

#05:レスポンシブデザインにしよう

<!-- レスポンシブデザイン -->
<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Project Nyaan</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<style>
		body {
			padding-top: 50px;
			background-color: lightgray;
		}
	</style>
</head>

<body>
	<h1>吾輩は猫である。</h1>
	<p class="lead">名前はまだない。</p>
	<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
	<a class="btn btn-primary" href="#">OK</a>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

<!-- レスポンシブデザイン -->
<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Project Nyaan</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<style>
		body {
			padding-top: 50px;
			background-color: lightgray;
		}
	</style>
</head>

<body>
	<h1>吾輩は猫である。</h1>
	<p class="lead">名前はまだない。</p>
	<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
	<a class="btn btn-primary" href="#">OK</a>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

<!-- レスポンシブデザイン -->
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Project Nyaan</title>
    
	<!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding-top: 50px;
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div>
        <h1>吾輩は猫である。</h1>
        <p class="lead">名前はまだない。</p>
        <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
        <a class="btn btn-primary" href="#">OK</a>
    </div>
</body>

</html>

<!-- レスポンシブデザイン -->
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Project Nyaan</title>
    
	<!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding-top: 50px;
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div>
        <h1>吾輩は猫である。</h1>
        <p class="lead">名前はまだない。</p>
        <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
        <a class="btn btn-primary" href="#">OK</a>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>hello world</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding-top: 50px;
            background-color: lightgray;
        }

        .starter-template {
            padding: 40px 15px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div>
        <h1>hello paiza</h1>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>hello world</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding-top: 50px;
            background-color: lightgray;
        }

        .starter-template {
            padding: 40px 15px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div>
        <h1>hello paiza</h1>
    </div>
</body>

</html>

この動画を見るにはpaizaの会員登録が必要です

無料会員登録して始める

★ 実技1
★ 実技2

実技課題「divタグのクラスにcontainerを追加する」

右側のコードエリアのhtmlのdivタグに「container」というクラスを追加してください。

採点をして、エラーが出なければ、演習課題クリアです！

期待する出力値

実技課題「見出しにCSSクラスを適用する」

右側のコードエリアのhtmlは、divタグの中に「hello paiza」という見出しを表示します。
このdivタグに「starter-template」というクラスを追加して、見出しの周囲のエリアに「starter-template」のスタイルを適用してください。

採点をして、エラーが出なければ、演習課題クリアです！

期待する出力値

ここでは、Bootstrapのコンテナという機能を使って、Webページのデザインを整えていきます。そして、PCでもスマートフォンでも、レイアウトが崩れにくいレスポンシブデザインを実現します。

レスポンシブデザインとは

レスポンシブデザインとは、スマホやタブレット・PCなどサイズが異なるディスプレイでも、単一のHTMLファイルで、最適なデザインで表示する技術です。縦持ちで細長いディスプレイのスマホと、大きな画面のPCでは、最適なレイアウトが違っています。レスポンシブデザインでは、これを単一のHTMLで自動的に表示し分けます。

Bootstrapのコンテナの基本形

<body>
	<div class="container">
		<div class="starter-template">
			<h1>吾輩は猫である。</h1>
			<p class="lead">名前はまだない。</p>
			<a class="btn btn-primary" href="#">OK</a>
		</div>
	</div>
	<!-- /.container -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

レスポンシブデザインとは｜レスポンシブWebデザイン｜RWD｜responsive design
- 意味/定義/解説/説明： IT用語辞典
http://e-words.jp/w/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3.html

【WEBデザイン10選】これぞ進化系！今どきのレスポンシブWEBデザインサイトまと
め | インバウンドサイトを作るときに知っておきたいこと | エムハンド
http://www.m-hand.info/blog/3292/

ASCII.jp：レスポンシブWebデザインとは
｜ゼロから始めるレスポンシブWebデザイン入門
http://ascii.jp/elem/000/000/697/697463/

Bare - Bootstrap Starter Template - Start Bootstrap
http://startbootstrap.com/template-overviews/bare/