美しい Web サイト

<!-- head要素へ一行追加 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css>

<!-- 各要素にクラス設定 -->
<div class="w3-container w3-padding"> こんにちは!</div>

リファレンス - CSS編 

目次

エンコード・外部スタイルシートの読込み

背景

ボーダー

カラー

テキストとフォント

マージンとパディング

リスト

ボックス

表示と配置

テーブル

CSSの書式(セレクター、プロパティ、値の指定方法)

セレクターの種類

単位

エンコード・外部スタイルシートの読込み

@charset

@charset "文字エンコード";

文字エンコードを指定する。

文字エンコード

  • utf-8など

@import

@import url(URL);
@import "URL";

外部スタイルシートのURLを指定する。

URL

  • 外部スタイルシートのURL

背景

background

{background: background-imageの値 background-repeatの値 background-positionの値 background-colorの値;}

背景に関する属性をまとめて指定する。

{background: 1つ目の背景の値, 2つ目の背景の値, ⋯, 最後の背景の値}

複数の背景に関する属性をまとめて指定する。
※最後の背景の値のみ背景色が設定可。

background-image

{background-image: 画像;}

背景画像を指定する。

画像

  • url(⋯)(画像のURL)
  • none(なし)

{background-image: 1つ目の背景画像の値, 2つ目の背景画像の値, ⋯}

複数の背景画像を指定する。

background-repeat

{background-repeat: 繰り返し;}
{background-repeat: 横方向の値 縦方向の値;}

背景画像の繰り返しを指定する。

繰り返し

  • repeat(並べて表示)
  • repeat-x(横方向のみに並べて表示)
  • repeat-y(縦方向のみに並べて表示)
  • no-repeat(繰り返しなし)

{background-repeat: 1つ目の繰り返しの値, 2つ目の繰り返しの値, ⋯}

複数の繰り返しを指定する。

background-position

{background-position: 水平方向 垂直方向;}
{background-position: 水平方向 水平方向の値 垂直方向 垂直方向の値;}

背景画像の開始位置を指定する。

水平方向

  • 数値+単位
  • 数値+%
  • left(左端)
  • center(中央)
  • right(右端)

垂直方向

  • 数値+単位
  • 数値+%
  • top(上端)
  • center(中央)
  • bottom(下端)

{background-position: 1つ目の開始位置の値, 2つ目の開始位置の値, ⋯}

複数の背景画像の開始位置を指定する。

background-color

{background-color: 色;}

背景色を指定する。

  • #RRGGBB/#RGB
  • 色名
  • rgb()/rgba()
  • hsl()/hsla()
  • transparent(透明)

ボーダー

border-width

{border-width: 太さ;}

ボーダーの太さをまとめて指定する。

太さ

  • 数値+単位
  • thin(細線)
  • medium(通常の太さの線)
  • thick(太線)

{border-width: 上下の太さ 左右の太さ;}

上下と左右のボーダーの太さを指定する。

{border-width: 上の太さ 左右の太さ 下の太さ;}

上、左右、下のボーダーの太さを指定する。

{border-width: 上の太さ 右の太さ 下の太さ 左の太さ;}

全ボーダーの太さを個別に指定する。

border-top-width

{border-top-width: 太さ;}

上ボーダーの太さを指定する。

border-bottom-width

{border-bottom-width: 太さ;}

下ボーダーの太さを指定する。

border-left-width

{border-left-width: 太さ;}

左ボーダーの太さを指定する。

border-right-width

{border-right-width: 太さ;}

右ボーダーの太さを指定する。

border-style

{border-style: スタイル;}

ボーダーのスタイルをまとめて指定する。

スタイル

  • solid(実線)
  • double(二重線)
  • groove(溝線)
  • ridge(稜線)
  • inset(沈みこみ)
  • outset(浮き出し)
  • none(ボーダーなし)
  • hidden(ボーダーを表示しない)
  • dashed(破線)
  • dotted(点線)

{border-style: 上下のスタイル 左右のスタイル;}

上下と左右のボーダーのスタイルを指定する。

{border-style: 上のスタイル 左右のスタイル 下のスタイル;}

上、左右、下のボーダーのスタイルを指定する。

{border-style: 上のスタイル 右のスタイル 下のスタイル 左のスタイル;}

全ボーダーのスタイルを個別に指定する。

border-top-style

{border-top-style: スタイル;}

上ボーダーのスタイルを指定する。

border-bottom-style

{border-bottom-style: スタイル;}

下ボーダーのスタイルを指定する。

border-left-style

{border-left-style: スタイル;}

左ボーダーのスタイルを指定する。

border-right-style

{border-right-style: スタイル;}

