今後の説明の表記方法

サンプルコード

師匠

これからのCSSの説明では、サンプルコードを下みたいに書くで。

<!-- HTML : この行はコメント -->

<p>段落1</p>

<p>段落2</p>

<p>段落3</p>

<p>段落4</p>

<p>段落5</p>
/*  CSS : この行はコメント  */

p {
	color:		red;
	background:	yellow;
}

段落1

段落2

段落3

段落4

段落5

師匠

左がHTMLコードで、真ん中がCSSコード
右が、HTMLコード と CSSコード を合わせたときの実行結果や。

師匠

つまり、どういうことか説明してみい。

弟子

あっ、はい。
えっとー。。。

最初はHTMLのテンプレートからですか?

師匠

そうや。

弟子

HTMLのテンプレートは、下です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>
</head>
<body>




</body>
</html>
弟子

で?

師匠

CSSの書き方は3種類あったけど、方法2の「CSSを style要素に書く」方法でやってみ。

弟子

HTMLコード<body>要素の中、CSSコード<style>要素の中に書くんでしたっけ?

師匠

そうや。
今の場合、どうすれば良い?

弟子

こうですか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}

p {
	color:		red;
	background:	yellow;
}

</style>
</head>
<body>

<p>段落1</p>

<p>段落2</p>

<p>段落3</p>

<p>段落4</p>

<p>段落5</p>

</body>
</html>
師匠

そうやな。 ( 実行結果

師匠

もし その気があるなら、方法3の「CSSの外部ファイル化」でやってもいいで。

弟子

いえいえ。。。

師匠

ここから、p要素(段落)の周りに出ている補助境界線を無くすには?

弟子

えっとー。。。
ハイライトした箇所を消すんですか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}

p {
	color:		red;
	background:	yellow;
}

</style>
</head>
<body>

<p>段落1</p>

<p>段落2</p>

<p>段落3</p>

<p>段落4</p>

<p>段落5</p>

</body>
</html>
師匠

そうや。
そうすると、下みたいに、境界線が消えるな。

段落1

段落2

段落3

段落4

段落5

師匠

実行結果では、補助境界線は基本的に出すつもりやけど、境界線が無い方が分かりやすかったら、線を無しにするかもしれへん。
その場合は、断るかもしれへんし、断らないかもしれへん。気分次第や。
まー、境界線が無くなったら、「上のコードを消してるんやなー」と思えばええ。

弟子

ところで、サンプルコードの1行目は、何ですか?

師匠

なに?

弟子

これ。

師匠

コメント。

弟子

師匠

もしかして、 コメントの書き方 、まだ説明してなかった?

弟子

まだです。

師匠

あそう?
ほな、次のページや。