2019/06/03

【CSS基礎】基本的な書き方
【CSS基礎】基本的な書き方

    目次
  1. CSSの基本的な書き方
  2. CSSの記述場所
  3. セレクタについて
    1. IDで指定する場合
    2. クラスで指定する場合
    3. 要素の中にある要素を指定する場合
    4. 複数の要素にスタイルを指定する場合
  4. 継承について
    1. 継承されないプロパティもあるので気を付けよう

CSSの基本的な書き方

CSSは「セレクタ」「プロパティ」「値」の3つで構成されています。

セレクタはスタイルを適用する要素を示しています。

プロパティは「何の」スタイルを変えたいかを指定します。

たとえば、文字色を変えたいとか、大きさを変えたいなどを指定します。

値はプロパティの具体的にどうするかを指定できます。

プロパティで文字色を変えたいとき、値には赤にするのか

青にするのか等を指定できるということです。

書き方は「セレクタ{プロパティ: 値}」と書きます。

CSSの基本
p { background: #FFDBC9;}

↑これはpタグ要素の背景を薄いオレンジで塗ることを表しています。

文字の背景を塗ります。

文字の背景を塗ります。←CSSを適用した場合

CSSの記述場所

CSSの記述場所は3つあります。HTML内に書く場合は2種類あります。

●HTMLの中に書く場合

・タグにピンポイントで記述する場合の例

 <p style="background: #FFDBC9;">

・スタイル要素をhead要素内に書く場合の例

 <style>
 p { background:#FFDBC9;}
 </style>

●CSSファイルに書く場合

HTMLファイルのhead要素に下記のようにlink要素を記述しましょう。

<link rel="stylesheet" type="text/css" href="sample.css">

href属性の部分には、自分で作成したCSSファイルのファイル名を記述します。

「sample.css」というファイルを自分で作成し、読み込みたい場合は

href="sample.css"」と記述します。

その他のrel要素やtype要素はコピぺで大丈夫です。

「sample.css」にCSSを書く場合は、

「sample.css」というファイルを作成し、

下記のようにスタイルを記述していきます。

sample.css の例

p { background:#FFDBC9;}
div { font-size: 20px;}

CSSファイルに書く場合は、ほかのHTMLからもlink要素で読み込めますので

同じCSSファイルを使いまわすことができます。

基本的に1ページごとに1HTMLファイル作成するわけですが、

そのたびにCSSを記述していたらめんどくさいですよね?

いろんなページで使う(共通)で使うスタイルは、CSSファイルに記述してしまいましょう。

あとからCSSを修正する場合にも、CSSファイルを直すだけになるので

修正しやすくなります。

HTMLファイル全部を修正するのは大変ですしね。

CSSの記述場所

前述したセレクタについてですが

たとえば

p { background:#FFDBC9;}

とCSSを記述すると

全てのP要素に対してスタイルを適用することになります。

したがって<p>~</p>と書くたびに

背景色が自動で#FFDBC9になります。

でも場合によっては、

「ここのP要素の行は適用したくない!」

とか

「別のスタイルを適用させたい!」

というパターンがあると思います。

その場合は

IDやクラス名で指定します。

●IDで指定する場合

#(シャープ)+ID名で指定します。

・CSS

#rmarker {background:#ffcdd2;}

・HTML

<p id="rmarker">サンプル</p>

●クラスで指定する場合

.(ドット)+クラス名で指定します。

・CSS

.rmarker {background:#ffcdd2;}

・HTML

属性をclassにして""に属性名を指定します。

<p class="rmarker">サンプル</p>

●要素の中にある要素を指定する場合

たとえばdiv要素の中のP要素を指定したい場合は

・CSS

div p {background:#ffcdd2;}

と指定します。

・HTML

div要素の中のP要素に適用されます。

<div>
    <p>サンプル</p>
</div>

●複数の要素にスタイルを指定する場合

たとえばdiv要素とp要素を指定したい場合は

・CSS

div, p {background: #ffcdd2;}

と指定します。

・HTML

div要素とp要素のどちらも適用されます。

<div>サンプル</div>
<p>サンプル</p>

継承について

プロパティは親から子へ継承されます。

たとえば以下のようなソースがあるとします。

・HTML

<div>
	<h1>サンプル</h1>
	<p>サンプル</p>
</div>

・CSS

div {color: #ffcdd2;}

h1要素とp要素はdiv要素に囲まれており、子要素となります。

その場合、

h1要素にもp要素にも「color: #ffcdd2;」が適用されます。

なので

h1 {color: #ffcdd2;} や p {color: #ffcdd2;}と書く必要がないのです。

少ないコード量でCSSを書くには、覚えておいたほうがよいでしょう。

●継承されないプロパティもあるので気を付けよう

継承は便利ですが、中には継承されないものもあります。

たとえばよく使われるものだと

  • border
  • background
  • margin
  • padding
  • height
  • widli
  • display
  • overflow
  • position

です。

文字色や文字サイズなどは継承されると便利ですね。

しかしborderが継承されてしまうと線だらけになってしまいます。

paddingやmarginも同様に幅がずれまくりますよね。

一部プロパティ以外は継承されないと考えたほうが良いです。

えま
えま
主に英語、プログラミング系の情報を発信しています。某SIer企業に属していました。写真の子は飼っているチワワ♀のチーコです。カメラを向けるとすぐにカメラ目線になります。
Archive