HTMLを装飾する方法、CSSの追加について

この記事では、HTMLを装飾するCSSの追加する方法について記載する。

1. 目的

　・HTMLの装飾(文字の色の変更や、バックグランドの変更など)するための、CSSを使用する方法について記載する。

HTMLを装飾する方法、CSSの追加について

2. CSS（Cascading Style Sheets）とは

　・Webサイトの背景の色の変更や画像の設置、文字のフォントや色などを設定するために使用する。

　・CSSは「シーエスエス」や「スタイルシート」などと呼ばれる。

3.CSSの使い方

　・CSSの記載箇所：CSSは、headタグの中の、styleタグの中に記載する。

<head>
 <style>
 /* CSSを記載 */
 </style>
</head>

　・CSSの使用方法

セレクタ{プロパティ:値;}

例：

p{
  color: red;
}

・セレクタ：h1,h2,h3,p,bodyなどのタグや、idやclassで指定した属性を指定する。

　例の場合、pタグすべてを赤色に変更している。

・プロパティ：CSSで設定する役割の指定。　colorによって、色の変更を行っている。

　→プロパティの種類などについて：CSS3リファレンスなどを参照。

・値：プロパティの設定値。　数値や、色の指定などが入る。

3.プログラムの作成(属性付与で文字列を真ん中にし、文字の色を赤にする。)

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hellow world</title>
	<style>
		/* CSS記載 */
		p {
			color: red;
		}
	</style>
</head>

<body>
	<p>通常pタグ1</p>
	<p align="center">pタグに属性付与</p>
</body>

</html>

実行結果