HTML5/CSS3の授業ノート

プロパティと値の間にはコロン、値の最後にはセミコロンがつきます。

このように複数のプロパティと値を同時に記述することができます。
改行やインデントを入れて見やすくすることもできますが、プロパティ名や値の途中で改行やスペースを入れると正しく解釈されません。

指定するプロパティが一つでも複数でも宣言内の最後のセミコロンは省略可能ですが、プロパティを複数指定するときにつけ忘れることのないよう、常につけるようにしておきましょう。

/*複数のセレクタに同じプロパティを指定する/*
/*h1とh2とh3に対する指定*/
h1,h2,h3{
color:blue;
font-weight;bold;
}

/*子孫の要素のプロパティを指定する*/
/*headerの中のh1に対する指定*/
header h1{
color:blue;
font-weight;bold;
}

/*ユニバーサルセレクタ*/
/*全ての要素に対する指定*/
*{
color:#333;
}

/*classセレクタ*/
/*<h2 class="☆☆">に対する指定*/
h2.☆☆{
color:blue;
font-weight;bold;
}

/*IDセレクタ*/
/*<div id="★★">に対する指定*/
h2#★★{
color:blue;
font-weight;bold;
}

まずは文字の装飾や大きさ位置などを指定するCSSから覚えていきましょう。
CSSは正しく記述すれば必ず見た目が変わります。
もし、変わらない時はHTMLの記述が誤っているなど他に原因があるかもしれません。
注意して記述の練習をしていきましょう。

文字の色を指定する

color:色の指定;

継承

継承する

適用要素

すべての要素とテキスト

値

説明

カラーネーム(色名)

black、redなどの色名で表す

カラーコード(hex)

#ffcc00など16進数で表す

rgb()関数/rgba()関数

16進数から10進数に変換し、Alpha(透明度)を加えたもの

hsl()関数/hsla()関数

Hue(色相)、Saturation(彩度)、Lightness(輝度)、Alpha(透明度)で指定

文字の大きさを指定する

「数値と単位」「％」「絶対サイズ」「相対サイズ」で指定することができます。

font-size:サイズ;

継承

継承する

適用要素

すべての要素

値(数値と単位)

説明

(数値)px

ピクセル値

(数値)em

親要素のフォントの高さを基準として何倍か
→親要素の指定を引き継ぐ

(数値)rem

html(ルート)要素で指定したフォントサイズを基準として何倍か
→親要素に影響されない

(数値)ex

親要素のフォントの「x(小文字)」の高さを基準として何倍か

(数値)vw

ブラウザの表示領域(ビューポート)の横幅の何%か

(数値)vh

ブラウザの表示領域(ビューポート)の高さの何%か

(数値)vmin

ブラウザの表示領域の横幅と高さのうち、小さい方に対して何%か

(数値)vmax

ブラウザの表示領域の横幅と高さのうち、大きい方に対して何%か

(数値)％

親要素のフォントサイズに対して何%か

値(相対サイズ);

解説

smaller

親要素に対して相対的に一段階小さく

larger

親要素に対して相対的に一段階大きく

値(絶対サイズ)

解説

xx-small

mediumより3段階小さく

x-small

mediumより2段階小さく

small

mediumより1段階小さく

medium

ブラウザの標準フォントサイズ

large

mediumより1段階大きく

x-large

mediumより2段階大きく

xx-large

mediumより2段階大きく

文字の太さを指定する

font-weight:キーワードまたは数値(単位なし);

継承

継承する

適用要素

すべての要素

値

説明

normal

400と同じ

(数値)

100〜900の9段階

bold

太字/数値の700と同じ

lighter

親要素に対して相対的に一段階細く

bolder

親要素に対して相対的に一段階太く

*は初期値

指定しているフォントに細字が用意されてなかったり、太さが1段階しか用意されていなかったりするためにfont-weightの指定がうまくいかない場合があります。
日本語で9段階に対応しているフォントはほんの一部しかなく(ヒラギノ角ゴなど)、数値での指定やbolder/lighterを使う機会は限られるかもしれません。