右ボーダーのスタイルを指定する。

border-color

{border-color: 色;}

ボーダーの色をまとめて指定する。

  • #RRGGBB/#RGB
  • 色名
  • rgb()/rgba()
  • hsl()/hsla()
  • transparent(透明)

{border-color: 上下の色 左右の色;}

上下と左右のボーダーの色を一括指定する。

{border-color: 上の色 左右の色 下の色;}

上、左右、下のボーダーの色を指定する。

{border-color: 上の色 右の色 下の色 左の色;}

全ボーダーの色を個別に指定する。

border-top-color

{border-top-color: 色;}

上ボーダーの色を指定する。

border-bottom-color

{border-bottom-color: 色;}

下ボーダーの色を指定する。

border-left-color

{border-left-color: 色;}

左ボーダーの色を指定する。

border-right-color

{border-right-color: 色;}

右のボーダーの色を指定する。

border

{border: border-widthの値 border-styleの値 border-colorの値;}

すべてのボーダーに関する属性をまとめて指定する。

border-top

{border-top: border-top-widthの値 border-top-styleの値 border-top-colorの値;}

上ボーダーに関する属性をまとめて指定する。

border-bottom

{border-bottom: border-bottom-widthの値 border-bottom-styleの値 border-bottom-colorの値;}

下ボーダーに関する属性をまとめて指定する。

border-left

{border-left: border-left-widthの値 border-left-styleの値 border-left-colorの値;}

左ボーダーに関する属性をまとめて指定する。

border-right

{border-right: border-right-widthの値 border-right-styleの値 border-right-colorの値;}

右ボーダーに関する属性をまとめて指定する。

カラー

color

{color: 色;}

文字色を指定する。

  • #RRGGBB/#RGB
  • 色名
  • rgb()/rgba()
  • hsl()/hsla()
  • transparent(透明)

opacity

{opacity: ボックスの透明度;}

ボックスの透明度を指定する。

ボックスの透明度

  • 数値(0~1.0)

 

テキストとフォント

text-align

{text-align: 位置;}

テキストの水平方向位置を指定する。

位置

  • left(左揃え)
  • center(中央揃え)
  • right(右揃え)

text-decoration

{text-decoration: 装飾;}

テキストの文字装飾を指定する。

装飾

  • underline(下線)
  • overline(上線)
  • line-through(取り消し線)
  • none(なし)

text-indent

{text-indent: 幅;}

テキストのインデントを指定する。

  • 数値+単位
  • 数値+%

vertical-align

{vertical-align: 位置;}

ボックス内のコンテンツの垂直方向位置を指定する。

位置

  • baseline(ベースライン)
  • sub(下付き文字)
  • super(上付き文字)
  • top(上揃え)
  • text-top(テキストを基準とした上揃え)
  • middle(上下中央揃え)
  • bottom(下揃え)
  • text-bottom(テキストを基準とした下揃え)
  • auto

font

{font: font-styleの値 font-weightの値 font-sizeの値/line-heightの値 font-familyの値;}

フォントに関する属性をまとめて指定する。

font-style

{font-style: スタイル;}

フォントのスタイルを指定する。

スタイル

  • normal
  • italic
  • oblique

font-weight

{font-weight: 太さ;}

フォントの太さを指定する。

太さ

  • normal
  • bold
  • bolder
  • lighter

font-size

{font-size: サイズ;}

フォントサイズ(文字のサイズ)を指定する。

サイズ

  • 数値+単位
  • 数値+%
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • larger
  • smaller

line-height

{line-height: 高さ;}

行の高さを指定する。

高さ

  • 数値(整数)
  • 数値+単位
  • 数値+%
  • normal

font-family

{font-family: フォント名;}

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

フォント名

  • フォントの正式名称
  • 一般名(serif、sans-serif、cursive、fantasy、monospace)

マージンとパディング

margin

{margin: 幅;}

マージンの幅をまとめて指定する。

  • 数値+単位
  • 数値+%
  • auto

{margin: 上下の幅 左右の幅;}

上下と左右のマージンの幅を指定する。

{margin: 上の幅 左右の幅 下の幅;}

上、左右、下のマージンの幅を指定する。

{margin: 上の幅 右の幅 下の幅 左の幅;}

全マージンの幅を個別に指定する。

margin-top

{margin-top: 幅;}

上マージンの幅を指定する。

margin-bottom

{margin-bottom: 幅;}

下マージンの幅を指定する。

margin-left

{margin-left: 幅;}

左マージンの幅を指定する。

margin-right

{margin-right: 幅;}

右マージンの幅を指定する。

padding

{padding: 幅;}

パディングの幅をまとめて指定する。

  • 数値+単位
  • 数値+%

