【初心者向け】CSSの基本を解説-WEB向上中！

HTMLの勉強を始めた人が必ずセットで学ぶ必要があるのがCSSです。

慣れると難しくはないのですが、初めての人にはHTMLとの住み分けなど含め分かりにくい所もあると思います。
まずは慣れるという意味も含めて基本的な概念をご紹介します。

CSSの役割とは？

CSSは、HTMLで作成された内容のデザインを整える為の言語です。
文字の大きさや色、字間やレイアウトなどの空間などを制御します。最初はなぜHTMLとCSSが分かれている必要があるのか分かりにくと思いますが、複数のページで構成されるサイトに置いて、デザインの統一性を出すためにも分離した考えがとても有効になります。
この辺りは使っていくうちにその意味が理解できると思います。

まずはCSSファイルを用意

CSSもHTMLと同様テキストファイルです。テキストファイルを保存する時に拡張子を「css」で保存すれば完成です。
注意点はHTMLファイルの文字コードと同じ文字コードで保存してください。文字コードが違うとCSSの内容が正しく読み取れない場合があります。

CSSファイルの読み込み

保存したファイルをHTMLファイルで読み込ませればCSSを利用する下準備が整います。
HTMLファイルのhead内で以下のように記述します。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css">
</head>
～

これでHTMLファイルが読み込まれた時に、cssも読み込まれその内容が反映されていきます。
CSSの内容をhead内に直接書く方法もありますが、管理の観点からもオススメできないのでここでは外部ファイルを読み込む方法のみご紹介します。

CSSの基本の書き方

CSSの基本的な書き方ですが、まずは下記コードをご覧ください。

p {
  color: red;
}

これを見れば何となく想像が付く方もいると思いますが、これはp要素の文字を赤にする記述です。

少し中身を説明しますと、まず対象の要素を指定（ここではpの部分）します。{ }で括った内容がその要素に対して反映させる内容です。

属性（ここではcolorの部分）を指定し、どういう内容にするか（ここではredの部分）を指定します。属性と値の間は「:」で、値の末尾には「;」を付けるのがルールです。

後は指定してい要素ごとに設定を行い、レイアウトやデザインを調整していきます。

よく使う変更内容をご紹介

CSSの目的はデザインを調整する事です。その為様々なプロパティが用意されています。
それを全て紹介するには、このページだけではとても足りないので、ここでは良く使うものを中心に一部ご紹介したいと思います。

文字を装飾する

文字表現を調整する指定方法です。

p {
  color: red;
  font-size: 18px;
  font-weight: bold;
}

サイズ18pxの赤太文字

この記述でp要素の文字を、文字サイズ18pxの赤文字にし、font-weight:boldで太字にしています。
colorの指定は「#ffffff」の16進数での指定が可能です。色を自由に選びその16進数コードを教えてくれるサイトがたくさんありますので検索してみて下さい。
font-sizeはpx指定の他に、「%」や「rem」などの指定が出来ますが、この辺りは最初はわかりにくいのでまずは「px」指定から慣れていくのが良いと思います。

背景を装飾する

要素の背景を変更する指定方法です。

p {
  background-color: red;
  background：url('../image/test.gif') no-repeat left top;
}

背景の色赤

background-colorで背景色を指定できます。文字のcolor指定と同様16進数での色指定も可能です。
背景に画像を指定してい場合は、backgroudを使います。左から画像の場所、リピートするか、左右の場所、上下の場所を半角スペースで空けて指定します。

画像の指定はcssファイルが格納されている場所が起点となるので注意が必要です。
リピートの指定はno-repeat/repeat/repeat-y/repeat-xなどがあります。
位置はleft/center/right、上下はtop/center/bottomがあります。pxやパーセント指定も可能です。

線を引く

上下左右に線を引く指定方法です。

p {
  border-left: 5px solid blue;
  border: 3px dotted black; 
}

左に青を引く

border-leftは左、border-topは上、border-bottomは下、border-rightは右に線を引きます。
値は左から線の太さ、線の種類、線の色を表しています。

点線で囲む

borderとすると4方を囲った線を描く事ができます。
線の種類はdotted（丸い点線）、solide（実践）、dashed（四角い点線）、double（2本の実線）などがあります。

テキストの位置を指定する

テキストの位置を要素の真ん中に持ってきたい時などに指定する方法です。

p {
  text-align: center;
}

文字位置真ん中

text-alignで文字の左右の位置を決定します。leftは左揃え、rightは右揃え、centerは中央揃えとなります。

幅・高さを調整する

線で囲った時や背景をつぶした際に、その要素の幅や高さを調整する指定方法です。

p {
  height: 30px;
  width: 25%;
}

高さ60px/幅25%

heightで要素の高さ、widthで要素の幅を指定します。
指定方法はpx（ピクセル）がわかりやすいですが、他にも%指定も可能です。その要素の最大表示幅（親要素の幅）を100%として、割合で指定します。レスポンシブデザインの場合は重宝する指定方法です。

余白を調整する

要素同士の余白を調整する指定方法です。

p {
  margin-top: 30px;
}

文字

上の余白30px

margin-topで上、margin-bottomが下、margin-rightが右、margin-leftが左の余白を指定します。
pxの他に%指定なども可能です。
またmarginで4方向全ての指定をする事ができます。「margin: 2px 3px 4px 5px;」という形で表現しますが、最初の値から上、右、下、左の余白を指定しています。

id/class名を使って変更する要素を指定する

例えばp要素にcssを適用した場合、ページ全てのp要素に指定が及びます。
ピンポイントで設定したい場合はclassやid単位で指定する事ができます。これらを利用して変更したい要素のみにcssを適用させる事が出来ます。

#hoge {
  margin-top: 30px;
}
.test {
  color: red;
}

idを指定する場合は頭に「#」を付けてhtmlで指定しているID名を続けて記載します。class名で指定する場合は頭に「.(ドット)」を付けてclass名を続けて記載します。

設定が反映されない！そんな時にチェックすべきポイント

ちょっとした記述ミスでCSSを記述したのに表示に反映されないという事が起こります。
良く起こる記述ミスをご紹介するので、設定が反映されない時に確認してみてください。

セミコロン/コロン間違い

下記のようにプロパティと値の間を「;(セミコロン)」にしている、また値の最後を「:(コロン)」にしてしまっていないか確認してみてください。
パッと見が似ているので、良く起こる間違いです。

p {
  height; 30px;
  width: 25%:
}

id/class名の指定間違い

id指定でありながら「.」始まりにしている、またはclass指定でありながら「#」始まりでcssを記述していないか確認してみてください。

<p id="test">id名がtest</p>
 
.test {
  color: blue;
}

このケースではtestはidなのに、cssでは「.test」とclass名での指定になっています。正しくは「#test」と記述します。

締め忘れ

cssの指定の最後は「}」で閉じます。この記載を忘れていないか確認してみてください。

p {
  height; 30px;
  width: 25%:

最後に

今回基本的な内容のみ記載いたしました。もっと理解を深めれば、こんなことまでCSSで表現できるのかと驚かれると思います。
CSSでの表現が広がれば、画像を使う頻度が減るのでページも軽くなります。結果SEO対策ともなるので、ぜひCSSマスターを目指してください。

【初心者向け】CSSの基本を解説