noobでもわかるスタイルシート講座その１

連載企画やってみるぜぇぇぇ。
というより本筋は自分が忘れないための備忘禄であったりする。。。

『スタイルシートってなんなのさ？』ってところから入りますかね。
2〜3年前からブログが流行ってきて自作HPにもスタイルシートの導入は普通になってきました。
まぁスタイルシート使いたくなくても勝手についてくる訳ですがｗ

語彙はこんな感じみたいです。

俺が思うメリットは
HTML文書にスタイルシートを適用すると、HTML文書からレイアウト情報などを分離し、文書の構造だけをHTML文書本体に記述することが可能になる。

こう記述があるように分離することでHTML本体がぐちゃぐちゃにならないって所ですかね。
可読性は確かにあがります。わかってる人が読めばの話ですが。。。
複数のページデザインを統一するときも便利。スタイルシート読むだけでいいから。
使いこなせるとできる人みたいでカッコいいってのが一番ですなｗｗｗ

前置きはこれくらいにしといて実例を読んでくのがたぶん早いですね。
基本的な考え方はHTMLのタグ内での動きを決める、という事です。
<body>タグでは背景青にしてね、<p>タグではフォントは16ptにしてね、みたいな事を記述します。今の例を実際に書いてみると、

body

  {

  background-color: blue;

  }

p 

  {

  font-size: 16pt;

  }

これでHTML側で<p>タグを使えば、その中の記述は全て16ptで表示されちゃいます。
この例だと<body>が青なので常に真っ青なページになってしまいますが。
また同じ設定をしたい場合には次の例のようにカンマの後に続けて書くことで適用されます。

body, p

  {

  font-size: 16pt;

  background-color: blue;

  }

上記例の中括弧の前に指定したHTMLのタグをセレクタと呼び、
中括弧（スコープ）内の記述をプロパティ：値と呼びます。
これは言葉的意味なので「あ、そうなんだ」くらいでいいです。

よってスタイルシートの基本は、
セレクタ｛　プロパティ：　値；｝
となります。プロパティの後ろはコロン、値の後ろはセミコロンを付けます。

長くなったのでこの辺で今回は終わり。
しかしいざ文章にしてみると凄く教え方が難しいと思った。

間違い・勘違い多々あると思いますので知識のある方からのご指摘お待ちしております。

モノノフ日記