今日もCSSの続きをやっていきましょう。
前回のはこちら
100日後にエンジニアになるキミ - 15日目 - CSS - CSSの基礎2
CSSのプロパティ
CSSの各部分には名称がついており、基本的なCSSの書き方は
セレクタ {プロパティ名:値;}
となります。
セレクタ
セレクタ(selector)はCSSを適応させる対象のことです。
プロパティ
プロパティは適応するスタイルの種類のことで、様々な種類があります。
例えばcolor
では色を指定することができます。
値(value)
プロパティの値です。プロパティに対して様々な値が用意されています。
複数のスタイルを指定する
一つのセレクタにスタイルを複数指定したい場合は
1つのスタイルの宣言を;で区切ります。
p {color:red; line-height:15px;}
プロパティの数はものすごく沢山あります。
機能ごとに少しづつ押さえて行きましょう。
色合い(カラー)
color
文字の色を指定するプロパティ
RGB値(16進数)
color: #f00;
color: #ff0000;
RGB値(10進数)
color: rgb(255,0,0);
RGB値(%)
color: rgb(100%,0%,0%);
RGBA値(10進数)
color: rgba(255,0,0,0.5);
RGBA値(%)
color: rgba(100%,0%,0%,0.5);
HSL値
color: hsl(0,255%,128%);
HSLA値
color: hsla(0,255%,128%,0.5);
基本色
/* black、silver、gray、white、maroon、red、purple、fuchsia、
green、lime、olive、yellow、navy、blue、teal、aqua */
color: red;
拡張色
/* X11カラー140色など */
color: darkred;
透過色
color: transparent;
親要素のカラー値
color: currentColor;
opacity
色の透明度を指定するためのプロパティ
0.0で完全な透明
/* 0.0~1.0 */
opacity: 0.1;
opacity: 0.5;
背景
background
背景に関するプロパティの値をまとめて記述する。
値 | 意味 |
---|---|
background-attachment | 背景画像のスクロール方法 |
background-clip | 背景の描画領域 |
background-color | 背景色 |
background-image | 背景画像 |
background-origin | 背景画像の配置基点 |
background-position | 背景画像の表示位置 |
background-repeat | 背景画像の繰り返し方法 |
background-size | 背景画像のサイズ |
background-attachment
背景画像のスクロール方法を指定する。background-image
,background-position
と併用する
値 | 意味 |
---|---|
fixed | 背景画像を指定した位置に固定 |
local | 背景画像を要素内のコンテンツと一緒にスクロール |
scroll | 通常通り、背景画像を要素と一緒にスクロール(初期値) |
background-attachment: fixed;
background-attachment: local;
background-attachment: scroll;
background-clip
background-imageで指定した背景画像や
background-colorで指定した背景色の描画領域を指定
値 | 意味 |
---|---|
border-box | 背景はボーダーボックス内に表示(初期値) |
padding-box | 背景はパディングボックス内に表示 |
content-box | 背景はコンテンツボックス内に表示 |
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-color
要素の背景ボックスの色を指定する。
colorと同じ値
background-color: #f00;
background-color: #ff0000;
background-color: rgb(255,0,0);
background-color: rgb(100%,0%,0%);
background-color: rgba(255,0,0,0.5);
background-color: rgba(100%,0%,0%,0.5);
background-color: hsl(0,255%,128%);
background-color: hsla(0,255%,128%,0.5);
background-color: red;
background-color: darkred;
background-color: transparent;
background-color: currentColor;
background-image
要素の背景に置く画像を指定する。
background-image: url("aaa.gif");
background-origin
background-imageで指定した背景画像に対して配置の基準とする対象のボックスを
padding-box、border-box、content-boxのいずれかで指定する。
値 | 意味 |
---|---|
padding-box | パディングボックスを配置の基準(初期値) |
border-box | ボーダーボックスを配置の基準 |
content-box | コンテンツボックスを配置の基準 |
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
background-position
background-imageで指定した背景画像の、配置領域内での位置を指定
background-position: left 10px top 15px;
background-position: right 3em bottom 10px;
background-position: 100% 100%;
background-repeat
background-imageで指定した背景画像の繰り返しパターンを指定
値 | 意味 |
---|---|
repeat-x | 背景画像を水平方向に繰り返し |
repeat-y | 背景画像を垂直方向に繰り返し |
repeat | 背景画像を水平方向と垂直方向に繰り返し(初期値) |
space | 背景画像は指定方向へ繰り返して配置、スペースで調整 |
round | 背景画像は指定方向へ繰り返して配置、画像の伸縮によって調整 |
no-repeat | 背景画像を繰り返さない |
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
background-size
background-imageで指定した背景画像のサイズを指定
値 | 意味 |
---|---|
長さ | 「px」や「em」などのサイズで画像の幅と高さを指定 |
パーセント値 | パーセント値で画像の幅と高さを指定 |
auto | 自動で画像の幅と高さを指定する。(初期値) |
contain | 画像の縦と横の比率を保ったまま、配置領域内にすべて収まる最大のサイズに画像を調整 |
cover | 画像の縦と横の比率を保ったまま、配置領域をすべて覆う最小のサイズに画像を調整 |
background-size: 100% 100%;
background-size: 15px 15px;
background-size: 50% auto;
background-size: auto 4em;
background-size: auto;
background-size: 3em;
ボーダー
border
ボーダーに関するプロパティの値をまとめて記述するプロパティ
値 | 意味 |
---|---|
border-color | ボーダーの色 |
border-style | ボーダーの種類 |
border-width | ボーダーの太さ |
border: 2px solid #f00;
border: thin dotted rgb(255,0,0);
border: thick double hsla(0,255%,128%,0.5);
border-bottom
下側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ
値 | 意味 |
---|---|
border-width | ボーダーの太さ |
border-style | ボーダーの種類 |
border-color | ボーダーの色 |
border-bottom: 2px solid #f00;
border-bottom: thin dotted rgb(255,0,0);
border-bottom: thick double hsla(0,255%,128%,0.5);
border-bottom-color
下側のボーダーの色を指定するプロパティ
colorと同様
border-bottom-color: #f00;
border-bottom-color: #ff0000;
border-bottom-color: rgb(255,0,0);
border-bottom-color: rgb(100%,0%,0%);
border-bottom-color: rgba(255,0,0,0.5);
border-bottom-color: rgba(100%,0%,0%,0.5);
border-bottom-color: hsl(0,255%,128%);
border-bottom-color: hsla(0,255%,128%,0.5);
border-bottom-color: red;
border-bottom-color: darkred;
border-bottom-color: transparent;
border-bottom-color: currentColor;
border-bottom-left-radius
左下の角丸を指定するプロパティ
数値やパーセントで指定する。
border-bottom-left-radius: 10px;
border-bottom-left-radius: 10em;
border-bottom-left-radius: 10%;
border-bottom-left-radius: 10px 10px;
border-bottom-left-radius: 10em 10em;
border-bottom-left-radius: 10% 10%;
border-bottom-right-radius
右下の角丸を指定するプロパティ
数値やパーセントで指定する。
border-bottom-right-radius: 10px;
border-bottom-right-radius: 10em;
border-bottom-right-radius: 10%;
border-bottom-right-radius: 10px 10px;
border-bottom-right-radius: 10em 10em;
border-bottom-right-radius: 10% 10%;
border-bottom-style
下側のボーダーの種類を指定するプロパティ
値 | 意味 |
---|---|
none | 罫線を引かない。(初期値) |
hidden | 罫線を表示しません。noneとほぼ同等 |
dotted | 点線 |
dashed | 破線 |
solid | 実線 |
double | 二重線 |
groove | 立体的に窪んだ線 |
ridge | 立体的に隆起した線 |
inset | ボックス全体が窪んだようにみえる囲み線 |
outset | ボックス全体が隆起したようにみえる囲み線 |
border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;
border-bottom-width
下側のボーダーの太さを指定するプロパティ
値 | 意味 |
---|---|
数値 | 罫線の太さを「px」や「em」などで指定 |
thin | 細い |
medium | 中くらい(初期値) |
thick | 太い |
border-bottom-width: 2px;
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
border-color
上下左右の罫線の色をまとめて設定するためのもので、値を4個指定した場合
4つの値は、上、右、下、左の罫線の色をそれぞれ順に表す
colorと同等
border-color: #f00;
border-color: #f00 #f00;
border-color: #f00 #f00 #f00;
border-color: #f00 #f00 #f00 #f00;
border-image
ボーダー画像関連プロパティの値をまとめて指定するプロパティ
値 | 意味 |
---|---|
border-image-source | ボーダーに使用する画像を指定 |
border-image-slice | 画像を9つにスライス |
border-image-width | ボーダー画像の太さを指定 |
border-image-outset | ボーダー画像の外側への拡張を指定 |
border-image-repeat | 画像の繰り返し方法を指定 |
border-image: url("aaa.png") 10 10 / 30px round stretch;
border-image-outset
ボーダーイメージエリアを広げるプロパティ
値 | 意味 |
---|---|
長さ | ボーダーイメージエリアを広げる距離を長さで指定 |
数値 | border-widthの倍数を指定 |
border-image-outset: 10px;
border-image-outset: 10px 10px;
border-image-outset: 10px 10px 10px;
border-image-outset: 10px 10px 10px 10px;
border-image-repeat
border-image-sliceによって切り分けられた罫線画像の
上下および左右の罫線部分の画像の繰り返しについてキーワードで指定
値 | 意味 |
---|---|
stretch | 画像は繰り返されず、領域いっぱいまで拡張(初期値) |
repeat | 画像は領域いっぱいまで繰り返される |
round | 画像は領域いっぱいまで繰り返され、位置は画像パターンのサイズで調整 |
space | 画像は領域いっぱいまで繰り返され、位置は余白のスペースによって調整されます。 |
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
border-image-repeat: round stretch;
border-image-slice
画像の分割位置を指定するプロパティ
値 | 意味 |
---|---|
数値 | 画像の端からの距離を、「ピクセル数」や「ベクター座標」で指定 |
パーセント値 | 画像全体の幅や高さに対する割合で指定 |
fill | スライス後の画像の中央部分が破棄されない |
border-image-slice: 10;
border-image-slice: 10 10;
border-image-slice: 10 10 10;
border-image-slice: 10 10 10 10;
border-image-slice: 10%;
border-image-slice: 10% 10%;
border-image-slice: 10% 10% 10%;
border-image-slice: 10% 10% 10% 10%;
border-image-slice: 10 fill;
border-image-slice: 10% fill;
border-image-source
ボーダーに使用する画像ファイルを指定するプロパティ
値 | 意味 |
---|---|
url | ボーダーに使用する画像ファイルのURLを指定 |
none | ボーダーに画像を使用しない(初期値) |
border-image-source: url("aaa.png");
border-image-source: none;
border-image-width
ボーダー画像の太さを指定するプロパティ
値 | 意味 |
---|---|
パーセント値 | 「border画像領域」の幅または高さに対する割合距離を指定 |
数値 | 対応するborder-widthに対し,倍数で「border画像領域」の境界線からの距離を指定 |
auto | border-image-sliceと同じ値 |
border-image-width: 10;
border-image-width: 10px;
border-image-width: 10em;
border-image-width: 10%;
border-image-width: 10px 10px;
border-image-width: 10px 10px 10px;
border-image-width: 10px 10px 10px 10px;
border-image-width: auto;
border-left
左側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ
値 | 意味 |
---|---|
border-width | ボーダーの太さ |
border-style | ボーダーの種類 |
border-color | ボーダーの色 |
border-left: 2px solid #f00;
border-left: thin dotted rgb(255,0,0);
border-left: thick double hsla(0,255%,128%,0.5);
border-left-color
左側のボーダーの色を指定するプロパティ
colorと同様
border-left-color: #f00;
border-left-color: #ff0000;
border-left-color: rgb(255,0,0);
border-left-color: rgb(100%,0%,0%);
border-left-color: rgba(255,0,0,0.5);
border-left-color: rgba(100%,0%,0%,0.5);
border-left-color: hsl(0,255%,128%);
border-left-color: hsla(0,255%,128%,0.5);
border-left-color: red;
border-left-color: darkred;
border-left-color: transparent;
border-left-color: currentColor;
border-left-style
左側のボーダーの種類を指定するプロパティ
値 | 意味 |
---|---|
none | 罫線を引かない。(初期値) |
hidden | 罫線を表示しません。noneとほぼ同等 |
dotted | 点線 |
dashed | 破線 |
solid | 実線 |
double | 二重線 |
groove | 立体的に窪んだ線 |
ridge | 立体的に隆起した線 |
inset | ボックス全体が窪んだようにみえる囲み線 |
outset | ボックス全体が隆起したようにみえる囲み線 |
border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;
border-left-width
左側のボーダーの太さを指定するプロパティ
値 | 意味 |
---|---|
数値 | 罫線の太さを「px」や「em」などで指定 |
thin | 細い |
medium | 中くらい(初期値) |
thick | 太い |
border-left-width: 2px;
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;
border-radius
4つの角丸をまとめて指定するプロパティ
数値やパーセント値で指定する。
border-radius: 10px;
border-radius: 10em;
border-radius: 10%;
border-radius: 10px 10px;
border-radius: 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border-radius: 10px / 10px;
border-radius: 10px 10px / 10px 10px;
border-radius: 10px 10px 10px / 10px 10px 10px;
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
border-right
右側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ
値 | 意味 |
---|---|
border-width | ボーダーの太さ |
border-style | ボーダーの種類 |
border-color | ボーダーの色 |
border-right: 2px solid #f00;
border-right: thin dotted rgb(255,0,0);
border-right: thick double hsla(0,255%,128%,0.5);
border-right-color
右側のボーダーの色を指定するプロパティ
colorと同等
border-right-color: #f00;
border-right-color: #ff0000;
border-right-color: rgb(255,0,0);
border-right-color: rgb(100%,0%,0%);
border-right-color: rgba(255,0,0,0.5);
border-right-color: rgba(100%,0%,0%,0.5);
border-right-color: hsl(0,255%,128%);
border-right-color: hsla(0,255%,128%,0.5);
border-right-color: red;
border-right-color: darkred;
border-right-color: transparent;
border-right-color: currentColor;
border-right-style
右側のボーダーの種類を指定するプロパティです
値 | 意味 |
---|---|
none | 罫線を引かない。(初期値) |
hidden | 罫線を表示しません。noneとほぼ同等 |
dotted | 点線 |
dashed | 破線 |
solid | 実線 |
double | 二重線 |
groove | 立体的に窪んだ線 |
ridge | 立体的に隆起した線 |
inset | ボックス全体が窪んだようにみえる囲み線 |
outset | ボックス全体が隆起したようにみえる囲み線 |
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;
border-right-width
右側のボーダーの太さを指定するプロパティ
値 | 意味 |
---|---|
数値 | 罫線の太さを「px」や「em」などで指定 |
thin | 細い |
medium | 中くらい(初期値) |
thick | 太い |
border-right-width: 2px;
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;
border-style
上下左右の罫線の種類をまとめて設定するプロパティ
値 | 意味 |
---|---|
none | 罫線を引かない。(初期値) |
hidden | 罫線を表示しません。noneとほぼ同等 |
dotted | 点線 |
dashed | 破線 |
solid | 実線 |
double | 二重線 |
groove | 立体的に窪んだ線 |
ridge | 立体的に隆起した線 |
inset | ボックス全体が窪んだようにみえる囲み線 |
outset | ボックス全体が隆起したようにみえる囲み線 |
border-style: solid;
border-style: solid solid;
border-style: solid solid solid;
border-style: solid solid solid solid;
border-top
上側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ
値 | 意味 |
---|---|
border-width | ボーダーの太さ |
border-style | ボーダーの種類 |
border-color | ボーダーの色 |
border-top: 2px solid #f00;
border-top: thin dotted rgb(255,0,0);
border-top: thick double hsla(0,255%,128%,0.5);
border-top-color
上側のボーダーの色を指定するプロパティ
colorと同等
border-top-color: #f00;
border-top-color: #ff0000;
border-top-color: rgb(255,0,0);
border-top-color: rgb(100%,0%,0%);
border-top-color: rgba(255,0,0,0.5);
border-top-color: rgba(100%,0%,0%,0.5);
border-top-color: hsl(0,255%,128%);
border-top-color: hsla(0,255%,128%,0.5);
border-top-color: red;
border-top-color: darkred;
border-top-color: transparent;
border-top-color: currentColor;
border-top-left-radius
左上の角丸を指定するプロパティ
数値やパーセント値で指定する。
border-top-left-radius: 10px;
border-top-left-radius: 10em;
border-top-left-radius: 10%;
border-top-left-radius: 10px 10px;
border-top-left-radius: 10em 10em;
border-top-left-radius: 10% 10%;
border-top-right-radius
右上の角丸を指定するプロパティ
数値やパーセント値で指定する。
border-top-right-radius: 10px;
border-top-right-radius: 10em;
border-top-right-radius: 10%;
border-top-right-radius: 10px 10px;
border-top-right-radius: 10em 10em;
border-top-right-radius: 10% 10%;
border-top-style
上側のボーダーの種類を指定するプロパティ
値 | 意味 |
---|---|
none | 罫線を引かない。(初期値) |
hidden | 罫線を表示しません。noneとほぼ同等 |
dotted | 点線 |
dashed | 破線 |
solid | 実線 |
double | 二重線 |
groove | 立体的に窪んだ線 |
ridge | 立体的に隆起した線 |
inset | ボックス全体が窪んだようにみえる囲み線 |
outset | ボックス全体が隆起したようにみえる囲み線 |
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;
border-top-width
上側のボーダーの太さを指定するプロパティ
値 | 意味 |
---|---|
数値 | 罫線の太さを「px」や「em」などで指定 |
thin | 細い |
medium | 中くらい(初期値) |
thick | 太い |
border-top-width: 2px;
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;
border-width
上下左右の罫線の太さをまとめて設定するプロパティ
値 | 意味 |
---|---|
数値 | 罫線の太さを「px」や「em」などで指定 |
thin | 細い |
medium | 中くらい(初期値) |
thick | 太い |
border-width: 2px;
border-width: 2px 2px;
border-width: 2px 2px 2px;
border-width: 2px 2px 2px 2px;
box-decoration-break
ボックスが改行する際の表示形式を指定するプロパティ
値 | 意味 |
---|---|
slice | 連続ボックスとして表示(初期値) |
clone | 別のボックスを生成 |
box-decoration-break: slice;
box-decoration-break: clone;
box-shadow
ボックスに影を付けるプロパティ
値 | 意味 |
---|---|
長さ | 影の長さなどを「px」や「em」で指定 |
色 | 色の指定を省略するとブラウザの設定色 |
inset | 影をボックスの内部付 |
none | ボックスに影を付けない(初期値) |
box-shadow: 5px 5px;
box-shadow: 5px 5px 5px;
box-shadow: 5px 5px 5px 5px;
box-shadow: 5px 5px 5px 5px #f00;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5) inset;
box-shadow: 5px 5px 5px 5px #f00, 7px 7px 7px 7px #00f;
まとめ
プロパティの一部を紹介しました。
全てを完全に覚える必要はなく
プロパティと値の指定の仕方を覚えておき
適切なプロパティに変更できるように
検索の仕方を押さえておきましょう。
明日もプロパティの続きを行います。
君がエンジニアになるまであと84日
作者の情報
乙pyのHP:
http://www.otupy.net/
Youtube:
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw
Twitter:
https://twitter.com/otupython