Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8686

100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3

$
0
0

今日も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画像領域」の境界線からの距離を指定
autoborder-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


Viewing all articles
Browse latest Browse all 8686

Latest Images

Trending Articles