スタイルシート(CSS)について概要を学習します。

スタイルシート(Cascading Style Sheets)はホームページのデザイン部分を担当します。 HTMLは主にテキスト、画像、リンク等を担当すると思って下さい。 HTMLでもデザインが可能ですが、複雑なコードになり労力を必要とします。
スタイルシートと組合せれば、HTMLとスタイルシートで役割分担できます。また、複数のHTMLファイルから一つの同じスタイルシートを適用できます。一つのHTMLファイルから複数のスタイルシートを適用する事も可能です。スタイルは記述は、HTMLファイル中に記述可能です。しかし、冗長的になり避けるべきでしょう。しかし、このポイントのみスタイルを適用したいと思った時には効果的かも知れません。

<html>
<head>
	<title>スタイルシートについて</title>
</head>

<style type="text/css">
<!--
h1{ color : green; }
-->
</style>

<body>
  <h1>スタイルシートについて学習したいと思います。</h1>
	
  <p style="color : red;">スタイルシートをHTMLファイル内に記述。</p>
	
</body>
</html>

サンプル01をクリックして、結果を確認して下さい。

外部のスタイルシートを読み込んで、HTMLに適応する方法を見てみます。

<html>
<head>
  <title>外部スタイルシートの読み込み</title>
  <link rel="stylesheet" type="text/css" href="sample_css02.css">
</head>
<body>
  <h1>外部スタイルシート読み込み方法</h1>
  <p>head領域にlinkタグを追加します</p>
</body>
</html>


h1{
	color : green ;
}
p{
	color : red ;
}

スタイルの指定は、HTMLファイル中の指定したい基本セレクタ、classセレクタ、idセレクタを{}で囲んで指定します。
最初の指定は、HTML中のh1セレクタに対して、文字色greenを適用しています。
２つ目の指定は、pセレクタに対して、文字色redを適用しています。
サンプル02をクリックして、結果を確認して下さい。

クラス、idとはなんでしょう。

クラスとidは、HTMLタグに作成者自身が名前を付加して、管理出来るようにします。
HTMLファイル中に<p>タグは何度も出てきます。特定の<p>タグにスタイルを適用したいのに pセレクタのみでは、特定することは出来ません。
<p class="big"></p>と<p class="small"></p>と名前を付けることにより、特定のタグのみにスタイルを適用できるようになります。
classの場合は何度でも同じ名前を設定出来ます。同じ名前のclassは同じスタイルを指定したことになります。
一方、idはHTMLファイル内では一度しか指定できません。
<h1 id="one"></h1>や<h1 id="two"></h1>のように指定します。

<html>
<head>
  <title>クラス、idとはなんでしょう</title>
  <link rel="stylesheet" type="text/css" href="sample_css03.css">
</head>
<body>
  <h1 id="one">classセレクタはHTMLファイル中に何回でも指定できます</h1>
  <p class="big">class=""と指示します。</p>
  <h1 id="two">idセレクタはHTMLファイル中に一回しか指定できません</h1>
  <p class="big">id=""と指定します。</p>
  <p class="small">これは、class="small"と指定しています。</p>
  <p >効果の確認の為、class,id指示なし。</p>
</body>
</html>

スタイルシートの中身は、


#one{
	color : green ;
}
#two{
	color : blue ;
}
.big{
	color : red ;
	font-size : 150%;
}
.small{
	color : yellow ;
	font-size : 80%;
}

サンプル03をクリックして、結果を確認して下さい。

,(カンマ)で区切ることにより、セレクタは一度に指定する事も可能です。

<html>
<head>
  <title>セレクタを一度に指定します</title>
  <link rel="stylesheet" type="text/css" href="sample_css04.css">
</head>
<body>
  <h1>セレクタを一度に指定します</h1>
  <p>h1,p{ } の様に,(カンマ)で区切ります</p>
</body>
</html>

スタイルシートの中身は、


h1,p{
	color : green ;
	font-size : 20px;
	font-weight : bold ;
}

サンプル04をクリックして、結果を確認して下さい。

,(カンマ)の代わりに半角スペースで区切ることで、親要素に含まれる子要素を指定する事が出来ます。

<html>
<head>
  <title>親要素に含まれる子要素を指定します</title>
  <link rel="stylesheet" type="text/css" href="sample_css05.css">
</head>
<body>
  <h1>親要素に含まれる<span>子要素</span>を指定</h1>
  <p>親要素に含まれる<span>子要素</span>を指定する事が出来ます。</p>
</body>
</html>

スタイルシートの中身は、


p span{
	color : red ;
}

サンプル05をクリックして、結果を確認して下さい。

<span>タグが<h1>タグと<p>タグ中にそれぞれ出てきますが、適用されているのは、 <p>タグのみである事に注目して下さい。

HTMLの学習

HTML&CSSの学習

スタイルシートについて