HTML/CSS入門編2:Bootstrapのグリッドシステムを理解しよう

<!-- Bootstrapのグリッドシステム -->
<!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;
		}

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

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

			<h2>どこで生れたか</h2>
			<p>とんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>

			<h2>この書生というのは</h2>
			<p>時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。書生の顔を見たのがいわゆる人間というものの見始であろう。</p>

			<h2>掌の上で少し落ちついて</h2>
			<p>書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。</p>

		</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>

</html>

<!-- Bootstrapのグリッドシステム -->
<!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;
		}

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

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

			<h2>どこで生れたか</h2>
			<p>とんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>

			<h2>この書生というのは</h2>
			<p>時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。書生の顔を見たのがいわゆる人間というものの見始であろう。</p>

			<h2>掌の上で少し落ちついて</h2>
			<p>書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。</p>

		</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>

</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;
        }

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

<body>
    <div class="container">
        <div class="starter-template">
            <div class="row">
                <div class="col-sm-4">
                    <h2>hello world</h2>
                </div>
                <div class="col-sm-4">
                    <h2>hello paiza</h2>
                </div>
                <div class="col-sm-4">
                    <h2>hello HTML</h2>
                </div>
            </div>
        </div>
    </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;
        }

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

<body>
    <div class="container">
        <div class="starter-template">
            <div class="row">
                <div class="col-sm-4">
                    <h2>hello world</h2>
                </div>
                <div class="col-sm-4">
                    <h2>hello paiza</h2>
                </div>
                <div class="col-sm-4">
                    <h2>hello HTML</h2>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

この動画を見るには

paiza会員登録が必要です

演習1

問題ログインすると模範解答や入力を見ることができます

演習課題「グリッドの割合を変更する」

右側のコードエリアのhtmlは、「hello world」「hello paiza」「hello HTML」という3つの見出しを表示します。3つの見出しは、Bootstrapのグリッドシステムで、3等分して表示されます。

このレイアウトを、「2:4:6」の割合になるように変更してください。
なお、Bootstrapのグリッドシステムは表示幅が狭い場合自動的に縦に整列されます。
コードエリアの幅を変えて、動作を確認してください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

期待する出力値

Tips

動画へ戻る

次のレッスンへ前のチャプターへ

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

会員登録する

＃06:Bootstrapのグリッドシステムを理解しよう

Webページで柔軟なレイアウトを可能にする、Bootstrapのグリッドシステムを取り上げます。グリッドは、最近のWebページで主流になっている定番のデザインで、Bootstrapで簡単に実現できます。

Bootstrapのグリッドの基本形

	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<h1>1行目</h1>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-4">
				<h2>2行目のA</h2>
			</div>
			<div class="col-sm-4">
				<h2>2行目のB</h2>
			</div>
			<div class="col-sm-4">
				<h2>2行目のC</h2>
			</div>
		</div>
	</div>
	<!-- /.container -->

参考になるWebサイト

Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
http://websae.net/twitter-bootstrap-grid-system-21060224/

プログラミング学習 > HTML/CSS入門編 > HTML/CSS入門編2: CSSの基礎を学ぼう > Bootstrapのグリッドシステムを理解しよう

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

コードの実行

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

出力タイプ：