{padding: 上下の幅 左右の幅;}

上下と左右のパディングの幅を指定する。

{padding: 上の幅 左右の幅 下の幅;}

上、左右、下のパディングの幅を指定する。

{padding: 上の幅 右の幅 下の幅 左の幅;}

全パディングの幅を個別に指定する。

padding-top

{padding-top: パディング幅;}

上パディングを指定する。

padding-bottom

{padding-bottom: パディング幅;}

下パディングを指定する。

padding-left

{padding-left: パディング幅;}

左パディングを指定する。

padding-right

{padding-right: パディング幅;}

右パディングを指定する。

リスト

list-style

{list-style: list-style-typeの値 list-style-imageの値 list-style-positionの値;}

リストのマーカーに関する属性をまとめて指定する。

list-style-type

{list-style-type: マーカー;}

リストのマーカーの種類を指定する。

マーカー

  • disc(黒丸)
  • circle(白丸)
  • square(四角)
  • decimal(10進数)
  • none(なし)

list-style-image

{list-style-image: 画像;}

リストのマーカーに画像を指定する。

画像

  • url()(画像のURL)
  • none(なし)

list-style-position

{list-style-position: 位置;}

リストのマーカーの位置を指定する。

位置

  • inside(内側)
  • outside(外側)

ボックス

width

{width: 幅;}

ボックスの幅を指定する。

  • 数値+単位
  • 数値+%
  • auto

min-width

{min-width: 幅;}

ボックスの最小の幅を指定する。

  • 数値+単位
  • 数値+%

max-width

{max-width: 幅;}

ボックスの最大の幅を指定する。

  • 数値+単位
  • 数値+%
  • none(なし)

height

{height: 高さ;}

ボックスの高さを指定する。

高さ

  • 数値+単位
  • 数値+%
  • auto

min-height

{min-height: 高さ;}

ボックスの最小の高さを指定する。

高さ

  • 数値+単位
  • 数値+%

max-height

{max-height: 高さ;}

ボックスの最大の高さを指定する。

高さ

  • 数値+単位
  • 数値+%
  • none(なし)

表示と配置

display

{display: 形式;}

ボックスの表示形式を変更する。

形式

  • block(ブロックレベル形式にする)
  • inline(インライン形式にする)
  • inline-block(インラインブロックレベル形式にする)
  • none(存在しないものとして処理される)

overflow

{overflow: 処理;}

ボックスの内容あふれの処理方法を指定する。

処理

  • visible(高さ、幅の指定を無視してすべて表示)
  • hidden(高さ、幅の指定により範囲内のみ表示)
  • scroll(スクロールバーを表示)
  • auto(ブラウザーの処理に任せる)

overflow-x

{overflow-x: 処理;}

ボックスの幅(x軸)の内容あふれの処理方法を指定する。

処理

  • visible(幅の指定を無視してすべて表示)
  • hidden(幅の指定により範囲内のみ表示)
  • scroll(スクロールバーを表示)
  • auto(ブラウザーの処理に任せる)

overflow-y

{overflow-y: 処理;}

ボックスの高さ(y軸)の内容あふれの処理方法を指定する。

処理

  • visible(高さの指定を無視してすべて表示)
  • hidden(高さの指定により範囲内のみ表示)
  • scroll(スクロールバーを表示)
  • auto(ブラウザーの処理に任せる)

position

{position: 配置;}

要素の配置方法を指定する。

配置

  • static(指定なし)
  • relative(通常配置される位置からの相対的な位置で指定)
  • absolute(親要素に対して絶対的な位置で指定)
  • fixed(固定配置で指定)

top

{top: 位置;}

上からの位置を指定する。

位置

  • 数値+単位
  • 数値+%
  • auto

bottom

{bottom: 位置;}

下からの位置を指定する。

位置

  • 数値+単位
  • 数値+%
  • auto

left

{left: 位置;}

左からの位置を指定する。

位置

  • 数値+単位
  • 数値+%
  • auto

z-index

{z-index: 値;}

重ね合わせの順序を指定する。

  • 数値(整数)
  • auto

float

{float: フロート;}

ボックスをフロートさせ、寄せて配置する(後続するボックスは回り込む)。

フロート

  • left(左寄せ)
  • right(右寄せ)
  • none(なし)

clear

{clear: 対象;}

ボックスのフロートを解除する。

対象

  • left(左寄せのフロートを解除)
  • right(右寄せのフロートを解除)
  • both(両方解除)
  • none(解除しない)

テーブル

table-layout

{table-layout: レイアウト方法;}

テーブル(表)のレイアウト方法を指定する。

