HTML/CSS/JSで作成したスタバサイト

CSS属性

CSS属性

Width, Height

エレメントの水平/垂直幅

div {
	width: 100px;
    height: 100px;
}

デフォルトauto
計算ブラウザ幅

max-width, max-height

要素の最大横幅/縦幅

デフォルト
none

min-width, min-height

エレメントが小さくなる可能性のある最小横/縦幅

デフォルト
0

CSS単位

px
ピクセル

%
相対パーセント

em
要素のフォントサイズ

rem
ルート要素(html)のフォントサイズ

vw, vh
ビューポートの水平/垂直幅のパーセント

Margin

エレメントの外部余白(スペース)を指定するショートカット属性.
負の値でもかまいません

デフォルト
0

ショートカットのプロパティ
ぐいとつかむ

margin: top, right, bottom, left ;

margin: top, bottom right, left ;

margin: top right, left bottom ;

margin: top right bottom left ;

n/a.方向
margin-「方向」
margin-top, margin-bottom, margin-right, margin-left

負の値
値のように重なります.

Padding

エレメント内の余白のショートカット属性を指定します.
内部空白なので、要素の大きさが大きくなります.

デフォルト
0

ショートカットのプロパティ
ぐいとつかむ

padding: top, right, bottom, left ;

padding: top, bottom right, left ;

padding: top right, left bottom ;

padding: top right bottom left ;

n/a.方向
padding-「方向」
padding-top, padding-bottom, padding-right, padding-left

Border / Color

ボーダーライン

エレメントの枠線のショートカット・プロパティの指定
要素のサイズが増加します.border: 선-두께 선-종류 선-색상;

border-width

デフォルト

中程度の厚さまたはCSS単位で指定

border-style

デフォルト
none

実線
solid

破線
dashed

border-color

デフォルト
black

透明
transparent

カラー表示

すべての色を使用する属性に適用される色の表示

色の名前
ブラウザで指定した色名
ex) red, tomato, royalblue

Hex色コード
16進数カラー
ex) #000, #FFFFF

RGB
さんげんしょく
ex) rgb(255, 255, 255)

RGBA
光の三原色+透明度
ex) rgba(0, 0, 0, 0.5)

Border-radius

フィレット要素のエッジ

デフォルト
円なし

border-radius: value;

Box-sizing

要素のサイズ計算基準の指定

content-box
要素の内容によるサイズの計算

border-box
要素の内容+padding+borderを使用してサイズを計算
属性.paddingまたはborderで要素を拡大する属性を使用するときにサイズが再計算されないようにします.

Overflow

要素が大きい場合は、表示のショートカットプロパティを制御します.

visible(デフォルト)
溢れ出した内容をそのまま見せる.

hidden
あふれた部分を切り取る.

scroll
スクロールすると、オーバーフローした内容が表示されます.

auto
オーバーフローした部分だけがスクロールしてオーバーフローした内容を表示できます.

Overflow-x, y

コンテンツがオーバーフローすると、表示を制御する個別属性もあります.

Display

エレメントの画面出力(表示)プロパティ

block
ボックス要素

inline
テキスト要素

inline-block
テキスト+ボックス要素

flex
1 Dレイアウト

grid
2 Dレイアウト

none
プロパティが表示されず、画面から消えます.

その他
table、table-row、table-cell等

Opacity

要素の透明度(0-1)

デフォルト
1

Font

フォント

font-size
ふごう

16px
既定の寸法

font-weight
文字の長さ
9個の数字、100から900まで、単位は100です.

normal
デフォルト値

bold
厚さ

font-style
こうばい

nomal
デフォルト値

italic
傾斜

line-height
に似ている

normal
1

数字
要素のフォントサイズを指定する倍数

単位

(px、em、rmなどの単位)

font-family
フォントの指定font-family: 글꼴1, "글꼴2", ...글꼴계열;フォントの表示と使用に使用する候補.

フォントシリーズ

serif基板

sans-serif黒体

等

Text

color
フォントの色

text-align
文字の配置

左(デフォルト)右中心

text-decoration
文字の飾り

none(デフォルト)

underline
下線

line-through
中線

text-indent
1行目のテキストのインデント/インデント

0(本機)

羊水
インデント

負
サムネイル

Background

background-color
背景の色を指定

background-image
画像を背景に割り当てるbackgound-image: url("경로");

background-size
背景画像のサイズを指定
デフォルトでは、画像のサイズが要素のサイズより小さい場合は、出力を繰り返します.

auto
デフォルトのサイズは

です.

単位

cover
比例を維持し、

はより広い要素に適しています.

contain

より短いエレメント幅でスケールを維持

backgound-repeat

repeat
デフォルト

repeat-x/y
繰り返し

(x/y軸)

no-repeat
重複なし

backgound-position
要素の背景画像の位置

方向
top、bottom、right、left、center方向

を指定します.

単位

background-attachment
要素の背景画像のスクロールプロパティ

scroll
基本
画像を要素に沿ってスクロールする

fixed
画像はビューポートに固定され、X

をスクロールします.