HTML/CSS入門編2:CSSのレイアウト指定を理解しよう

#04:CSSのレイアウト指定を理解しよう

<!-- CSSのレイアウト指定 -->
<!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: 30px;
		}
	</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>

<!-- CSSのレイアウト指定 -->
<!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: 30px;
		}
	</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>hello world</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    
    <style>
        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</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: 30px;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</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></style>
</head>

<body>
    <h1>hello paiza</h1>
</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></style>
</head>

<body>
    <h1>hello paiza</h1>
</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: 30px;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</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: 30px;
        }
    </style>
</head>

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

</html>

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

無料会員登録して始める

★ 実技1
★ 実技2
★ 実技3

実技課題「見出しに枠線を付ける」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグの枠線(border)を付けてください。プロパティの設定値は、「solid #00A0A0」とします。

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

期待する出力値

実技課題「bodyの内側に余白を付ける」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、bodyタグの内側の余白(padding)を100ピクセルにしてください。

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

期待する出力値

実技課題「見出しの外側に余白を追加する」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグのの外側の余白(margin)を80ピクセルにしてください。

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

期待する出力値

ここではCSSを使ったパーツのレイアウトに挑戦します。そのために、CSSを使った余白や間隔の指定方法について学習しましょう。

余白を設定するプロパティ

・要素の枠線を表示

border: dotted;

・要素の内側の余白
padding: 30px;

・要素の外側の余白
margin: 30px;

・Google Chrome
1. 右上の設定ボタンをクリック
2. 「その他ツール」 > デベロッパーツールを選択
3. 「インスペクタ」ボタンをクリック

・Firefox
1. 右上のメニューボタンをクリック
2. 「開発ツール」 > 「インスペクタ」を選択

・Safari
1. 編集 > 設定
2. 環境設定が表示されたら、「詳細」タブの「メニューバーに「開発」メニューを表示」をオン
2. 「開発」メニューで、Webインスペクタを選択

・Microsoft Eage
1. 「F12」キーを押す
2. 「要素の選択」ボタンをクリック