HTML/CSS入門編2:CSSの基本形を理解しよう

#01: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">

</head>

<body>
	<h1>吾輩は猫である。</h1>
	<p class="lead">名前はまだない。</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">

</head>

<body>
	<h1>吾輩は猫である。</h1>
	<p class="lead">名前はまだない。</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">

    <title>hello world</title>
    <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>Project Nyaan</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <title>hello world</title>
    <style></style>
</head>

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

</html>

★ 実技1

実技課題「余白を追加する」

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

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

期待する出力値

このレッスンでは、HTMLの見た目を定義するCSSについて、学習します。また、HTMLフレームワークのBootstrapを使って、スマホやタブレットでもカッコよくWebページを表示できる、レスポンシブデザインとグリッドについても解説します。

CSSの書式

CSSでは、各スタイルを次のように記述します。
まず、スタイルの適用対象があります(例 body)。それから波カッコの中に、プロパティと設定値をコロンで区切って記述します。各プロパティの行の末尾にセミコロンを書きます。

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

CSSの設置場所

- CSSファイルに記述し、linkタグで読み込む。

<link rel="stylesheet" href="your_style.css">

- HTMLのheadタグ上に、styleタグで記述する。

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

CSSの切り替え例

BootstrapのCSSは、下記のURLが利用できます。

・Flat-UI-CSS
https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/flat-ui.min.css

参考になるWebサイト

やさしいホームページ入門 - CSS入門
http://www.ink.or.jp/~bigblock/css/

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

Flat UI - Free Bootstrap Framework and Theme
http://designmodo.github.io/Flat-UI/

有料プランで現役エンジニアに相談可能！

プログラミング学習 > HTML/CSS入門編 > HTML/CSS入門編2: CSSの基礎を学ぼう > CSSの基本形を理解しよう

実行する

採点する

入力
出力
コンパイルエラー
実行時エラー

出力タイプ：

コード判定結果

実技課題 「余白を追加する」

期待する出力値

CSSの書式

CSSの設置場所

CSSの切り替え例

参考になるWebサイト

実技課題「余白を追加する」