読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

書き方について

HTML / CSS
<スポンサーリンク>

CSSでは、「セレクタ」「プロパティ」「値」の3つの値を組み合わせてスタイルを設定する。

セレクタ:h1要素やa要素など、コンテンツ内のどの要素にスタイルを適用するか指定する。

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

h1 {
	color: red;
}

■セレクタの種類
・基本セレクタとは・・・HTML要素全体にスタイルを適用させる。

要素名 {
	プロパティ:値;
}

p {
	font-size: 8pt;
}

・クラスセレクタとは・・・ある段落は○○、その他は●●というように、指定を分けたいときに使う。

p.blue {
	color: blue
	}
.red {
	color: red
	}
h1 {
	color: green;
	font-size: 30px;
	}

上記のようにCSSを書いて、htmlを以下のように書くと、要素ごとに色とか設定できる。

<!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-31J" />
  <title> test </title>
  <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  	<h1>クラスセレクタ<h1>
  	<p class="blue">青で表示 </p>
  	<p class="red">赤で表示 </p>
  	<p>色の指定なし</p>
 </body>
</html>

こんな感じで表示される。↓

・IDセレクタとは・・・ページ内にある1つの要素だけにスタイルを適用させたいときに使う。1つのHTML文書の中で同じID名を複数の要素には指定できない。IDセレクタの設定は1つの要素を特定するために使う。

要素名#ID{プロパティ:値;}

p#blue {
    color:blue;
#red {
    color:red;
}

HTMLをこう書く。

<!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-31J" />
  <title> test </title>
  <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  	<h1>クラスセレクタ<h1>
  	<p id="blue">IDセレクタ:青で表示 </p>
  	<p id="red">IDセレクタ:赤で表示 </p>
  	<p>色の指定なし</p>
 </body>
</html>

表示される結果はこんな感じ。

・擬似クラスとは、要素の状態に対して指定するセレクタ。
a:link →未アクセス状態
a:visited →アクセス済
a:hover →カーソルを載せた状態
a:active →アクセス中

HTML

<!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-31J" />
  <title> test </title>
  <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  	<h1>擬似クラス<h1>
  	<p><a href="#">LINK</a>
  	<p><a href="#">VISITED</a>
  	<p><a href="#">HOVER</a>
  	<p><a href="#">ACTIVE</a>
 </body>
</html>

CSS

a:link {
	color : red;
	}
a:visited {
	color : green;
	}
a:hover {
	color : yellow;
	}
a:active {
	color : blue;
}

■CSSをHTMLファイルへ組み込む方法
・style要素を使ってhead内に指定する

<head>
<style type="text/css">

</style>
</head>

・style属性を使って要素に直接指定する

<h1 style="color: #999999;" </h1>

・link要素で外部のCSSファイルをリンクさせる

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

・CSSファイルに文字コードを指定する方法
@charset "utf-8";
@charset "windows-31J";