基礎さえ覚えればOK!かんたんCSS入門

CSSでなにができるの?

CSS(正式名称はCascading Style Sheet)は、Webページのスタイルを整えるための言語です。CSSは、HTMLで作成した文章などの要素に装飾を加える事ができます。たとえば、「ここは重要だから文字を太くしたり、文字色を変えたい」「画像の位置を調節したい」など…。Webページのレイアウトやデザインを作成するために、必須となる言語と言えるでしょう。
CSSでできることを分類すると、レイアウトの調整(コンテンツの横幅・縦幅、要素間の余白)、文字の装飾(文字の大きさ、色、太さ、フォントの種類)、ページ全体や特定のコンテンツのデザイン(背景画像、背景色、コンテンツのボーダー・背景、ボタンのデザイン)に分けることができます。

まずはここから!CSSの基本文法

まず、CSSの基本となる文法を覚えましょう。CSSは「セレクタ」「プロパティ」「値」を指定することで、デザインなどの指示を記述します。
セレクタは、table(表)やh1(大見出し)など、装飾をしたい要素を指します。プロパティは、font-size(文字の大きさ)、margin(余白)、width(横幅)など、変更したいデザインの種類のことです。そして、値には、どのように変更するかの指示が記述されます。12pxや20mmといった数値や、redや#000000など色の指定などが値に書かれます。これらの指定方法は「セレクタ{プロパティ:要素;}」となり、ひとつのセレクタに複数のプロパティ・値を指示することも可能です。たとえば「大見出しの色を赤にし、上下の余白を30pxとる」と指定したい場合は「h1{color:red;margin-top:30px;margin-bottom:30px;}」となります。