【8/31まで 今季最大のセール開催中！】Udemyの人気コースが今なら1,200円から!!

【CSS3】基礎知識

【CSS3】基礎知識

SHARE

目次

目次へ

CSSの構成

css セレクタ 値 プロパティ – Google 検索

CSSは「セレクタ」「プロパティ」「値」の３つで構成されている。
セレクタは「どこ」にあたり、Styleを設定する要素を示す。
プロパティは「何を」にあたり、値は「どうする」にあたる。
プロパティと値は一対で扱うため、例えば「文字色を赤色にする」であれば
「color:#ff0000;」のように記述する。
プロパティと値はコロンで区切り、プロパティと値のセットをセレクタの後に｛｝で囲む。

p {
    color: #ff0000;
    font-size: 20px;
}

CSSを記述する場所

CSSを記述出来る場所は以下の３つ。

１．インライン

インラインはHTMLの中にタグを直接記述する方法。
構文：style=”プロパティ：値；”
※複数指定する場合は全体を””で囲むこと！

/* ひとつだけ指定した場合の例 */
<p style="font-size:20px;"></p>
/* 複数指定した場合の例 */
<div style="height:50px;width:50px;background-color:red;color:black">aaa</div>

２．エンベッド

エンベッドはhead要素内にstyle要素を書き、その中にCSSを書く方法。

<head>
    <style>
        p {font-size: 20px;}
    </style>
</head>

３．リンク

CSSを外部ファイルとして扱い、それをHTMLファイルから参照して利用する手法。

<link rel="stylesheet" href="sample.css">
/* sample.cssの中に記述する。 */
p {
    color: #ff0000;
    font-size: 20px;
}

セレクタについて

セレクタはその名のとおり「選択するもの」を示す。

タイプ(要素)セレクタ

タイプ(要素)セレクタは、HTMLのタグ名をそのまま指定して次のように記述する。
タイプ(要素)セレクタを用いると、文書内の同じ要素すべてが対象となる。
次の記述ではページ内のすべてのh2要素に対して指定した修飾が適用されることになる。

h2 {font-size: 25px;}

IDセレクタ

IDセレクタは「#+ID名」で構成されるセレクタ。

#id1 {width: 1920px;}

クラスセレクタ

クラスセレクタは「.+クラス名」で構成されるセレクタ。

