Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. CSS入門編 - CSS入門編総まとめ

CSS入門編総まとめ

というわけでみなさま大変お疲れ様でございました。こちらがCSS入門編最後の記事となります。

これまで色々CSSの基本について勉強してきましたが、大分CSSというものの扱いに慣れてきた頃ではないでしょうか。

CSSはそこまで複雑な言語というわけではありませんがちょっとややこしいことも多いです。ですので慣れないうちは戸惑ってしまう事も多いかと思いますがめげずに頑張って頂ければ幸いでございます。

というわけで総まとめです。忘れてしまった項目などあれば確認しちゃってください。

基本的なCSS文法

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

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

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

詳細はこちら

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";

詳細はこちら

CSSのインデントマナー

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

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

前者が多数派。

詳細はこちら

CSSのコメントアウト

コメントアウトは以下。

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

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

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

詳細はこちら

class属性とid属性

記述例は以下。

<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セレクタ』と呼ぶ。その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プロパティ

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

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

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

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

詳細はこちら

widthプロパティとheightプロパティ

『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』プロパティで設定する。取れる値は以下。

repeat 背景画像が縦横繰り返しで表示されます。これが初期値です。
no-repeat 繰り返し表示なし(1回だけしか表示しないという意味です)
repeat-x x軸方向(横方向)にのみ繰り返し表示
repeat-y y軸方向(縦方向)にのみ繰り返し表示

記述例は以下。

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;
}

詳細はこちら

以上となります。これまでお付き合い頂き誠にありがとうございました。

さて今後の方向性でございますが引き続き当サイトでウェブプログラミングの勉強をしたいぜ、という粋な方はまだ紹介しきれていないことが沢山ありますのでこのままCSS中級編に進んで頂ければと思います。

中級編では位置配置系のプロパティやもっと高度なCSS文法、そしてマウスイベントなどの少しハイレベルなCSS記述について紹介しています。作れる幅が広がるので楽しめるかと思います。

というわけでこれまでお付き合い頂き誠にありがとうございました。このような駄文をここまでお読み頂き非常に光栄です。当サイトの情報があなたの知力となりますように。それではまたどこかでお会いしましょう。

ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。