CSSとは？｜デザイン用語辞典

CSSとは

CSSは”Cascading Style Sheets”の略で、WEBサイトのスタイルを指定するための言語です。

スタイルとは、文字や背景の色、大きさ、フォント、境界線、など、WEBサイトの装飾全般のことです。

CSSはHTMLとセットで使用します。
HTMLでWEBサイトの構造を記述し、それにCSSでスタイルを指定して装飾していく、という関係です。

CSSの要素

CSSは3つの要素で構成されています。

1. セレクタ
2. プロパティ
3. 値

それぞれもう少し詳しく解説していきますね。

❶ セレクタ

セレクタは、HTMLで書かれた構造の「どこにスタイルを適用するか」を指定するためのものです。

指定先として選べるものは主にタグ、class、idなどです。

classやidは、HTMLのタグにつけることのできる属性で、これによってより細かくスタイルの範囲を指定できます。

▼HTMLのタグについてはこちらをお読みください。
HTMLとは？｜デザイン用語辞典

❷ プロパティ

プロパティは「どんなスタイルを変えるか」を指定する部分です。

プロパティの種類は数多くあり、HTMLをあらゆる方法で装飾できます。
下記はその中でも、使用頻度の高いプロパティの例です。

color	文字色を指定する
background-color	背景色を指定する
background-image	背景画像を指定する
font-size	フォントのサイズを指定する
font-family	フォントの種類を指定する
font-weight	フォントの太さを指定する
line-height	行の高さを指定する
text-align	行の揃え位置・均等割付を指定する
width	幅を指定する
height	高さを指定する
margin	マージン（外側の余白）を指定する
padding	パディング（内側の余白）を指定する

❸ 値

値は、セレクタで指定された要素のプロパティを「どのように変更するか」を指定する部分です。

プロパティにより指定方法は様々です。

実際に見た目を決定づける大切な要素です。

高機能なテキストエディタで簡単にコーディングをしよう

セレクタ、プロパティ、値と3つの要素を紹介しました。
最初からその全てを覚えるのは、不可能ではありませんが効率が悪いです。

そこで、コーディングをする際は高機能なテキストエディタを使用することをお勧めします。

理由は、テキストエディタが自動でセレクタやプロパティを提案してくれるので、覚えなくてはいけないことが減り作業スピードもアップするからです。

最初は覚えるために自動入力機能をオフにする方が良いという人もいますが、結局現場ではテキストエディタを使うことになるので、早くツールに慣れておくという意味でも使わない理由はありません。

無料で使える高機能テキストエディタはいくつかありますが、下記の3つが代表的です。

どれも同じくらい高機能なので、自分にあったツールを探してみてください。

デザイナーもコーディングの基礎知識は勉強しよう

WEB制作の現場ではデザイナーとコーダーが分かれていることも多いですが、デザイナーもコーディングの知識は持っておいた方が良いです。

▼理由

• コーダーとの連携が取りやすくなる
• コーディングしやすいデザインを組めるようになり、制作の効率が上がる
• コードで表現できることを知ることで、デザインに生かすことができる

また、将来独立する際もデザインだけでなくコーディングもできるようになっていると仕事をもらいやすいという点も大きいですね。

自分の価値を高めるために、コーディングの勉強をしましょう。

ゼロからCSSを勉強するなら

実際にHTMLとCSSを使ってWEB制作をする際は、タグの他にも様々な知識が必要になります。
CSSをゼロから勉強するには、こちらの本がおすすめです。

実例や図解が豊富で、具体的にイメージしながら勉強することができます。

▶CSS関連の記事一覧
▶デザイン用語辞典へ戻る

最後までお読みいただきありがとうございます。