レイアウト方法

  • auto
  • fixed(列幅を均等)

 

border-collapse

{border-collapse: 表示モデル;}

テーブル(表)のボーダーの表示モデルを指定する。

表示モデル

  • collapse(隣接するセルのボーダーを重ねて表示)
  • separate(隣接するセルのボーダーを間隔をあけて表示)

 

border-spacing

{border-spacing: 間隔;}

ボーダーとセル内容との間隔を指定する。

間隔

  • 数値+単位

 

CSSの書式(セレクター、プロパティ、値の指定方法)

基本書式

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

セレクターにプロパティと値を設定する。

複数のプロパティ

セレクター {
  プロパティ1: 値;
  プロパティ2: 値;
  ⋯
}

複数のプロパティに値を設定する。

複数のセレクター

セレクター1, セレクター2, セレクター3,⋯ {
  プロパティ: 値;
  ⋯
}

複数のセレクターにプロパティと値を設定する。

inherit

セレクター {プロパティ: inherit;}

親要素を継承する。

!important

セレクター {プロパティ: 値!important;}

プロパティの値に最優先の設定をする。

セレクターの種類

タイプセレクター

要素名 {⋯}

ユニバーサルセレクター

* {⋯}

子孫セレクター

親要素 子孫要素 {⋯}

IDセレクター

要素名#ID名 {⋯}

※要素名を省略した場合、全ての要素が対象となる。

クラスセレクター

要素名.クラス名 {⋯}
要素名.クラス名1.クラス名2.クラス名3⋯ {⋯}

※要素名を省略した場合、全ての要素が対象となる。

IDとクラスが混在するセレクター

要素名#ID名.クラス名 {⋯}

※要素名を省略した場合、全ての要素が対象となる。

属性セレクター

要素名[属性] {⋯}
要素名[属性="属性値"] {⋯}

※要素名を省略した場合、属性に関連する要素が対象となる。

:visited

アクセス済みであるものを指定する疑似クラス。

:hover

マウスでポイントしたオブジェクトを指定する疑似クラス。

:focus

カーソルがフォーカスしたものを指定する疑似クラス。

:active

マウスのボタンが押されているなど、アクティブなオブジェクトを指定する疑似クラス。

:nth-child(値)

  • 数値
  • ○n+△(○ずつ連続する△番目)

連続するすべての要素(ID、クラスなど含む)の最初から数えた個数の中から番号を指定する疑似クラス。

 

:nth-child(アルファベット値)

アルファベット値

  • odd(奇数)
  • even(偶数)

連続するすべての要素(ID、クラスなど含む)の最初から数えた個数の中から奇数や偶数を指定する疑似クラス。

:nth-last-child(値)

  • 数値
  • ○n+△(○ずつ連続する△番目)

連続するすべての要素(ID、クラスなど含む)の最後から数えた個数の中から番号を指定する疑似クラス。

 

:nth-last-child(アルファベット値)

アルファベット値

  • odd(奇数)
  • even(偶数)

連続するすべての要素(ID、クラスなど含む)の最後から数えた個数の中から奇数や偶数を指定する疑似クラス。

:first-child

連続するすべての要素(ID、クラスなど含む)の最初から数えた個数の中から1番目を指定する疑似クラス。

:last-child

連続するすべての要素(ID、クラスなど含む)の最後から数えた個数の中から1番目を指定する疑似クラス。

:nth-of-type(値)

  • 数値
  • ○n+△(○ずつ連続する△番目)

連続する同じ要素のみ(ID、クラスなど含む)の最初から数えた個数の中から番号を指定する疑似クラス。

:nth-of-type(アルファベット値)

アルファベット値

  • odd(奇数)
  • even(偶数)

連続する同じ要素のみ(ID、クラスなど含む)の最初から数えた個数の中から奇数や偶数を指定する疑似クラス。

:nth-last-of-type(値)

  • 数値
  • ○n+△(○ずつ連続する△番目)

連続する同じ要素のみ(ID、クラスなど含む)の最後から数えた個数の中から番号を指定する疑似クラス。

:nth-last-of-type(アルファベット値)

アルファベット値

  • odd(奇数)
  • even(偶数)

連続する同じ要素のみ(ID、クラスなど含む)の最後から数えた個数の中から奇数や偶数を指定する疑似クラス。

:first-of-type

連続する同じ要素のみ(ID、クラスなど含む)の最初から数えた個数の中から1番目を指定する疑似クラス。

:last-of-type

連続する同じ要素のみ(ID、クラスなど含む)の最後から数えた個数の中から1番目を指定する疑似クラス。

単位

em

エム(文字の高さ)

pt

ポイント

px

ピクセル

Δ
TOP