HTML-CSS入門講座

濱屋太郎

Lesson-3

Lesson-3
CSSでデザインを始める前に

目次

3.1 はじめに

3.1.1 概要

  • CSSは、Webページのスタイル(見栄え)を定義するものであり以下の分類となります。
    • レイアウト系プロパティ
    • ボーダー系プロパティ
    • パディング系プロパティ
    • マージン系プロパティ
    • レイアウト関連その他のプロパティ
    • テキスト系プロパティ
    • フォント系プロパティ
    • リスト系プロパティ
    • バックグランド系プロパティ
    • テーブル系プロパティ

3.2 CSSの基本構造

3.2.1 CSSの構造(HTMLファイルとは別に記述する場合)

CSSファイルをHTMLファイルと別ファイルで記述した時は、HTMLファイルのheadタグ内(<head>~</head>の間)に以下の記述を行いCSSファイルの取り込みを行います。

<link href="(スタイルシートファイルのパス名)" rel="stylesheet" type="text/css">
CSSの構造(別ファイルで記述する場合)

3.2.2 CSSの構造(HTMLファイル内に記述する場合)

HTMLファイル内にCSSを記述する時は、HTMLファイルのheadタグ内(</head>の直前が良い)に以下の記述を行います。

CSSの構造(HTML内に記述する場合)

3.2.3 CSSの構造(HTMLタグにインラインで記述する場合)

HTMLタグにインラインで記述する時は、スタイル(style)属性を使用して以下の記述を行います。

CSSの構造(HTMLにインラインで記述する場合)

3.2.4 注意事項

(1) 可読性について

CSSでは基本的に(意識して書く場合を除いて)空白や改行は無視されます。
以下の書き方は同一の解釈となりますが可読性が確保できるような書き方を行うように心がけてください。


p { font-size: 140%; font-weight: bold; color: red; }

p {
	font-size: 140%;
	font-weight: bold;
	color: red;
}

3.3 ボックスモデル

3.3.1 ボックスモデルの構造

Webページのレイアウトを作るためには領域定義が必要です。領域の定義にはボックスモデルが適用されコンテンツ(content)、パディング(padding)、ボーダー(border)、マージン(margin)を組み合わせて領域が定義されます。

ボックスモデルの構造

(1) content

要素の内容であるコンテンツ(文字・図・写真など)の領域で領域のサイズはwidthプロパティ(幅)とheightプロパティ(高さ)で指定します。

(2) padding

要素の内側の余白でpaddingプロパティで指定します。

(3) border

要素の枠線でborderプロパティで指定できます。

(4) margin

要素の外側の余白でmarginプロパティで指定します。

(5) 注意事項

  • 「padding、border、margin」は上下左右を独立して指定することもでき、それぞれのプロパティに「-top(上)、-bottom(下)、-right(右)、-left(左)」を付与します。
  • ボックスのサイズは、「ボックスサイズ = content + padding + border + margin」で計算できます。
  • widthプロパティ、heightプロパティの指定値は、box-sizingプロパティの指定値により意味が異なります。
    box-sizing: content-box;(初期値)
    widthプロパティ・heightプロパティの指定値 = content領域の値
    box-sizing: border-box;
    widthプロパティ・heightプロパティの指定値 = content + padding + border領域の合計値

3.3.2 ボックスモデルの表示ルール

ボックスモデルの表示ルールはタグの種類によって異なりますがdisplayプロパティを使用することで変更可能です。

インライン
(display: inline;)
インラインブロック
(display: inline-block;)
ブロック
(display: block;)
主な用途文章内文章内・横並びレイアウト・サイズ調整
主なタグa,strong,spanなど
(テキスト分類)
imgなど
(コンテンツ埋め込み)
h1,p,ul,li,divなど
(セクション分類)
(コンテンツ分類)
並び方
初期サイズ内容サイズ内容サイズ横は100%、縦は内容
widthとheight指定可能指定可能
padding上下左右 *1上下左右上下左右
margin左右のみ上下左右上下左右
line-height外側にかかる内側にかかる内側にかかる
text-align指定可能指定可能
vertical-align指定可能指定可能

