HTML/CSS入門編2: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会員登録が必要です

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

演習課題「見出しに枠線を付ける」

右側のコードエリアの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ピクセルにしてください。

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

期待する出力値

Tips

動画へ戻る

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

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

会員登録する

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

ここでは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. 「要素の選択」ボタンをクリック

参考になるWebサイト

CSS： marginの正しい理解 (CSSのmarginが難しい)｜Web Design KOJIKA17
http://kojika17.com/2012/08/margin-of-css.html

テーブルレイアウトから抜け出せないエンジニアがとりあえず最低限押さえるべき仕様 - タオルケット体操
http://hachibeechan.hateblo.jp/entry/2014/10/16/%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%8B%E3%82%89%E6%8A%9C%E3%81%91%E5%87%BA%E3%81%9B%E3%81%AA%E3%81%84%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2

CSSのわからないを解決する基礎知識ボックスモデル編 - タオルケット体操
http://hachibeechan.hateblo.jp/entry/css-howto-box-model

プログラミング学習 > HTML/CSS入門編 > HTML/CSS入門編2: CSSの基礎を学ぼう > CSSのレイアウト指定を理解しよう

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

コードの実行

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

出力タイプ：

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

演習課題「見出しに枠線を付ける」

期待する出力値

演習課題「bodyの内側に余白を付ける」

期待する出力値

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

期待する出力値

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

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

開発ツールの呼び出し方

参考になるWebサイト