【超シンプル解説】CSSの基本

cssはウェブサイトを鮮やかにしてくれる言語。

htmlが大体できるようになったらセットでcssを覚える。

cssもhtmlと同じで全く難しくない。

htmlに対してcssを適用するだけの超シンプル言語。

htmlをもし知らない場合は、以下の記事を参考までに。

【超シンプル解説】HTMLの基本

HTMLはウェブサイトの土台を作るのに欠かせない言語である。初心者がウェブサイトを作る勉強をする際に必ず通る道だ。ぶっちゃけ、HTMLは全然難しくない。難解...

今回の内容

cssとは
cssの利用方法
cssの書き方
- id、classの登場
cssはものすごく単純

cssとは

cssはウェブサイトを装飾するために使う言語。

htmlは文字を表示するだけでウェブページの見栄えが悪い。

せっかくサイトを見に来た人もそれでは見るのをやめてしまう。

cssを使って、文字の色や配置を変え、ウェブサイト全体を見やすくする。

それがcssの役割。

cssの利用方法

cssの書き方を紹介する前に、大切な利用方法を紹介する。

利用方法は3パターン

htmlタグの中に直接書く
htmlファイルにstyleタグを使って書く
専用のcssファイルを作ってhtmlファイルから読み込む

このように利用方法は3パターンあり、その中から好きに選んで構わない。

一般的に3つ目の方法を使うことが多い。

今回の例

今回使用するhtmlを紹介する。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>cssの利用方法</title>
	</head>
	<body>
		<p>こんにちわ！</p>
	</body>
</html>

次にcss適用前と適用後の画像を載せておく。

適用前

適用後

これから紹介する3つの方法は、どれを使っても結果が上記のようになる。

それぞれ使い分けるポイントも書いていくので参考にしてほしい。

htmlタグの中に直接書く

1つ目の方法はシンプル。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>cssの利用方法</title>
	</head>
	<body>
		<p style="color: red;">こんにちわ！</p>
	</body>
</html>

書いたタグの中にstyle=…と書くだけで適用される。

ページ数が多いウェブサイトだと管理が複雑になるというデメリットがあるが、少ないページだとわかりやすく書ける。

ちなみにこのcssは文字色を赤にするという意味になる。(後ほど説明)

htmlファイルにstyleタグを使って書く

1つ目の方法と違い、タグの中に書かずにまとめてcssを書くことができる。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>cssの利用方法</title>
		<style>
			p {
				color: red;
			}
		</style>
	</head>
	<body>
		<p>こんにちわ！</p>
	</body>
</html>

1つ目の方法との違いはわかると思うが、<title>の下に<style>とある。

その中にcssを書いていくという方法。

一つのページにまとめて書けるので見やすいが、複数のページにまたがって書けないので修正するときが大変。

専用のcssファイルを作ってhtmlファイルから読み込む

cssだけを書くファイルを用意してhtmlファイルから読み込むという方法。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>cssの利用方法</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<p>こんにちわ！</p>
	</body>
</html>

薄く線が引いてある部分がcssファイルを読み込んでいる部分。

そのcssファイルはこうなっている。

p {
	color: red;
}

単独でcssファイルを切り離しておくことで、cssを適用したいページが複数あってもその都度読み込ませることが可能になる。

ページが変わってもcssは一つのファイルに書いてあるで管理がしやすい。

ほとんどのウェブサイトは複数のページで作られているので、この方法が最も合理的でよく使われている。

cssの書き方

利用方法がわかったら、あとは書き方を覚えるのみ。

今回はわかりやすく説明するため、2つ目の方法(htmlファイルにstyleタグを使って書く方法)で説明していく。

2つ目の方法をもう一度載せる。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>cssの利用方法</title>
		<style>
			p {color: red;}
		</style>
	</head>
	<body>
		<p>こんにちわ！</p>
	</body>
</html>

<style>..</style>の間がcssで書かれている部分。

<style>タグの中にp {color: red;}と書かれているのは、
<p>こんにちわ!</p>に対してのこと。

これはそのまま、<p>タグの文字を赤にするということ。

今回は<p>タグしか書いていないが、<h2>タグを書いたならh2 {color: red;}と書く。

すごく単純。

id、classの登場

タグに対して指定する方法は理解できたかもしれないが、実際<p>タグや<div>タグはページ内でたくさん使う。

しかし、ページに<p>がたくさんあると、先程の方法では<p>タグで書いた部分全て文字色が赤になってしまう。

どうするべきか。

その場合、id、classを使うことによって解決できる。

id、classとは簡単に言うと、タグごとに自分の好きな名前をつけられる機能のこと。

実際に書いてみる。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>cssの利用方法</title>
		<style>
			p {
				color: red;
			}
			#html {
				color: green;
			}
			.css {
				color: blue;
			}
		</style>
	</head>
	<body>
		<p>こんにちわ！</p>
		<p id="html">html</p>
		<p class="css">css</p>
	</body>
</html>

<p>タグが増えて3つになり、中にid="html"、class="css"と書いてある。

これがタグに名前をつけるということである。

そして、<style>内にその名前を書いて適応させる。

idなら頭文字に#をつけ、classなら.をつけるだけ。

実際に表示するとこうなる。