CSS1

1. 【一日でできる】初心者
のホームページ制作
～CSS（基礎）編～

2. マロン先生
よーし！
今回はホームページの装飾で使う、
CSSについて学んでもらうのだ。
ブラック君
あれ、先生が変わった・・・
いよいよ、装飾できるのか！
よろしくお願いします。

3. マロン先生
今回は、HTML編で配布したサンプル2を
使用するから、持ってない人は
HTML編からダウンロードするのだ。
ブラック君
あのシロ先生のことについて書いてある
やつですね。
あれだけでも見やすいと思うんだけど。。。

4. マロン先生
甘い甘い。
あれは、見やすい文章にしただけで、
装飾はまた別なのだ。
ブラック君
えっ！？そうだったんですか？？
でも装飾ってなんだか難しそう。。
できるかな・・・・

5. マロン先生
CSSは慣れない人にはちょっと難しいが、
慣れてしまえば意外と簡単なのだ。
早速やるぞ。
ブラック君
今回もいきなりやるんですね。
頑張ってついていきます。

6. マロン先生
では、サンプル２のstyle.cssを開いてくれ。
真っ白だが、それでいい。
ここに装飾を書いていくのだ。
ブラック君
真っ白ですね。
一から作るのは大変そうだな。。

7. マロン先生
では、書き方の基礎を教えよう。
下記のようにタグ名の後に{}で囲うのだ。
タグ名｛
色の指定
文字の大きさの指定
｝
例）
h1｛
color:red;
font-size:20px;
｝

8. マロン先生
間は「：（コロン）」、最後は「；（セミコロン）」だ。
例を、そのまま書くとこのようになるのだ。

9. マロン先生
h1の部分の文字が赤く、小さくなったのが
解かるか？
確認したら、色や数値を変えてみてくれ。
ブラック君
本当だ！！
h1をh2に変えたら、h2の部分が変わった！！
colorとかfontとか解かりやすい！！

10. マロン先生
仕事が早いな・・・
こんな感じで、タグを指定して装飾内容を書く
というシンプルな作業なのだ。
ブラック君
思っていいたより簡単でした。
タグで囲むとこんな簡単にできるんですね。
タグって重要！！

11. マロン先生
次回は、もっとかっこいい装飾をするのだ。
背景画像を設定したり、アニメーションを
したり・・・・・
ブラック君
やっとアニメーションができるんですね？？
背景画像も楽しみです。
次回もよろしくお願いします！！！