スタイルシートの基礎

このサイトで左のHTMLを表示させると右のように表示される。

<p clase="title">シンプルなHTML</p>
スタイルシートを使うと<br />シンプルなHTMLを書けるので<br />メンテナンスしやすい。

これをスタイルシートを使わないで記入すると複雑になってしまう

<b><font color="#ff0033">
複雑になってしまうHTMLも<br />
スタイルシートを使えば、整理できる。
</font></b>

スタイルシートなら装飾の為のタグを減らせるのでスマートになる。

複雑になってしまうHTMLも

スタイルシートを使えば、整理できる。

外部スタイルシートを使えば、スタイルを共有できる。

複雑になってしまうHTMLも

スタイルシートを使えば、整理できる。

外部スタイルシートの例

/* 太字の赤文字 */
.BoldRED{
font-weight:
bold;color:#FF0000;
}

.title {
      color: red;
}
		

シンプルなHTML

この要素の色や文字サイズを変えるには、titleセレクタのプロパティを変更するだけで良い