*1 余白はとってくれますが上下の要素の位置には影響しません。

3.4 セレクタの記載方法

3.4.1 セレクタの種類

(1) 全称セレクタ(*)

* { (プロパティ): (値); }

アスタリスク(*)を指定すると、すべての要素に適用するスタイルを指定します。

使用例


* { color: red; }
p * { color: red; }

(2) 型セレクタ

(要素名) { (プロパティ): (値); }

(要素名)にHTMLの要素名(タグ名)を指定すると、その要素名に合致する要素に適用するスタイルを指定します。

使用例


h1 { font-size: 140%; }
p { color: red; }

(3) idセレクタ(#)

#(id名) { (プロパティ): (値); }

(id名)にハッシュタグ(#)を付けてid名を指定すると、そのid名に合致する要素に適用するスタイルを指定します。

使用例


#box1 { font-size: 140%; }
div#box2 { color: red; }

(4) classセレクタ(.)

.(class名) { (プロパティ): (値); }

(class名)にピリオド(.)を付けてclass名を指定すると、そのclass名に合致する要素に適用するスタイルを指定します。

使用例


.text1 { font-size: 140%; }
p.text2 { color: red; }

(5) 子孫結合子セレクタ

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

(セレクタ)に複数のセレクタをスペースで区切って指定すると、ある要素の配下にある要素にスタイルを指定します。

使用例


div.box1 p { font-size: 140%; }
.box2 .text2 { color: red; }

(6) 子結合子セレクタ(>)

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

(セレクタ)にセレクタを大なり(>)で区切って指定すると、ある要素の直下にある要素にスタイルを指定します。

使用例


div.box1 > p { font-size: 140%; }
.box2 > .text2 { color: red; }

(7) 隣接兄弟結合子(+)

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

(セレクタ)にセレクタをプラス(+)で区切って指定すると、ある要素に隣接している要素にスタイルを指定します。

使用例


div.box1 + p { font-size: 140%; }
.box2 + .text2 { color: red; }

(8) 一般兄弟結合子(~)

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

(セレクタ)にセレクタにチルダ(~)で区切って指定すると、ある要素に後続している要素にスタイルを指定します。

使用例


div.box1 ~ p { font-size: 140%; }
.box2 ~ .text2 { color: red; }

3.5 幅・高さの単位

3.5.1 幅・高さの指定値

(1) px(ピクセル値)

ピクセル値で指定します。

使用例

width: 500px;

(2) %(要素の割合(百分率))

親要素のサイズに対する割合を百分率(%)で指定します。

使用例

width: 40%;

(3) em(要素の割合)

親要素のサイズに対する割合を指定します。(「%」とほぼ同じ:1em = 100%)

使用例

font-size: 1.4em;

(4) rem(ルート要素の割合)

ルート(htmlタグ)のサイズに対する割合を指定します。

使用例

font-size: 1.4rem;

(5) vw(画面の表示幅の割合)

画面の表示幅に対する割合を指定します。(10vw = 画面幅の10%)

使用例

font-size: 5vw;

(6) vh(画面の高の割合)

画面の高さに対する割合を指定します。(10vw = 画面の高さの10%)

使用例

font-size: 5vh;

(7) calc関数(値の計算)

値を四則演算で計算します。

使用例

width: calc(100% / 4);

3.6 色の指定方法

3.6.1 色の指定値

(1) カラーネーム

black、red、lime、blueなどのカラーネームで指定します。

例:black()、red()、lime(、blue(

(2) #rgb(ハッシュ(#)で始まる16進3桁)

rが赤、gが緑、bが青を示します。それぞれの色の強さは16進数(0~f)で指定します。0は無発色で、fは最大発色になります。

例:#000()、#f00()、#0f0()、#00f(

(3) #rrggbb(ハッシュ(#)で始まる16進6桁)

rrが赤、ggが緑、bbが青を示します。それぞれの色の強さを2桁の16進数で指定します。00は無発色で、ffは最大発色になります。

例:#000000()、#ff0000()、#00ff00()、#0000ff(

(4) #rrggbbaa(ハッシュ(#)で始まる16進8桁)

rrが赤、ggが緑、bbが青、aaが透明度を示します。それぞれの色の強さを2桁の16進数で指定します。00は無発色で、ffは最大発色になります。透明度は、00は完全に透明、ffは完全に不透明になります。

例:#00000080()、#ff000080()、#00ff0080()、#0000ff80(

(5) rgb(r,g,b)(rgb関数)

rが赤、gが緑、bが青を示します。それぞれの色の強さを10進数(0~255)または百分率(0%~100%)で指定します。0(0%)は無発色で、255(100%)は最大発色になります。

例:rgb(0,0,0)()、rgb(255,0,0)()、rgb(0,255,0)()、rgb(0,0,255)(

(6) rgba(r,g,b,a)(rgba関数)

rが赤、gが緑、bが青、aが透明度を示します。それぞれの色の強さを10進数(0~255)または百分率(0%~100%)で指定します。0(0%)は無発色で、255(100%)は最大発色になります。透明度は、0(0%)は完全に透明、1(100%)は完全に不透明になります。

例:rgba(0,0,0,0.5)()、rgba(255,0,0,0.5)()、rgba(0,255,0,0.5)()、rgba(0,0,255,0.5)(

※カラーネームや色見本については「Appendix-A 色見本(カラーバリエーション)」を参照してください。

3.7 リセットCSS

3.7.1 リセットCSSとは

ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセットCSSです。

リセットCSSは、ブラウザが持っているスタイルシートをリセット(クリア)するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセットCSSは存在しません。

以下にリセットCSSのサンプルを示しますのでコーディングスタイルに合わせて適時変更してください。

CSS


@charset "utf-8";

/* Reset CSS */
html {
	font-size: 14px;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,header,nav,main,section,article,aside,footer {
	margin: 0;
	padding: 0;
	font-size: 100%;
	color: #333;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
address,em,i {
	font-style: normal;
}
strong,th,b {
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
img {
	width: 100%;
	height: auto;
	border: 0;
}
li {
	list-style-type: none;
}
small {
	font-size: 80%;
}
a {
	color: #333;
	text-decoration: none;
	font-weight: bold;
	padding: 0;
}
a:hover {
	opacity: 0.6;
}

/* Font */
body {
	font-size: 100%;
	font-family: "Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","MS Pゴシック",sans-serif;
}

3.8 セレクタの得点

3.8.1 セレクタ得点表

セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。

セレクタの種類と点数
セレクタの種類記述例点数
全般セレクタすべての要素に適用0点
要素名h1 p div span table など1点
疑似要素::before ::after など1点
疑似クラス:hover :nth-child(1) など10点
class.main-text .box など10点
id#title #sub など100点
style属性<div style="font-size:140%;">1000点
!importantfont-size: 140%!important;最優先
セレクタの計算例
セレクタの例計算合計点
div#main p1(要素)+100(id)+1(要素)102点
#main p.main-text100(id)+1(要素)+10(class)111点
div#main p.main-text1(要素)+100(id)+1(要素)+10(class)112点
div#main main p.main-text1(要素)+100(id)+1(要素)+1(要素)+10(class)113点
table tr td.text1(要素)+1(要素)+1(要素)+10(class)13点
h1 div span1(要素)+1(要素)+1(要素)3点

3.9 Chrome検証ツール

3.9.1 検証ツールの起動と設定

ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chromeの検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。

検証ツールの起動と設定

3.9.2 検証ツールの画面

検証ツールの画面

3.9.3 スマホの確認画面

スマホの確認画面