CSSの書き方を学ぶ

2019.11

CSS

この章ではHTMLとCSSの連携と方法と、CSSの書き方について学んでいきます。HTMLに関しての知識は一通りあることを前提として話を進めていきます。HTMLについて学びたいというかたはこちらで学んでください

コンテンツ一覧

HTMLとの連携

HTMLファイルとの連携方法は3つあります。それぞれの適性を理解して取捨選択して使用してください。

インライン、style属性に記載

一つ目の方法としては、要素のstyle属性に記載する方法です。実際の使い方は以下のようになります。

<p style="color:red;">何もしていない場合の表示です。</p>
<p style="color:red;">style属性に記載するとこのように変化します。</p>

何もしていない場合の表示です。

style属性に記載するとこのように変化します。

このようにsytle属性にcssの記述をすることで、見た目を整えることが可能です。HTMLのタグや構造についてを学びたい場合はこちらをご覧ください

style タグに記載

2つ目として、styleタグを使用したスタイルの記載方法を学びましょう。styleタグは基本的には、headの要素として記載します。

<!DOCTYPE html>
<html lang="ja">
<head>	
 <meta charset="utf-8">
 <title>サイトタイトル</title>
 <meta name="description" content="サイトの概要を記載">
 <style>
  .p{
    color:red;
  }
 </style>
</head>
<body>
  <p style="color:red;">style属性に記載するとこのように変化します。</p>
</body>
</html>

style属性に記載するとこのように変化します。

このようにhead内にstyleタグを記載すると、見た目を変化させることができます。

また、HTML5.2よりbodyタグ内にも記載することは可能ですが、head内に記載できる場合は、head内に記載することを推奨します。

外部リンクとして記載

おそらくこの手法がメインになると思われますが、外部リンクとしてcssを反映させる手法です。

head内に以下のコードを記載して連携させます。

 <link rel="stylesheet" href="style.css">

href属性には、作成したcssファイルのパスを記載します。

CSSの基本の書き方

CSSはセレクタとプロパティ、そして値をもちいて記載していきます。

セレクタ{
プロパティ：値
}

このように、セレクタ、プロパティ、値を記載することでスタイルを指定することができます。

それでは、それぞれの書き方について学んでいきましょう。

様々なセレクタ指定の書き方

セレクタには要素名、id（アイディ）、class（クラス）を指定することができます。プロパティと値には、フォントの色を赤にするスタイルを記載します。

//要素名の時
p{
color:red;
}

//idの時
#id{
color:red;
}

classの時
.class{
color:red;
}

上記のCSSを反映させるための、HTMLの記載方法は以下の通りです。

<p>要素名の時のスタイルが反映されます。</p>

<p id="id">idの時のスタイルが反映されます。</p>

<p class="class">要素名の時のスタイルが反映されます。</p>

idで指定する時は＃（シャープ、ナンバー）マークを、classで指定するときは.（ドット、ピリオド）を属性値の頭につけてCSSのセレクタを記載します。

複数のセレクタ指定の書き方

同じスタイルを複数の要素やid,classに反映させたい場合には「,（カンマ）」で区切ることで可能になります。

//pタグ、divタグにスタイルを反映させるとき
p,div{
color:red;
}

//id、classにスタイルを反映させるとき
#id,class{
color:red;
}

子孫セレクタ指定

指定したい要素の親要素の値を記載することによって、条件絞り込みが可能になります。以下のようなhtmlがあったとします。

<p>一つ目のp要素</p>
<div class="parent">
  <p>一つ目のp要素</p>
</div>

3行目に書かれているp要素にだけスタイルを指定したい場合には以下のように記載します。

.parent p{
color:red;
}

一つ目のp要素

「.parent p」のように半角スペースでセレクタを区切ることで絞り込みでのスタイル指定が可能になります。「○○要素の中の、▲▲」を指定したいときにはこの子孫セレクタ指定を使用しましょう。

※半角スペースは注意が必要です。仮に

div.parent{
color:red;
}

このように記載すると、クラス値parentをもつdiv要素という指定になるので気を付けてください。

そのほかの指定方法もありますが、詳しい内容については別に記載予定です。すぐに見たいという方は、「サルワカ」さんの記事をご覧ください。

CSSの優先順位について

セレクタの記載方法によって、反映されるスタイルが変わってきます。優先順位について理解して、思い通りにスタイルを適用させましょう。

記載の順序による優先順位について

HTMLやCSSは行数が若い順から（上から順に）読み込まれます。以下の例でご確認ください。

<p>HTMLの例</p>

p{
color:red;
}

p{
color:blue;
}

上記のような場合、p要素のフォントカラーは何色になるでしょう？

結果は以下の通りです。

HTMLの例

このように、後に記述した「color:blue;」が適用されました。

具体的な記述による優先順位

子孫セレクタなどでより具体的に記述したものの優先順位が高くなります。例題を見てみましょう。

<section>
 <div class="ex">
    <p>HTMLの例</p>
  </div>
</section>

section div.ex p{color:red;}
section .ex p{color:green;}
section div p{color:red;}
div.ex p{color:blue;}
.ex p{color:yellow;}
div p{color:pink;}
p{color:blue;}

このようなhtmlとcssがあった場合、結果は以下のようになります。

HTMLの例

このように子孫セレクタをより詳しく書いた方が、要素＋classセレクタを記載した方が優先順位が高くなります。

ちなみに、例題のCSSは上から順に優先順位が高くなっています。

CSSがうまく反映されない時

上記のような記載方法でCSSがうまく反映されない時は以下の点を確認してみてください。

HTMLに記載されているCSSへのリンクが間違っている
HTMLに記載されているlinkタグの記載が間違っている
HTMLに記載されているidやclassと、cssのセレクタ名が異なる
セレクタ名に全角のスペースが使用されている
セレクタの順番が適切でない
｛｝の記載に漏れや蛇足がある
値の後に「；（セミコロン）」の記載がない

CSSの記載は正確に

セレクタの記述方法によって、記述量が減ります。なるべく記述が少ない方がメンテナンス性も高まりますし、読み込みも早くなります。設計をしっかりすることでよい記述が可能ですが、学びたての場合は、より正確に記載することを意識しましょう。

それでは次のステップとして、プロパティ名と値について学び、レイアウトやデザインをできるよう勉強しましょう。まずはCSSで横並びにするためのプロパティを学んでいきましょう。

横並びの5つの手法をマスターしよう

CSS
CSSの書き方を学ぶ