2018.05.26

4. CSSの書き方の基本

目次

CSSファイルにはまずこれを記述しよう

文字化けを防ぐためのコードで、CSSの最初に記述したほうがいいコードがあります。CSSの1行目に以下のコードをコピペします。


@charset "utf-8";

エディタにコピペすると、こうなります↓↓


CSSの書き方

タグ名(h1)を最初に書き、{}の中で改行して、この中に指示を書いていきます。
{}の中は「プロパティ名: 値;」とします。
上の例では、h1要素のcolorプロパティ(文字の色)をred(赤)にする、といった意味になります。

また、プロパティを複数書く場合は、下に続けて書くと見やすくなります。


Sublime Textの画面を2分割する

テキストエディタでHTMLとCSSを扱うときは、画面を2分割して左右にそれぞれのファイルを配置すると、作業がしやすくなります。

Sublime Textの画面を複数に分割するには、Alt+Shift+2(数字は分割する数によって変えてください)を押すか、ツールバーのView→Layoutで設定できます。

colorプロパティ

先ほど紹介したcolorプロパティは、red、black、whiteなどの値だけでなく、カラーコードの値をとることもできます。
カラーコードとは、「#80FF00」といった、#から始まる7文字の文字列です。

試しにオレンジ系の#FA8258を使ってみます。

ブラウザで表示すると・・・

ちゃんとh1の色がオレンジになっています。

また、使いたい色のカラーコードを調べるには、HTML color codesが参考になるかと思います。

home

scroll