投稿者: 
ＣＳＳ -Cascading Style Sheets-
楽しみにしていたＣＳＳが始まりました。
まず、ＣＳＳについてですが。
これまで勉強してきたのに「ＨＴＭＬ（Hyper Text Markup Language）」と呼ばれる言葉があります。
これは、ウェブページの構造を定義するために使われる言葉です。
また、文書の中に画像や音声、動画、他の文書へのハイパーリンクなどを埋め込むこともできます。
ウェブページを作る一番基本となる記述言語と言うのでしょうか。
次にＣＳＳについてですが、ウェブページのレイアウトやデザインを定義するのに用います。
CSSを使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体(及び文書の論理構造を記述したHTML)から切り離すことができ、ユーザが複数のレイアウトから適当なものを選択することができるようになります。
ＨＴＭＬでもレイアウトや文字の装飾などは出来ていたんですが、ＣＳＳを使うことによって、さらに広がりを持ったものが作れます。
ＨＴＭＬで１００通りのことが出来たとすれば、ＣＳＳによってさらに１００通りが選択できて、１００×１００通りに世界が広がるようなものです。
ちなみに上のＣＳＳのタイトルの囲いですが、これもＣＳＳを使って作りました。
タグを見ると
<span style=”font-size:1.3em;font-weight:700;background-color:#f00;color:white;padding:3px 5px 3px 5px;”>ＣＳＳ -Cascading Style Sheets-</span>
もしＨＴＭＬで同じものを作るとしたら、テーブルを一つ用意して作らないといけません。
| ＣＳＳ -Cascading Style Sheets- |
タグを見ると
<table border=”0″ cellpadding=”3px” bgcolor=”#ff0000″><tr><td><font size=”+1″ color=”white”><b>ＣＳＳ -Cascading Style Sheets-</b></font></td></tr></table>
となって、上のもの位ならＨＴＭＬでも出来ますが、いちいちテーブルを用意して非常に面倒な作業になります。
ましてや
はＨＴＭＬでは作れません。
もし作るなら、画像で作らないといけません。
CSSのタグの記述にも３種類の書き方があります。
１つめは、ＨＴＭＬのタグの内部にＣＳＳを書き入れるタイプ
上で書いたＣＳＳのタグがそうです。ＨＴＭＬのタグである<span>にstyle=””を追記してＣＳＳを書き入れていきます。
２つめは、ＨＴＭＬのヘッダー内に定義するタイプ
これは、まずＨＴＭＬでのウェブページの作り方から説明しないといけなくなりますが。
ウェブページを作る時、一番初めに必要なタグは
<html>webページ全体はここから/htmlまでです
<head>/headまでにヘッダー部分としてページについての説明をします
</head>
<body>/bodyまでにページ内の内容を書き込みます
</body>
</html>
この<head>のなかにあらかじめＣＳＳを用意しておいて、もし<span>というタグが出たらこのように表示してください。と書き入れます。
３つめは、別にＣＳＳ専用のファイルを用意して、そこから呼び出すタイプ
２つめにhead内に書いた記述をそのまま別ファイルとして移してそこから呼び出します。
メリットとしたら、ページ内のタグの記述が簡素化されてＳＥＯ対策が有利に働きます。
あと、id やclassと言った名前をつけるものをＨＴＭＬタグにつけてることで、その名前をつけたタグだけを特定して指定することもできます。
なんかＣＳＳの説明だけでめっちゃ書いてしまったｗ
それだけややこしいというかとっつき難いというか。
ただ、習ってみるとＨＴＭＬの延長のようなもので、そこまで難しいと言うよりは
面白くて興奮しました。
なんでこんなに素晴らしいものを知らなかったんだ～！とも思いましたよ(；´Д｀)
しかも。こんだけの内容をたった２日でやってしまうとは・・・。
かなりハイペースで進んで行って、復習のため、ろくにブログを書く暇もありませんでした。
お陰さまで色んなサイトのソースを見てもＣＳＳはだいぶ理解出来るようになりました。
よっし、目標はこのブログのＣＳＳを自分で作ろう！
ということで、少しずつテンプレートのＣＳＳを自分でいじっていきたいと思います。
SECRET: 0
PASS: 74be16979710d4c4e7c6647856088456
ふ、二日間でＣＳＳを！？
僕は二週間頑張りましたがわからずFLASHに逃げたのに、のずさんは面白くて興奮って！！(汗.笑)
それにしても、わかりやすくて勉強になります。
SECRET: 0
PASS: 74be16979710d4c4e7c6647856088456
ほんとに二日間は、詰め込み教育でしたｗ
そしてそのままJavascriptに入っていくのが恐ろしいですよｗ
今までHTMLしかわからなかったんで、色んなサイト見てもどうやって作ってるのかさっぱりだったんですよ。それがCSSで分かったら脳汁全開でしたｗｗ