font-weightの値が100(Thin/Hairline)または200(ExtraLight)などは読みにくくなることがあるので気をつけましょう。

フォントのスタイル(標準、イタリック、斜体の3種類)を指定する

斜体もイタリック体もどちらも斜めになるのですが、よく見ると少し違います。
本来「イタリック体」というのはアルファベット書体の一つで、筆記体に似た装飾がされたもの、それに対して「斜体」は文字を変形させて、強引に歪めたものになります。

font-style:キーワード;

継承

継承する

適用要素

すべての要素

値

説明

normal

abcdefg/Normal 標準

oblique

abcdefg/Oblique 斜体

italic

abcdefg/Italic イタリック

*は初期値

指定したフォントにそのスタイルが用意されていない場合にはフォントが傾いて表示されます。日本語フォントではイタリック、斜体が用意されていることが少ないため、主に欧文フォントで使用します。

フォントの種類を指定する

複数の値をカンマで区切って記述し、フォントのリストを指定します。ブラウザは前に記述したものから順に、リストの中で最初のインストール済みフォントを選択します。
リストの中にユーザーの環境で表示可能なフォントがない可能性もあるので、少なくとも１つ「総称ファミリー」を追加しておくと良いでしょう。

font-family:フォント名,総称ファミリー名;

継承

継承する

適用要素

すべての要素

値

説明

フォント名

表示したいフォントファミリーの名称。複数のフォントを指定する場合はカンマ区切りで指定します
空白や日本語を含むフォントファミリー名は""で囲む必要があります

sans-serif

和文フォントではゴシック体と呼ばれる、ウロコがなく平らな角を持つフォントの総称

serif

和文フォントでは明朝体と呼ばれる、止めや角などの端にウロコと呼ばれる装飾のあるフォントの総称

system-ui

OSのUIと同じフォントで表示する

monospace

等幅フォントの総称
それぞれの文字の横幅が同じになるようにデザインされたフォントで、プログラムのソースコードを表示するときなどに使われることが多い

cursive

筆記体フォントの総称。

fantasy

遊び心に溢れた文字表現を含む装飾的なフォントの総称

cursiveやfantasyは、OSやブラウザによって表示するフォントが大きく異なるうえ、日本語にはこれに対応するフォントがなく、思い通りの表示にならないことが多いため気をつけましょう。

フォントの様々なプロパティを一括指定する

指定できる値はそれぞれのプロパティと同じで、それぞれの値は半角スペースで区切って記述します。

h1{font:style␣weight␣size␣/line-height␣family}

font-style/font-weight

省略可能、順不同。font-sizeより前に記述します。

font-size、font-family

必須。familyは必ず最後に記述します。

line-height

/(スラッシュ)で区切って指定します。

font-family

必須。必ず最後に記述します。

行の高さを指定する

line-height:高さ;

継承

継承する

適用要素

すべての要素

値

説明

normal

フォントサイズによって決まる標準の高さ

(数値)px

ピクセル値

(数値)em

フォントの高さを1として何倍か

(数値)ex

フォントの「x(小文字)」の高さを1として何倍か

(数値)％

フォントサイズを基準として何%か

(数値)単位なし

数値のみの指定の場合は、フォントサイズを基準としてその数値を掛けた値になる。2=200%=2em

*は初期値

テキストの行ぞろえの位置を指定する

text-align:キーワード;

継承

継承する

適用要素

ブロックコンテナー

値

説明

start

行の開始位置に揃える
テキストの方向が左から右ならleft、右から左ならrightと同じ

end

行の終了位置に揃える
テキストの方向が左から右ならright、右から左ならrightと同じ

left

左寄せ

right

右寄せ

center

中央揃え

match-parent

親要素の指定を継承

justify

最終行を除いて均等割付け

justify-all

最終行も含めて均等割付け(2022年4月現在、対応ブラウザなし)

*は初期値

テキストの垂直位置を指定したい

vertical-align:キーワード;

継承

継承しない

適用要素

インライン要素、セル要素(th/td)

