CSSの書き方を覚えよう！

CSSコーディングをするに当たって、まず書き方の説明をしていきたいと思います。
HTML側で、適切なタグ(マーク）付けを行いました。この「タグ」に対して、ひとつひとつ見た目(スタイル)を付けていきます。ですので、タグがない所にはスタイルを付けられません。また、タグが間違っているのに気付き、変更した場合は勿論CSSも変更しなければいけません。

CSSでは、

１：どのタグに対する命令なのかを書き、

２：どんな風にスタイルをつけるのかを書きます。

２の「どんな風にスタイルをつけるのか」というのをもう少し詳しく言うと、どんな属性(プロパティ)をどれくらい変えるのかという事になります。

イメージ的にはこういった事です。
性別や国籍等、何も想定していないお人形があったとします。
その人形を、髪が黒く、身長20センチの日本人女性にしたいとすると、

と、スタイル付けしていきます。
一番左の「人形」がHTMLのタグに当たります。この部分をセレクタと呼びます。セレクタの後に、{}を書き、その中にスタイルを書きます。
{}内の左側、国籍・性別に当たる部分を属性(プロパティ)と呼び、ここの値を変える事でセレクタで指定した人形にスタイルを付けていきます。
プロパティの後には半角で:を書き、値を書いた後には;で締めくくります。命令がここまでですよという意味です。

人形には、この他にも目の色や服装など、色々なプロパティが考えられますが、HTML文章のタグはどんなプロパティを持っているのでしょうか。
ここでは段落の意味のpタグに指定出来るプロパティを見てみましょう。

この他にも余白や表示位置などのたくさんのプロパティがあります。
さて、pタグを「青く」、「太く」、「うすい黄色の背景」にする命令をしましょう。

こういった表現になります。実際の表示は以下の通りです。

ここはpです。

ボックスで解る、インライン要素とブロック要素の違い？

所で、表中にある「ボックス」とは何でしょうか？
詳しい説明は他サイトで解り易くまとめられていますので、ここではごく簡単な説明とします。

HTML文章では、文章を構成するのはブロック単位(まとまり)だという考え方が出来ます。
表題があり、段落があり、水平線があり、表があり・・といった具合に、ブロック単位でまとまっているのです。
このようなタグをブロック要素といいます。
ブロック要素は、幅と高さを持つ要素です。何も指定しない状態では、ブラウザの横幅いっぱいにまで幅を持ちます。
そして、自らの上下を改行して、ブロックを作ります。

対照的に、ある段落中の、ある特定の一行にだけスタイルを付けたい時等に使われるのが、幅や高さを持たないタグ達です。
このタグをインライン要素といいます。
これはインライン要素であるspanの領域です。
改行してみます。

例えば改行を表す<br />は高さや幅を持ちません。ですので、「横幅100pxで改行する」という様な事は出来ません。
リンクの<a>タグや、強調を表す<strong>もインライン要素です。

ボックスとは、このブロック要素やインライン要素の領域の事で、余白と枠線を持つ四角形です。
ブロック要素とインライン要素ではこのボックスの形が異なります。
上記の様に並べてみるとよく解りますが、ブロック要素のボックスは、領域内で文字が長くなり改行しても分割されずに全体を覆うような四角形になります。
インライン要素は領域が「行」の様に、改行されると分割されてしまいます。しかも幅、高さともに変更できません。

もうひとつの大きな違いは、幅や高さを持たないインライン要素の中に、ブロック要素を入れてはいけないという事です。
例えば

といった事は出来ないという事です。正しくは

となります。
反対にブロック要素にはブロック要素もインライン要素も入れる事が出来ます。

CSSでは、このインライン要素とブロック要素、ボックスの概念が重要となってきます。
とはいえ、コーディングをやりながら少しずつ理解すれば良い話ですので、全てを暗記する必要はありません。気楽にいきましょう！

トラックバックURL