CSSの基本1(プロパティとプロパティ値、3つの記述方法)

HTMLとCSS
スポンサーリンク

HTML初心者がCSSを記述する上で知っておくべき基本事項をまとめました。

スポンサーリンク

はじめに

ホームページを構成する要素としてHTMLCSSがあります。
ホームページを人に例えると、

HTML = 骨格
CSS = 服装、見た目

となります。
骨格は基本的にあまり変化しないですよね。
ですから、HTMLで骨格(構造)を定義して、CSSで服装(見た目)を変えるというイメージでとらえてください。
例えるなら、同じ骨格でも服装によって全く違うものに見えることもあるわけです。

CSSの記述方法(書式)

基本構造

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

これだけではピンとこないので、実際の記述例を示します。

例としてh1タグの文字色にする場合です。

h1{
	color: blue;
}

上記では、セレクターh1プロパティcolorプロパティ値blueとなっています。
まとめるとこうなります。

名称意味実際の例
セレクターHTMLタグ名称h1, p, a, div, ol…
プロパティ変更したい対象要素color, font-size, margin…
プロパティ値変更する値red, 12px, 80%, left….

プロパティプロパティ値が、CSSを学ぶ上で憶える項目ということになります。

CSSのプロパティやプロパティ値は、MDNのサイトにCSSリファレンスとしてまとめられています。新しいプロパティに出くわしたら調べるくせをつけると上達できます。

CSSの記述方法

以下の3つの記述方法があります。

  1. HTMLタグに直接記述
  2. headタグ内に記述
  3. 外部ファイルに記述

通常のサイトでは、3の外部ファイルでの記述が基本となっています。
以下それぞれについて説明します。

HTMLタグに直接記述

HTMLタグの開始タグ

style="プロパティ: プロパティ値" 

と記述します。

実際の例:h1タグの文字色にする場合

<h1 style="color:red;">タイトル</h1>

headタグ内に記述

headタグの中に <style>~</style> を記述し、CSS書式を記述する方法。

例)h1 タグのフォントサイズ48ピクセルにする

<head>
	<style>
		h1{
			font-size: 48px;
		}
	</style>
</head>

外部ファイルに記述

拡張子が ~.css のファイルを作成し、CSS書式を記述する方法です。
HTML、CSS2つのファイルを作成することになりますので、HTMLファイル側に事前準備が必要です。

HTML側の記述

具体的には、HTMLのheadタグ内に以下のように<link rel=”stylesheet” href=”~”> を使ってCSSファイル名を指定します。

例)style.cssファイルにCSS書式を記述する場合

<head>
	<link rel="stylesheet" href="style.css">
</head>

CSSファイルの作成

拡張子が~.cssとなるファイルを作成します。ファイル名は、先ほどHTML側で記述したCSSファイル名と同じでなければなりません。
拡張子がcssのファイルには、CSS書式を直接書き込むことが可能です。

また、先頭行にファイルの文字コードの指定として、

@charset "文字コード名";

の記述が必要です。通常文字コードには、utf-8を指定しておけば問題ないでしょう。
ファイルを保存する際も文字コードをUTF-8に合わせておきます。

記述例

style.cssファイルでCSS書式を記述
  h1 タグの背景色緑色にする

style.css

@charset "utf-8";

h1{
	background-color: green;
}

CSSにコメント文を挿入するには

headタグ内にstyleタグを使って記述する場合と外部CSSファイルを用いた場合に限り、コメント文を挿入することが出来ます。
コメント文の挿入は、開始を /* 、終了を */としてコメント文字列をくくります。

CSSでのコメント文例

h1{
	background-color: green;	/* 背景色を緑にする */
}

CSSの記述場所による優先順位

CSS3つの記述箇所を説明しましたが、同じタグ同じプロパティを3つの記述箇所でそれぞれ記述した場合は、注意が必要です。

CSSの優先順位

1タグに直接記述 > 2headタグ内に記述 > 3外部ファイルに記述

の順となり、タグに直接記述が一番優先順位が高くなります。

CSS記述の実践例

実際にどんな感じで記述するか3つの例で示しておきます。
ご自分で作って確認してください。

実践:HTMLタグに直接記述

表示イメージ

ファイル名:css1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSSの基礎(1タグに直接記述)</title>
	</head>
 
	<body>
		<h1>タグに直接記述</h1>
		<p style="color: green;">黒板なのになぜ緑なんだろう?</p>
	</body>
 
</html>

実践:headタグ内に記述

表示イメージ

ファイル名:css2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS:headタグ内に記述</title>
		<style>
			body{
				color: white;			/* 文字色 */
				background-color: skyblue;	/* 背景色 */
			}
		</style>
	</head>
 
	<body>
		<p>空の色は海の色</p>
	</body>
 
</html>

実践:外部ファイルに記述

注)外部ファイルのため、HTMLファイルCSSファイルの2つのファイルを作成する必要があります。

表示イメージ

HTMLファイル名:css3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS:外部ファイルに記述</title>
		<link rel="stylesheet" href="css3.css">
	</head>
 
	<body>
		<h1>見た目より中身</h1>
		<p>長く付き合うには中身も大事!</p>
	</body>
 
</html>

CSSファイル名:css3.css

@charset "utf-8";

/* css3.css */
h1{
	font-size: 20pt;	/* フォントサイズ */
	border-bottom: solid 1px black;	/* 下線をつける */
}
p{
	color: #1e90ff;	/* いい感じの青色 */
	font-size: 16pt;
}

補足:CSSのプロパティとプロパティ値の例

CSSのプロパティプロパティ値についていくつか挙げておきます。

プロパティ意味プロパティ値
color文字色red, blue, green, #FF0000, rgb(255, 0, 0)…
background-color背景色同上
font-sizeフォントサイズ24px, 24pt, 3em, 80%…
font-familyフォント(字体)serif, sans-serif, monospace, curve, fantasy 又は「游ゴシック」「Hiragino Kaku Gothic ProN」などのフォント名を直接指定
margin外側余白10px, 2em, 10pt…
padding内側余白同上
border枠線solid, solid 1px black…

例えばpタグのフォントを「游ゴシック」、フォントサイズを11ポイント、文字色を緑にするなら…

p{
	font-family: '游ゴシック';
	font-size: 11pt;
	color: green;
}

となります。

CSSのプロパティとプロパティ値については、以下も参考にしてください。

以上、HTML初心者がCSSを記述する上で知っておくべき基本事項でした。

課題

HTMLタグにCSSを直接記述する方法で解答せよ。

次のイメージのようなHTMLを作成し、見出しタグ(h1)の文字色をにして表示させよ。
ファイル名:midasi_red.html

headタグ内にCSSを記述する方法で作成せよ。

CSSを使ってホームページ色合いを次のような感じで(文字はなんでもOK)黒板っぽくしてみてください。
ファイル名:haikei_green.html

外部ファイルに記述する方法で作成せよ。

「国名」は、見出しタグ(h1)、「アルジェリア」は、段落タグ(p)である。
CSSを使って段落タグの方が、見出しタグより大きな文字で表示するようにしてください。見出しは下線がついています。段落文字色はです。

HTMLファイル名:p_big.html
CSSファイル名:p_big.css

コメント

  1. […] 上記、『請求金額一覧表』の表示イメージをHTMLとCSSを使って再現せよ。なお、CSSは外部ファイルとして記述する。(参考:CSS外部ファイルへの記述) […]