CSS入門編総まとめ

基本的なCSS文法の記述例は以下。『*』(アスタリスク)を使うと全ての要素を対象にすることができる。『*』で指定されたセレクタを『ユニバーサルセレクタ』と呼ぶ。

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

CSS文法の構造や名前などは以下。

詳細はこちらへ

記述場所、及び記述方法は以下の3つ。

• タグのstyle属性に直に記述
• styleタグを使用して記述
• 外部ファイルのCSSを読み込ませる

style属性に記述するサンプルは以下。

<p style="font-size: 18px;">ここのフォントサイズが18pxになります</p>

styleタグを使用するサンプルは以下。

<style>
    p {
        font-size: 18px;
        font-weight: bold;
    }
</style>

外部CSSファイルを読み込ませる場合のサンプルは以下。拡張子は『.css』。

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

外部CSSファイルを読み込ませる場合は文字エンコーディングに注意。読み込ませるCSSファイルの先頭に以下のように文字エンコーディングの指定をする必要がある。

@charset "utf-8";

詳細はこちらへ

大きくわけて以下の二種類。

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

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

前者が多数派。

詳細はこちらへ

コメントアウトは以下。

/* ここがコメントだよ */
p {
    /* font-size: 18px; */
    font-weight: bold;
} 

/*
    コメントは複数行でも記述できるよ。
    説明やメッセージとか残すことに使えるよ。
*/

コメントアウトの中にコメントアウトを入れたりしないように注意。

詳細はこちらへ

記述例は以下。

<p id="test">ここにスタイルを適用するよ</p>

<p class="test">ここにスタイルを適用するよ</p>

<p id="test_id" class="test_class">ここにスタイルを適用するよ</p>

一般にid属性の値は『id名』、class属性の値は『クラス名』(class名)と呼ばれ、使用できる文字列はアルファベット、数字、『-』(ハイフン)、『_』(アンダースコア)。ただし、先頭に数字または『-』は使用不可。id名とクラス名で多少の違いがあるがほぼ同じネーミングルールと考えて良い。

詳細はこちらへ

記述例は以下。

p.test, div.test {
    font-size: 18px;
    font-weight: bold;
}
.test1.test2 {
    font-size: 18px;
    font-weight: bold;
}

クラス名が付属したセレクタを『クラスセレクタ』と呼ぶ。そのクラス名がついた全ての要素に適応させたい場合の『*』は省略されて書かれるのが一般的。

.test {
    font-size: 18px;
    font-weight: bold;
}

同じHTMLページ上で複数の要素に対し同じクラス名を持たせることができる。

<div class="test">これはクラス名だから複数存在してOKだよ</div>
<div class="test">これはクラス名だから複数存在してOKだよ</div>

詳細はこちらへ

記述例は以下。

id名が付属したセレクタを『idセレクタ』と呼ぶ。そのid名がついた全ての要素に適応させたい場合の『*』は省略されて書かれるのが一般的。

#test {
    font-size: 18px;
    font-weight: bold;
}

同じ要素に対して複数のid名を指定することはできない。

<div id="test test2">これはだめだよ！</div>

同じHTMLページ上で複数の要素に対し同じid名を持たせることはできない。

<div id="test">同じtestってid名がついてるからこれはダメだよ</div>
<div id="test">同じtestってid名がついてるからこれはダメだよ</div>

<div class="test">同じtestだけどこっちはクラス名だからOKだよ</div>
<div class="test">同じtestだけどこっちはクラス名だからOKだよ</div>

詳細はこちらへ

文字色を変更するCSSプロパティは『color』。背景色を変更するCSSプロパティは『background-color』。値は『ウェブカラー』もしくは『色の名前』を記述する。『white』,『black』,『red』等、名前で指定することも可能。記述例は以下。

p {
    color: red;
    background-color: #000000;
}

詳細はこちらへ

文字サイズを変更するプロパティは『font-size』。使用する単位で一般的なのは『px』もしくは『rem』。文字を太字にするプロパティは『font-weight』。値は『bold』を指定すればOK。

#font_32px {
    font-size: 32px;
}
#font_w {
    font-weight: bold;
}

文字の装飾は『text-decoration』プロパティで可能。下線を付けたい場合は『underline』、打ち消し線を付けたい場合は『line-through』、上線を付けたい場合は『overline』と値に記述する。

#font_32px {
    font-size: 32px;
}
#font_uline {
    text-decoration: underline;
}
#font_tline {
    text-decoration: line-through;
}
#font_oline {
    text-decoration: overline;
}

詳細はこちらへ

文字の位置は『text-align』プロパティで調節できる。その際は内包している子要素がインラインレベル要素やインラインブロック要素である必要がある。

p.text_left {
    text-align: left;
}
p.text_center {
    text-align: center;
}
p.text_right {
    text-align: right;
}

詳細はこちらへ

『display』プロパティは要素の表示形式を変更できるプロパティ。値に『block』と記述するとその要素は『ブロックレベル』としてレンダリングされ、値に『inline』と記述すると『インラインレベル』としてレンダリングされる。記述例は以下。

.block_erem {
    display: block;
}
.lnline_elem {
    display: inline;
}

基本的なレイアウトとしてブロックレベル要素はデフォルトの状態での横幅の大きさは親要素の100%の幅でレンダリングされ、前後に改行が入る。インラインレベル要素は内容物の横幅によって横幅が可変し、前後に改行は入らない。

この『display』プロパティの値は他のCSSプロパティに影響を与えることがある。『display』プロパティの値の初期値は要素によって違いがあるのでそこも注意。

詳細はこちらへ

『width』プロパティで幅、『height』プロパティで高さを調節できる。数値で指定する場合の単位は基本的に『px』か『%』しか使われない。値の数値が『0』の場合のみ単位を省略することができる。値の初期値は『auto』。置換要素以外のインラインレベル要素では反映されないので注意。

p {
    width: 100px;
    height: auto;
}
div {
    width: 0;
}

値を『%』で指定した場合は親要素の大きさが基準となる。画像ファイルのサイズなどが基準となるわけではないので注意。

詳細はこちらへ

背景画像を指定できるプロパティは『background-image』。パスの記述部分は『'』か『"』で括っても括らなくてもOK。

p {
    width: 300px;
    height: 300px;
    background-image: url("image/img1.png");
}
div {
    width: 300px;
    height: 300px;
    background-image: url('image/img2.png');
} 
span {
    background-image: url(image/img2.png);
} 

デフォルトでは指定した背景画像は繰り返されて表示される。変更したい場合は『background-repeat』プロパティで設定する。取れる値は以下。

記述例は以下。

p {
    background-image: url(https://wp-p.info/reps/css-beginner/img/19_01.jpg);
    background-repeat: no-repeat;
}
div {
    background-image: url(https://wp-p.info/reps/css-beginner/img/19_01.jpg);
    background-repeat: repeat-x;
}
span {
    background-image: url(https://wp-p.info/reps/css-beginner/img/19_01.jpg);
    background-repeat: repeat-y;
}

詳細はこちらへ