記事の紹介

この記事では”style要素内にCSSを記述”を扱います。

基本的な書式

まず、簡単なサンプルから見て行きましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<style type="text/css">
		h1 {
			font-style: bold;
		}
		p {
			color: blue;
			background-color: red;
		}
	</style>
</head>
<body>
	<h1>
		1.自己紹介
		<p>エンジニア</p>
	</h1>

	<h1>
		2.趣味
		<p>ゲーム</p>
	</h1>

</body>
</html>

完成ソース

ここでは、cssファイルではなくstyle要素の中に見た目に関する記述をしていきます。書き方は以下の通りです。

セレクタ {
   プロペティ名:;
}

セレクタ」とは「どのようにスタイルを適用するか」を決めるルールであり、「プロパティ名」と「」に対してはこちらの記事で説明した属性のようなものです。h1やpのようにタグ名を書いた場合、そのタグにスタイルが適用されます。実際に適用するプロパティとその値は「プロパティ名:値;」という型で記述します。プロパティ名と値の間は「:」(コロン)区切ります。

簡単な例でもっとわかりやすく説明します。上記のソースのstyle要素の中に以下のような部分を注目してください。

h1 {
	font-style: bold;
}

ここの場合「h1」は「セレクタ」、「font-style」は「プロパティ名」、「bold」は「」となります。訳すると「ページ内のh1タグfont-styleを全部boldに設定する」という意味です。

プロパティ」の場合は以下のように「複数を指定することも可能」です。

セレクタ {
   プロペティ名1:;
   プロペティ名2:;
}

上記のように、値の後ろに「;」(セミコロン)を書いて区切ります。

一番上のソースでは以下のような形で使ってました。

p {
	color: blue;
	background-color: red;
}

こうすると、style要素の中を修正するだけで文書全体の見た目を一括に更新することができます。例えば、ボタンの背景色を全部白にしたい場合。

.button {
  background-color: white; 
}

のように指定するだけでボタン全体の変更できます。

よく使われるセレクタの型

全称セレクタ「*」

文書中のすべての要素に適用する場合に使用されます。

* {
      background-color:#87CEEB
}

IDセレクタ「#id」

文書中の特定の要素にidを使用してスタイルを適用する場合使います。

#hobby {
     color:yellow;
}

クラスセレクタ「.クラス名」

文書中の特定の要素にclassを使用してスタイルを適用する場合使います。id属性とは異なり、class属性は同じ値を重複して指定することができます。

.name{
   color:blue;
}

実戦

これらのセレクタを色々使って以下のように使用することができます。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
* {
		background-color:#87CEEB
	}
	.name {
		/*class="name"というクラス属性が指定されている要素の文字の色を青にします。*/
		color: blue;
	}
	#hobby {
		/*id="hobby"というクラス属性が指定されている要素の文字の色を黄色にします。*/
		color:yellow;
	}
	.game_name {
		/*class="game_name"というクラス属性が指定されている要素の文字のサイズを30pxにします。*/
		font-size: 30px
	}
	.social_game {
		/*class="social_game"というクラス属性が指定されている要素の文字の色を緑にします。*/
		color:green
	}
	h2 {
		/*h2の文字を太く表示します。*/
		font-style: bold;
	}
</style>
</head>
<body>
	<h1>私の名前は<span class = "name">柴犬</span>です。</h1>
	<p><h1>趣味は<span id="hobby">ゲーム</span>です。</h1></p>
	<p>好きな<span class="game_name">ゲーム</span>目録</p>
	<ul>
		<li>モンスターハンター</li>
		<li class="social_game">グラブル</li>
		<li class="social_game">プリコネ</li>
	</ul>
	<h2>皆さんよろしくお願いします。</h2>
</body>
</html>

完成ソース

Web開発 -初めてのCSS

プログラミングメイン