CSSの意味と使い方

ほとんどのWEBページはHTMLとCSSという言語でその見た目が作られています。
CSSとは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語」です。

CSSでまず最初に覚えておきたい3つの要素

Webページの見栄えを整えるにあたり、CSSでは次の3つの要素を用います。

  • ■　セレクタ – どのHTMLタグに対して見合えを調整するか
  • ■　プロパティ – どういった内容のデザインを施すか
  • ■　値 – プロパティはどの程度か

簡単に言えば、「何に、どのように、どのくらい」デザインを施すかということを示します。
説明だけではわかりにくいと思うので、実際にスタイルを作ってみましょう。
たとえば、「h1タグ」に対して、文字の大きさを50ピクセルにしたいときは次のように設定します。

h1{ font-size:50px }

ほかのタグに設定したいときも同様です。
例）pタグ

p { color: green; }

最初はややこしく感じるかもしれませが、一度覚えてしまえば簡単です。「:」や「;」を書き忘れないようにしましょう。

プロパティを複数指定したいとき

ひとつのセレクタに対して、プロパティは複数指定することができます。
たとえば、フォントサイズを70px・文字の色を青にしたいときには、

h1{font-size: 70px; color: blue;}


のように書きます。
また、コードには空白部分は無視されるという性質があるので、{ }で囲んだ設定を見やすく並列に並べてもいいでしょう。

h1{
 font-size: 20px,
  color: blue;
}

CSSの意味と使い方

プロパティにはほかにも、文字幅の調整や背景色の指定など目的別にたくさんの種類があります。
CSS リファレンスなどで検索すれば、様々なサイトが出てくるのでいろいろ試してみましょう。
プロパティ自体は他にも多くありますが、紹介しているものは覚えておくと作業効率も上がるでしょう

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, ,