CSS入門コース（初心者向け）HTMLを装飾しよう

CSSでWebサイトのデザインを行なっていくには、セレクタやプロパティに関する知識が必要となります。このセレクタやプロパティには非常に多くの種類が存在するので、全てを覚えることは難しいかもしれませんが、1つでも多く知っていればデザインの幅は格段に広がっていきます。

まずはセレクタとは何を指すのか、プロパティとは何なのかを理解していきましょう。

基礎知識が身についたらページ下部の入門者向けの問題に挑戦してみましょう。

CSSとは、Cascading Style Sheets、カスケーティング・スタイル・シートのことでWebページのスタイルを指定するための言語です。「シーエスエス」や「スタイルシート」などと呼ばれています。あなたが今まさに見ているこのWebサイトの見た目も、主にCSSで作成されています。正確にはCSSはプログラミング言語ではなく、スタイルシート言語というものになります。スタイルシートとは、構造化された文書の表示形式を制御するための仕組みを指します。つまりCSSは構造化されたHTMLの表示形式を指定する言語ということです。

また、カスケーティングとは、ある要素のプロパティに対する宣言が複数あった時に宣言の優先順位つけて、うち1つの宣言だけが有効になるようにする仕組みのことを指します。CSSの技術を身に着けることで幅広いWebサイトを作れるようになります。HTMLが各要素の構造を定義することに対して、CSSはそれらの要素をどのように装飾するのかを決定する言語です。文字の大きさや文字の色、背景、余白の調整、レイアウトの指定、アニメーションなど他にも様々な部分に対してスタイルを指定することができます。CSSの記述方法は複数存在するので、そちらに関してもしっかり覚えていきましょう。

HTMLは<title>のように「タグ」で囲んで目印を付けていく構造でした。CSSではその「タグ」を使ってデザインをしたり、または新しく目印を作ってデザインをしていきます。デザインの対象の条件が合った時にそれぞれのスタイルが適用されます。対象を指定するためにCSSでは「セレクタ」というものを使用します。後程解説していきます。

今の時代PCだけではなく、スマホやタブレットで表示したときの適切なレイアウトを設定しておくことが必須です。デバイスによって画面幅が異なる為、ブラウザの見え方は異なります。そのような場合のレイアウト構造もCSSを使って指定しておくことが大事です。CSSでレスポンシブに対応させる場合は、メディアクエリというものを設定していきます。

CSSは基本的に「セレクタ{プロパティ:値}」というような構造で書きます。セレクタ、プロパティ、値がそれぞれがどのような役割を持っているのかを解説していきます。

セレクタはCSSを適用させる対象を指定する役割を持ちます。セレクタを記述することでどの部分にスタイルを適用させるかを決めることが可能です。セレクタは「Select(選択する)」を意味しており、h1やp、bodyなどのタグを指定したり、idやclassという属性で指定することができます。

プロパティはCSSに関するスタイルの種類を決める役割を持ちます。つまり「何を変化させたいのか」を決めるものになります。例えば「文字色を赤色」にする場合だとプロパティには「文字色」を指定します。後述する値の部分に「赤色」を指定します。プロパティの記述はセレクタの後の波括弧内に書きます。CSSには数100種類のプロパティが用意されているので、用途に合わせて使い分けれるようになりましょう。

値はプロパティで指定したものをどのように変化させるのかを決める役割を持ちます。もし背景色を指定するプロパティを記述したなら、何色なのかを値に記述します。文字サイズを指定するプロパティであれば文字の大きさを値に記述します。このように値にはプロパティによって書き方が異なるので、注意しましょう。

CSSはHTMLとセットで使用する言語なので、単体で使うことはありません。その為まずはHTMLファイルの作成が必要となるので準備をしておきましょう。CSSはHTMLに直接書き込む方法や、外部シートに書き込む方法などがあります。主に3つの方法が存在するので、以下で解説していきます。

インラインとはHTMLタグに直接CSSを書き込んでいく方法を指します。例えば「p style=”color: red;”」というようにstyle属性を使用して指定することができます。直感的で理解しやすいコードではありますが、追加や修正があった場合に手間がかかってしまうところが欠点です。

headタグ内にもCSSを書き込むことができます。書き込む際は<style>タグを使用します。<style>タグ内のCSSの書き方は通常の指定方法（セレクタ、プロパティ、値）で書くことができます。ただheadタグ内に記述する場合、書き込む対象のファイル内でしかスタイルが適用されないので注意しましょう。こちらもコードの修正に手間がかかってしまうので、外部ファイルに記述する方法と組み合わせて、特定のページだけにスタイル適用させる場合などに使用するといいでしょう。

CSSを外部ファイルで作成し記述する方法になります。一般的にはこの方法を使ってCSSを書くことが多いです。コードの修正や追加を行なう場合はリンクしている全てのページに反映することができるため、手間なく更新することができます。複数のHTMLで同じデザインにする時などは、1つのCSSファイルを共有して適用させることのできるコチラの方法が便利です。

CSSには前述にあった通り、数多くのプロパティが存在しています。その中でも頻繁に使用する基本的なプロパティの使い方を解説していきます。

CSSでブラウザに表示される文字の色を変えるには、「color」プロパティを使います。色を指定するには、値に色の名前を指定することで変更することができます。デフォルトでは黒色で表示されます。色の名前を指定する際は、キーワード（blue、redなど）、16進数カラーコード（#ffcc00など）、RGB（rgb( 255, 40, 51);など）、HSL（hsl( 0, 80%, 80%);など）の4種類のいずれかを使います。

▼ HTML ▼

<h1 class=”test”>
  こんにちは。
</h1>

▼ CSS ▼

.test {
  Color: red;
}

CSSで背景の色を変更するには「back-groundプロパティ」を使用します。色の指定方法は、「color」プロパティと同様になります。細かい色の表現をする場合は、RGBもしくは16進数カラーコードを使用します。

▼ HTML ▼

<p class=”backcolor”>
  こんにちは。
</p>

▼ CSS ▼

.backcolor {
  back-ground: #ffcc00;
}

CSSで文字の大きさを変更したい場合は、「font-size」プロパティを使用します。指定する値には固定値「px」や可変値「rem」という単位を使って記述します。多くのブラウザのデフォルト値は「16px」となっています。

▼ HTML ▼

<p class=”size-small”>
  小さい忍者
</p>

▼ CSS ▼

.size-small {
  Font-size: 12px;
}

CSSで横幅を調整するには「width」プロパティを使用します。値には「200px」や「80%」などのように指定して、大きさを変更します。画像の大きさも変更することが可能です。

CSSで要素の高さを変更する場合は「height」プロパティを使用します。「width」と同様に、単位には「px」や「%」を使って高さを指定します。

枠線を作りたい場合には、「border」プロパティを使用します。また、枠線だけではなく文章を強調するための下線も作成することができます。HTMLでは、「<p>こんにちは</p>」のようにタグで囲ったときブラウザに4つの領域（margin、border、padding、contents）が生成されます。

“こんにちは”という文字列は「contents」に該当し、一番内側の領域となります。外から順番にmargin、border、padding、contentsという領域になっています。この4つをまとめて要素と言います。「border」プロパティはこの外から2つ目の領域を境目に線を表示することができます。

CSSとは、要素をどのように装飾するのかを決定する言語のことでした。対してHTMLは各要素の構造を定義する役割を持ちます。HTMLとCSSで役割分担を行なうことで、様々なデザインを実現することが可能になっています。

これからWeb制作スキルを身に着けていくのであれば、必須で覚えるべき言語となるので、まずは基本文法を覚えてそれから様々な装飾パターンを覚えていきましょう。