値

説明

baseline

親要素のボックスのベースラインに揃える

top

親要素のボックスの上辺に揃える

middle

親要素のボックスの小文字のxの中心に揃える

bottom

親要素のボックスの下辺に揃える

sub

下付き文字にする(セル要素には適用不可)

super

上付き文字にする(セル要素には適用不可)

*は初期値

テキストの1行目にインデントを指定したい

ブロックコンテナーの中にあるテキストの1行目の字下げ幅を指定します。
マイナスの値を指定することもできます。

text-indent:字下げ幅;

継承

継承する

適用要素

ブロックコンテナー

値

説明

(数値)単位

数値と単位を使って指定する

(数値)%

行の幅(包含ブロックの大きさ)に対する割合を%で指定する。

テキストに対する線の種類・スタイル・色を一括指定する

値の間に半角スペースを開けて並べることで線やスタイル、色を指定します。

text-decoration:線の種類、スタイル、色;

継承

継承しない

適用要素

すべての要素

値(線の種類)

説明(text-decoration-line)

none

テキストに線を引かない

underline

テキストに下線を引く

overline

テキストに上線を引く

line-through

テキストに中央線を引く

値(線のスタイル)

説明(text-decoration-style)

solid

実線

double

二重線

dotted

点線

dashed

波線

wavy

波線

値(線の色)

説明(text-decoration-color)

(指定なし)

文字の色

キーワード(色名)

black、redなどの色名で表す

カラーコード(hex)

#ffcc00など16進数で表す

rgb()関数/rgba()関数

16進数から10進数に変換し、Alpha(透明度)を加えたもの

hsl()関数/hsla()関数

Hue(色相)、Saturation(彩度)、Lightness(輝度)、Alpha(透明度)で指定

*は初期値

線の種類

text-decoration-lineプロパティ

線のスタイル

text-decoration-styleプロパティ

線の色

text-decoration-colorプロパティ

を使ってそれぞれ別々に指定することもできます。

<p>おばあさんが<span>川で洗濯</span>をしていると大きな桃が流れてきました。</p>

p {
	text-decoration-line: underline;
	}
span {
	text-decoration-line: none;
	}

span {
	text-decoration-line: overline;
	}

テキストに影をつけたい

影の色と長さを指定します。カンマで区切って指定すれば複数の影をつけることもできます。
複数の影はレイヤーのように1番目の指定が最前面、2番目以降の指定が背面に回ります。

text-shadow:長さ␣ぼかす半径␣色;

継承

継承しない

適用要素

すべての要素

値(長さ)

説明

none

テキストに影をつけない

(数値)＋単位

2px␣2pxのように半角スペースで区切って記述するとx(横)方向␣y(縦)方向に対して指定することができる

値(ぼかしの半径)

説明

(数値)＋単位

2pxのように影のぼかしを数値と単位で指定する

値

説明

色

色の指定

*は初期値

要素の透明度を指定したい

opacity:数値;

継承

継承しない

適用要素

すべての要素

値

説明

(数値)

0.0(透明)〜(半透明)〜1.0(不透明)の間で数値を指定します。

(数値)＋％

0%(透明)〜(半透明)〜100%(不透明)の間で数値を指定します。

*は初期値

空白や行をそのまま表示したい

要素の中の半角スペース/タブ/改行をどのように処理するかを指定します。

white-space:キーワード;

継承

継承する

適用要素

ブロックコンテナー

値

説明

normal

連続する複数の半角スペースやタブ、改行文字を一つの半角スペースとして処理する
ボックスの端で自動的に改行する

nowrap

連続する複数の半角スペースやタブ、改行文字を一つの半角スペースとして処理する
自動的な改行は行わない

pre

入力された半角スペースやタブ、改行をそのまま表示する
自動的な改行は行わない

pre-wrap

入力された半角スペースやタブ、改行をそのまま表示する
自動的な改行は行わない

pre-line

入力された半角スペースやタブ、改行をそのまま表示する
ボックスの端で自動的に改行する

*は初期値