CSSとは?初心者でもわかるCSSの基礎知識

CSSとは?初心者でもわかるCSSの基礎知識

WEBプログラミングを学習し始めると、HTMLの次にCSSを学習するというのが一般的です。

「CSSって何なの?」って人がほとんどかと思います。

そんなプログラミング初心者の人でもCSSが理解できるよう、わかりやすい具体例を使って紹介していきますので、この記事を参考にしてみてください。

CSSとは?

ほとんどのWebページはHTMLとCSSという言語で構成されています。

普段ご覧になっているWebページもHTMLとCSSという言語によってその見た目が作られています。

CSSとは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語」です。

つまりは、HTMLに色や大きさや背景などを加えて見栄えを良くするものということです。

CSSの書き方とは?

CSSの書き方はとてもシンプルで簡単です。

HTMLのタグの「どこの」「何を」「どうする」を記述しています。

【HTML】

<h1>heading(見出し)1</h1>

【CSS】

h1 { color: red; }

【結果】

heading(見出し)1

【解説】

h1 ……セレクタ 「どこの」

color: ……プロパティ 「何を」

red; ……値 「どうする」

プロパティと値は、{ }で囲んであげることにだけ注意してください。

そこだけ気を付ければ、CSSの書き方は難しくはないかと思います。

よく使われるCSSプロパティ

CSSのプロパティは数が多いのですが、中・高校生ぐらいの英語力で十分理解できるものです。

よく使うプロパティは限られていますので、幾つか紹介していきたいと思います。

font-size:

フォントサイズの指定は、「%」、「em」や、絶対数値の「px(ピクセル)、pt(ポイント)」などで指定します。

【例】

{ font-size: 100%; }

{ font-size: 200%; }

text-align:

ブロックレベル要素の中で行揃えを設定します。

left(左寄せ)、right(右寄せ)、center(中央揃え)等があります。

【例】

{ font-align: left; }

{ font-align: center; }

{ font-align: right; }

CSSのまとめ

実際に自分でCSSを入力できるようになれば、表現の幅は大きく広がります。慣れないうちは難しいかもしれませんが、ぜひとも挑戦してみてください。

CSSには他にもたくさんの書き方がありますが、ホームページを華やかにすることができます。

色々なCSSを組み合わせて、オシャレなデザインのページを作ってみてください。