.class1{color: #000000;}

子孫セレクタ(要素の中にある要素を選択するセレクタ)

子孫セレクタは要素の親子関係を利用するセレクタ。
タイプセレクタやIDセレクタを組合せて記述する。
セレクタとセレクタの間は半角スペースで区切って記述する。
例えば次のように記述すると、「header要素の中にあるすべてのh1要素に対して適用する」という解釈になる。

header h1 {margin: 0;}

次の例はID名がmainの要素の中のh1要素に適用する。

#main h1 {margin: 0;}

複数のセレクタに同じスタイルを適用させる

複数セレクタは、セレクタを２つ以上まとめて記述する手法。
これはタイプセレクタやIDセレクタなど、どんな組合せでも用いることができる。
セレクタとセレクタの間は半角カンマ区切りで記述する。

th,td { vertical-align: top;}

全称セレクタ

全称セレクタはすべての要素を対象とするセレクタで「*」のようにアスタリスクを用いて次のように記述する。

#body * { vertical-align: top;}

セレクタの使い分け方

セレクタは全体から細部へ搾り込むように指定するのが望ましい。

  1. タイプセレクタで大まかな共通のスタイルを設定する。
  2. IDセレクタやクラスセレクタは固有のブロックの固まりなど、特定部分のスタイル設定に使用する。
  3. 子孫セレクタは１つ上の階層を基準としてその中にあるものを選ぶときに使用する。
    例えばヘッダーとメイン部分でp要素の修飾を変えたい場合は、
    「#header p」のように範囲＋ピンポイントな要素で選択するようにする。
  4. 複数セレクタは対象範囲の広さとは関係なく、同じスタイルを効率よく適用したいときに使用する。th,tdなど関連があるスタイルに適用するのが一般的。h1やformなど関連性の薄い要素に対してマイルール的に設定すると、メンテンナンス性が損なわれるので注意。

擬似クラス

擬似クラスは特定の条件によって選択するセレクタを指す。
li:last-child{}のように、要素の後ろにコロンとセレクタ名を組合せて記述する。

疑似要素

疑似要素は、要素にテキストや画像を追加することができる。
プロパティにcontentを使用することにより、CSSだけでテキストなどをHTMLに表示させることができるようになる。

CSSの競合、優先順位

CSSの適用順は次のとおり。
「link要素 → style要素 → インライン指定」
つまり、インライン指定で記述すると、link要素で指定したスタイルは無効化される。
同じ場所に書かれている場合、セレクタの種類を見て次のとおりに優先される。
「タイプセレクタ → classセレクタ/疑似要素 → IDセレクタ」
優先順位が同じ場合は、後に書いた方が優先される。
子孫セレクタのように複数のセレクタを組合せる場合、「個別性」というチェック式に点数を付けられる計算によって優先順が決定する。
セレクタに含まれるID名やクラス名、要素名などをカウントし、点数が大きいものほど優先順位が高くなる。

スタイルの継承

CSSにはHTMLの親子関係に沿ってスタイルを継承していく仕組みがある。
たとえばbody要素に対して文字色を青にする指定をすると、その中にあるh1要素やp要素の文字も同じように青くなる。

inheritで強制的に継承する

継承されないスタイルを強制的に継承させたい場合は、そのプロパティの値として「inherit」を指定する。

body { border-top: 10px solid #ff6e6e;}
h1,p,strong,img{ border-top: inherit}

!importantで強制的に順位を上げる

スタイルの優先順位を強制的に上げるには「!important」を使用する。
プロパティの値の後ろに記述すると、そのプロパティはセレクタの優先順位に関係なく、強制的に適用させることができる。

h1 { color: red !important;}
.title{color: blue;}

文字サイズを設定するfont-sizeプロパティ

相対単位

相対単位は、親要素のサイズに応じて実サイズが決定される。
親要素が無い場合は、Webブラウザのデフォルト値が基準となる。
一般的なブラウザは16pxが標準。

  • px:画面のピクセルで指定。
  • % :親要素のサイズに対する%で指定。
  • em:欧文における大文字の「M」を基準とした単位。1文字文の倍数と捉えても良い。
  • ex:欧文に置ける小文字の「x」の高さを基準とした単位。
  • rem:emのサイズを基準としつつ、rootに倒して相対的にフォントサイズを決定する。

絶対単位

親要素のサイズには影響されず、指定した値はどんな環境でも均一に見える。
mmやcmは印刷向け。

  • pt:ポイント
  • mm:ミリメートル
  • cm:センチメートル
  • in:インチ(1in=約25mm)

色の指定方法

色を指定するにはcolorプロパティを使用する。
16進数指定法の場合。
16進数は光の三原色で色を指定する手法の１つで上2桁が赤、次の2桁が緑、下2桁が青を指す。

h1 { color: #123456;}

rgb関数の場合

左から赤、緑、青をそれぞれ0~255の数値又は、0%～100%のパーセンテージで半角カンマ区切りで指定する。
透明度指定を加えたRGBAではさらに0～1の範囲で不透明度（アルファ値）を指定する。

h1 { color: rgb(0,86,180);}
h2 { color: rgba(0,86,180,0.5);}

hsl関数の場合

色相（Hue）、彩度（Saturation）、輝度（Lightness）の３つで指定する方法。
同じ色を保って明るさや鮮やかさだけを変化させることが容易。
色相は0～360度の角度で指定する。彩度輝度をそれぞれ半角カンマで区切り0%～100%で指定する。
透明度指定はRGBAと同様。

h1 { color: hsl(100,50%,50%);}
h2 { color: hsla(100,50%,50%,0.5);}

ボックスモデル

CSSでレイアウトを自在にコントロールするためには「ボックスモデル」の知識が必要不可欠。
CSSではブロックレベルの性質を持つ要素に対して、サイズと間隔を設定できる。

ボックスモデルは4種類の概念で構成されている。
要素の内容(content)
内容とボーダーの余白であるパディング(padding)
枠線のボーダー(border)
ボーダーの外側にある余白マージン(margin)
これらの領域は上下左右(top,bottom,left,right)の4辺に分けられ、CSSで個別にスタイルを適用することができる。

マージン(margin)

マージンは要素の外側の間隔を指定するもの。
隣り合う要素との距離を調整するために使用する。
単一指定の場合

p { margin: 10px;}/*すべての辺に対して指定*/
p { margin-top: 10px;}/*上辺のみに対して指定*/
p { margin-bottom: 10px;}/*下辺のみに対して指定*/
p { margin-right: 10px;}/*右辺のみに対して指定*/
p { margin-left: 10px;}/*左辺のみに対して指定*/

複数指定の場合①

p { margin: 10px 20px;}/*上下に10px,左右に20px指定*/

複数指定の場合②

p { margin: 10px 20px 30px 40px;}/*指定した順に時計回りで上右下左の順で指定*/

パディング(padding)

パディングは要素の内側の間隔を指定するもの。
borderとcontensの間隔を調整するために使用する。
基本的な使い方はmarginと同じ。

ボーダー(border)

ボーダーは要素の四辺に枠線を付けるもの。
値の指定は線種、太さ、色の３つを半角スペース区切りで指定する。
これらの順序は変わってもOK

p { border: solid 1px #990000;}

要素(content)のサイズ

要素にはborder,padding,marginといった余白以外にも、要素に対してサイズを指定することができる。
widthプロパティは、要素の横幅を指定することができる。
固定で表示する場合は、px指定、親要素や文字サイズに合わせて可変にする場合は、%指定やem指定にする。
heightプロパティは、要素の高さを指定することができる。
高さはcontentのテキストや子要素の高さに合わせて自動調整されるのでわざと指定しない場合もある。

ボックスモデルの計算方法

要素(content)の回りにborder,padding,marginが付いていると考えるとわかりやすいかも。
「ボックス幅=marginの左右+borderの左右+paddingの左右」で求めることが出来る。
例えば、「400pxの幅で作りたいからといってwidthに400pxを指定」とすると、400pxのほかにborder,padding,marginが足されることになるため、
結果的に実際の表示幅が400pxを超えてしまうので注意が必要。

フロート(Float)を利用したレイアウト方法

floatプロパティ

要素を浮動させて左右にスライドさせ、段組みを実現する。
また画像の横にテキストを回り込ませる目的でも使用される。カラムレイアウトを実現するために使われている一般的な手法。

divやpなどのブロックレベルの性質を持つ要素は
横並びにはならず、縦方向に並んで表示される。
またこれらはデフォルトで横幅の情報を持っていてブラウザいっぱいまで広がっているため、
次の要素がその下に表示される。この特性を変えるのがfloatプロパティの役割。

floatプロパティにはleft,right,noneの３つの値を指定することができる。デフォルトはnone。
float:leftを指定すると、その要素は浮いた状態になり、そのまま左へスライドする。
浮いているので後続の要素は重なるように入り込んでくる。

ディスプレイ(display)を利用したレイアウト方法

displayプロパティ

ブロックレベルやインラインなどの特性を切り替えることが出来る。
h1,p,li要素などはブロックレベルの性質をもっているがdisplayプロパティを使うことでこの性質をコントロールすることができる。

値 動き
none 要素を非表示にする。(レイアウトに影響しなくなる。)
inline インラインにする。
block ブロックレベルにする。
inline-block ブロックレベルとインラインの両方の性質を持つインラインブロックにする。
幅がcontentによって可変になり、インラインのように横に並ぶが、幅や高さやマージンを設定することができる。
table-cell td要素と同じ挙動になる。

ポジション(position)を利用したレイアウト方法

positionは数値で座標を指定して位置を揃える手法。
よく使われる配置方法としてrelative(相対配置)とabsolute(絶対配置)の２つがある。

値 動き
relative 相対配置の意。その要素が初期状態で表示されていた位置を基準にtopプロパティ等で相対的に位置をずらす。
その要素が元々入っていたスペースは確保され、ほかの要素は入り込めない。
absolute 絶対配置の意。基準となる要素からの位置を指定する。
その要素が元々入っていたスペースは確保されず、ほかの要素は入り込むことができる。
static positionプロパティの初期値。静的配置の意。初期状態に戻したい場合はこれを指定する。(要素の元々の位置を見たい場合に有効。)
fixed 固定配置の意。absoluteと同じく絶対配置の指定になるが、違いはスクロールしても表示位置が固定されていること。
ブラウザの表示幅やリサイズに影響されることなく、常に指定した位置に表示されるようになる。
absoluteと同じくその要素が元々入っていたスペースは確保されず、ほかの要素は入り込むことができる。

リンクやマウスオーバー時のスタイル指定

値 動き
:hover マウスポインタが乗った状態
visited リンクが訪問済み
first-child 最初の子要素。
last-child 最後の子要素。

要素を透明にする。opacityプロパティ

半透明時にはその背景色や画像が透けて見えるようになる。
→つまり後ろに隠れている要素が見えるように鳴る。
数値は0～1の範囲で指定することができ、0が完全な透明、1が不透明を指す。

Tips 画像の下の余白を調整する方法

img {vertical-align: bottom;}

グラデーション

線形グラデーション

background: linear-gradient(to right,#00f 0%,#fff 100%);

円形グラデーション

background: radial-gradient(circle,#00f 0%,#fff 100%);

border-collapseプロパティ

このプロパティは隣接するセル同士の重なりを指定するもの。
デフォルトではseparateが指定されているため、セル同士は離れて表示される。
collapseを指定すると、セルのボーダー部分が重なり合って表示されるようになる。
境目を1pxで表現できるため、シャープな印象の表組みが作れる。

繰り返しの調整に使うnth-child擬似クラス

以下の例は５の倍数の要素に対して右マージンに0を指定する。

#id:nth-child(5n) {margin-right: 0;}

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【HTML5】 ブログ記事でHTMLのソースコードを背景色付きで掲載する方法
【HTML5】ブログ記事でHTMLのソースコードを背景色付きで…

次の記事

【CSS3】子孫セレクタを理解する
【CSS3】子孫セレクタを理解する