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

<!-- レスポンシブデザイン -->
<!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」のスタイルを適用してください。

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

期待する出力値

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

※paizaに会員登録すると無料で動画学習コンテンツをご利用いただけます

会員登録する

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

ここでは、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/

プログラミング学習 > HTML/CSS入門編 > HTML/CSS入門編2: CSSの基礎を学ぼう > レスポンシブデザインにしよう

ログインすると採点できます

コードの実行

有料会員になるとエンジニアに質問ができます

出力タイプ：

HTML/CSS入門編2: CSSの基礎を学ぼう

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

期待する出力値

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

期待する出力値

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

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

Bootstrapのコンテナの基本形

参考となるWebサイト