こんにちは。
インターエデュメディア運営を担当しているtakadaです。
インターエデュのデザイナーブログでは、WEBクリエイター初級〜中級者向けにHTML/CSS、WEBデザインについての情報を発信していきます。

WEB制作の仕事に就いてから15年くらいになるのですが、その間にHTML/CSSはものすごいスピードで進化してきました。
特にこの数年で変化（進化）を遂げてきたのがCSS。
WEBクリエイターになろう！と頑張っている初学者がまず躓くのがこのCSSなのかな、と思います。

下記構成でCSSについて連載更新していきますので宜しくお願いいたします。

1. CSS基礎知識
2. 今どきのCSSレイアウト
3. ここ数年で追加された便利なCSS

連載1回目の今回は「CSS基礎知識」について。

HTMLとCSS

HTMLはブラウザが解釈できる文書構造を持つ言語で、CSSはHTMLに装飾をおこなう為の言語です。

HTMLは↓こちらのようにタグで文章や文字を囲みます。

このHTMLに対して「背景色」「文字色」「文字サイズ」「罫線」など様々な装飾を追加するのがCSS。

CSSの記述方法は主に下記3種類

1. HTMLタグに直接「style」属性で記述する方法
2. 「<style>~</style>」タグ内に記述する方法
3. 別途CSSファイルを用意して「link」タグで読み込む方法

この3種類の読み込み方法はそれぞれ一長一短ありますが結構難しい話になるのでここでは割愛します。

CSSの記述方法

「指定したタグ（セレクタ）」に対して「何（プロパティ）」を「どうする（値）」という記述をおこないます。

例）「p」タグに対して「文字色」を「青（#0000ff）にする」

タグ（セレクタ）

指定方法は「p」「li」「strong」など直接タグを指定する他、「.hoge」のようにClassセレクタ、「#foo」Idセレクタ、「要素名:hover」疑似クラスなど様々。
特定の要素の中にある子要素「.hoge .foo .bar」、特定の要素の後ろにある兄弟要素「.hoge + .foo」など複雑な指定方法も可能です。

詳しくは下記サイトにあるので興味のある方は↓こちら

https://www.w3.org/TR/selectors-3/#selectors

W3C: Selectors Level 3

プロパティ

プロパティは日本語で言うと「特性」ですかね。
色や罫線、サイズなどのスタイルの種類と覚えてもらえればと思います。

このプロパティは2022年現在は約250ほどあるらしく、私も全部は覚えていません。そもそも250近くあるのを知りませんでした…。

↓CSSプロパティの参考サイト
https://www.tagindex.com/stylesheet/properties/
http://www.htmq.com/style/

値

これは言葉のままですね。プロパティに対して設定したい「値」になります。
値は「12px, 20rem」などの単位付きの数値、「#fff, rgba(255,255,255,.5)」などの色、「hidden, absolute」などのキーワード、「calc( 100% + 20px )」のような計算式があります。
特に数値単位は様々な値があり、WEBサイト毎に指定ルールを設けている場合もあるのでCSSを使いこなすうえで結構重要になります。

ショートハンド

たくさんあるプロパティと値の中には「ショートハンド」と呼ばれる記述方法を使ってまとめて指定する事ができます。

例えば上記「border」の場合は

罫線の「幅」「スタイル」「色」それぞれを1つにまとめたショートハンドになります。

まとめ

CSSのセレクタ、プロパティ、値、この3つを理解していればHTMLに装飾をおこない、見栄えの良いWEBサイトを作る事ができます。

次回はページレイアウト作りについての記事を作成予定です。