CSSの基礎知識まとめ｜書き方や名称、セレクタの指定方法など

WordPressのアフィリエイトで稼ぐ人生を始める-サトシ TOP
未分類
CSSの基礎知識まとめ｜書き方や名称、セレクタの指定方法など

[公開日] 2014/4/27　[未分類]

Webサイトを作成したり運営するならぜひ知っておきたい、CSSの基礎知識をまとめておきます。基本的なことを知っていると後々応用が効くようになるので、ぜひ覚えておきたいところです。

HTMLとCSSの関係
CSSでは「改行、半角スペース、タブ」は自由に使用できる
CSSの3つの書き方
CSSファイルでコメントアウトする方法
CSSの各部分の名称
セレクタの指定方法
タグと要素の違い

HTMLとCSSの関係

現在のWebサイトは、HTML（文章の構造）とCSS（見た目）によって構成されています。

見た目の制御をCSSファイルとして外部に設置することで、Webサイトのデザインやメンテナンスが非常にしやすくなりました。

HTMLのデータを軽くし、それと共にさまざまな端末でのサイト表示最適化も可能にするHTML＋CSSというWebサイトの構成は、今後も広く利用されていくことになりそうです。

CSSでは「改行、半角スペース、タブ」は自由に使用できる

.sample {color: red;}

.sample { color : red; }

.sample {
color: red;
}

上記の3つは、CSSではすべて同じ「文字を赤くする」という意味で機能します。このように、CSSを編集するときには自由に改行や半角スペースを使用してOKです。

ただ、プログラムの実行には影響しませんが、いつも同じように書いておいた方が間違えにくいので、一定の書き方をする習慣を身につけましょう。

CSSの3つの書き方

インラインに書く
headタグ内のstyleタグに書く
外部のCSSファイルに書く

CSSの書き方は上記の3つ。この中で推奨されるのは3番です。他の2つはHTMLファイル内に直接書くので、外部にデータを置くというCSSのメリットが失われてしまいます。

CSSの表示をちょっとテストする場合などは1や2でも構いませんが、常に使用する記述方法としてはあまり用いられません。

それぞれの書き方を順番に説明しておきます。

1.インラインに書く

HTMLタグの中に、「半角スペース」「style=””」と続けて「””」の間にCSSを記述します。

<span style="color: red;">文字を赤くします</span>

＜表示結果＞
文字を赤くします

2.headタグ内のstyleタグに書く

<head></head>タグの中に、<style></style>タグを設置して、その中にCSSを記述します。

＜HTMLファイル＞

<head>
 <style>
  span {color: red;}
 </style>
</head>
 
<span>文字を赤くします</span>

3.外部のCSSファイルに書く

HTMLファイルには記述せず、外部のCSSファイルに記述します。HTMLの<head></head>タグ内で、読み込むCSSファイルを指定する必要があります。

＜CSSファイル＞

span {color: red;}

＜HTMLファイル＞
<head>
 <link rel="stylesheet" href="CSSファイル名">
</head>
 
<span>文字を赤くします</span>

CSSファイルでコメントアウトする方法

コメントアウトとは、プログラムソース中にコメントを書き込むことを言います。

/* コメントが書ける */

/*
複数の行でもコメントが書ける
複数の行でもコメントが書ける
複数の行でもコメントが書ける
*/

「/*」から「*/」部分までは、プログラムが実行されなくなります。一時的にCSSを実行したくない場合、ソースをコメントアウトして様子を見たりもできます。

※閉じタグ「*/」の直前が全角文字だとコメントアウトが成立しないので、半角スペースを入れるようにしておきましょう。

CSSの各部分の名称

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

セレクタ：CSSを適用する対象
プロパティ：どのようなデザイン、効果を適用させるか
値：変化の大きさや度合い、種類を指定する

例.

.sample { color: red; }
 
#test { font-size: 20px; }
 
span { background-color: green; padding: 20px; }
 
p { 
        border-color: red; 
        border-width: 10px;
        border-style: solid;
}

プロパティと値はセットになっていて、続けて書いていくことができます。
（前述の通り、改行や半角スペースは自由に使用してOK）

セレクタの指定方法

HTMLタグ（要素）をそのまま指定する
class指定をする
id指定をする

例.

＜HTMLタグ（要素）のspanをそのまま指定する＞

span { color: red; }
 
<span>文字を赤くする</span>

＜sampleというclassを作って指定する＞

.sample { color: red; }
 
<span class="sample">文字を赤くする</span>

＜testというidを作って指定する＞

#test { color: red; }
 
<span id="test">文字を赤くする</span>

class指定は、セレクタの最初の文字が「.」になります。class指定はHTML1ページ中に何度も繰り返して指定できます。

id指定は、セレクタの最初の文字が「#」になります。id指定はHTML1ページ中に1度しか使用できません。

他にもセレクタを組み合わせて使うことで様々な指定方法が出来ます。ちょっと難しいかもしれませんが、いろんな指定方法があるんだなーと思っておきましょう。

*（アスタリスク）: すべてのセレクタを指定する
a,b: 並列に指定する　複数のセレクタを一気に指定できる
a b: aよりも下の階層のbというセレクタを全て指定する　つまり孫要素以下もすべて指定する
a > b: aのひとつ下の階層（子要素）のみbというセレクタを指定する　孫要素以下は含まない
a + b: aの直後のbというセレクタを指定する　間になにか挟まると通じない
ab: aかつb　p要素でかつclass指定などの使い方をする