初心者のためのホームページ練習部屋～ＨＴＭＬ～

まず、大変便利な簡単ツール！のメモ帳を開きます。
その中に下記を書き込んでください。

body{background-color:#ffff80;}

書き込んだら、そのメモ帳を保存します。
保存場所は前回作ったrensyu.htmlのあるフォルダです。

ファイル→名前を付けて保存
→ファイル名(仮にstyle.css)→保存
拡張子を.cssにすること！！

スタイルシートをリンクさせます。
前回作ったrensyu.htmlの<head>～</head>内にある
<link rel="stylesheet" type="text/css" href="stylesheet.css">
を下記に変更します。

要は、さっき保存したスタイルシート（ＣＳＳ）ファイルとリンクさせるために名前を変えただけです。

スタイルシート（ＣＳＳ）内に記述したものを簡単に解説すると。

body{background-color:#ffff80;}
簡単に言えば<body>の中を【薄い黄色にしなさい！】っていう命令です。
色見本はこちらがとっても解りやすいです。
{～}内に命令を書くのです。例えば、命令を下記に変えて、文字を赤くします。

body{color:#ff0000;background-color:#ffff80;}

同じようにして、見出しも変えてみます。スタイルシートの記述を下記に変えます。

body{color:#ff0000;background-color:#ffff80;}
h1{color:#0000ff;font-size:small;}

センスが悪いので、元に戻しますが、こういう感じでＨＴＭＬ内をいじらなくても、スタイルシート（ＣＳＳ）を変えるだけで、簡単にデザインを変えられるのです。
次回は、<table>について勉強したいと思います。

ホームページ練習部屋 ～初心者のためのＨＴＭＬ～