どうも！やないです。
HTML
ここで右クリックを押して
「ページのソースを表示」を
押してみましょう。
ででん！
なんだか大量の文字コードが出てきましたね・・。
これはWEBページの元になっている
ソースコードというやつです。
この中に含まれる
HTMLタグで成り立っている文書が
ブラウザに読み込まれて
僕らが見るヤフーの
WEBサイトになるというわけです。
※HTMLタグとはソースコード上にある<h1>や<head>のことを指します。
僕は今学校でこれらを駆使して
WEB制作を勉強しているというわけです。
え？ぴんとこない？
じゃあもっとかみ砕いて説明しますよ。
HTMLとは・・・
これだ！
<html>
<head>
</head>
<body>
</body>
<footer>
</footer>
</html>
・・・え？ますます分からなくなったって？
でもでも、よく見てください。
htmlの中に
headやらbodyやらfooterあるでしょ。
head=頭
body=体
footer=足
CSS
ですがＨＴＭＬだけでは活字やら画像やらを
ぶち込むことは出来ても
背景の色を変更したり
オシャレにＷＥＢページを
デザインすることはできません。
どうしよう・・このままでは
味気ないWEBサイトになってしまいます。
そこでＣＳＳの出番です。
ＣＳＳとは なにか？
ＨＴＭＬと合わせて使う言語のことです。
ＣＳＳはＨＴＭＬで組んだ活字やら背景やらを
どのように装飾するか（色を変えてみたり横線を引いてみたりなど）
指定することが出来ます。
例えばhtmlの中に文章があったとしましょう。
<html>
<head>
</head>
<body>
<p>見せてやろう！超エリートサイヤ人の圧倒的パワーを！</p>
</body>
<footer>
</footer>
</html>
※ちなみにここでいう<p>はバラグラフ、つまり段落の意味を持っています。htmlのなかでは文章をくくるのに必要です。
例えばここで<p>と</p>の間にある文を赤くしたい場合、どうすればいいか？
そのためにはこのＨＴＭＬとは別に
「スタイルシート」というものを作成し
ＨＴＭＬに反映できるよう設定し
そこに以下のように
入力する必要があるわけです。
まずpを入力しカッコでくくり色を指定します。
p{color: red;}
すると
「見せてやろう！超エリートサイヤ人の圧倒的パワーを！」
の部分が赤字になります。
こんな感じでＣＳＳは
ＨＴＭＬとあわせて使っていきます。
ＨＴＭＬで出来た骨組みに
ＣＳＳで肉付けしていくという
感じですね。
どうでしょう？結構面白いでしょ？
こうしてＷＥＢサイトは
出来上がっていくのです。
おすすめ参考書
最後にボクがＨＴＭＬとＣＳＳの勉強をするにあたって
一番はじめに使用したテキストを紹介します。
こちらのテキストは初心者向けなのですが
実際にＷＥＢサイトを作りながら
勉強することが出来るので
まるでゲームみたいに
楽しみながらやれます。
このテキストが終わるころには
簡単なＷＥＢサイトは作れるようになります。
