よく使うCSSプロパティ

よく使うCSSプロパティ一覧をまとめました。

CSSで使う単位の種類

絶対値	相対値
cm	em
mm	ex
in	ch
px	rem
pt	vw
pc	vh
	vmin
	vmax
	%

文字や文章の装飾

|プロパティ|用途|値| |---|---|---| |font-size|文字サイズ| 数値‥‥px,rem,%,などの単位を付ける| |font-family|フォントの種類|sans-serif(ゴシック系),serif(明朝系),cursive(筆記体)などから指定する。| |font-weight|文字の太さ|normal(標準)、bold(太字)、lighter(一段階細くする)、boloer(一段階太くする)・数値1-1000の数値| |line-height|行の高さ|normal(ブラウザが判断した行の高さ)
数値(単位なし)フォントサイズの比率で指定
数値(単位あり)px、em、％などの単位で数値指定| |text-align|テキストを揃える位置|left(左) right(右) center(真ん中) justify(両端)| |text-decoration|テキスト下線や打消し線などの飾り|none(なし) underline(下線) overline(上線) line-through(打消し線) blink(点滅)| |letter-spacing|文字の間隔|normal(標準の文字間隔)
数値にpx、rem、%などの単位を使用する| |color| 文字に色を付ける|カラーコード‥‥＃で始まる3行～6行
色の名前‥‥red、blue
RGB値‥‥赤、青、緑の値をカンマで区切る。透明度は0か1で指定| |font|フォントに関するプロパティ|font-style、font-variant、font-weight、 font-size、line-height、font-family|

背景の装飾

| プロパティ | 用途 | 値 | |:-----------------|------------------|------------------| | background-color |背景色|カラーコード‥‥＃で始まる3行-6行
色の名前‥‥red、blue
RGB値‥‥赤、青、緑の値をカンマで区切る。透明度は0か1で指定| | backgroung-image |背景画像|url‥‥画像ファイルを指定
none‥‥背景画像を使用しない| | background-repeat|背景画像の繰り返し表示の仕方|repeat‥‥縦横ともに繰り返して表示
repeat-x‥‥横方向に繰り返して表示
repeat-y‥‥縦方向に繰り返して表示
no-repeat‥‥繰り返さない| | background-size|背景画像の大きさ|数値‥‥px,rem,%,などの単位を付ける。
cover、contain| | background-position| 背景画像を表示する位置|数値‥‥px,rem,%,などの単位を付ける。
left、right、center、top、bottom| | background|背景関連のプロパティをまとめて指定|background-color、background-image、background-repeat、background-attachment、background-positonの値を指定する|

幅と高さ

|プロパティ|用途|値| |---|---|---| |width|幅を指定|数値‥‥px,rem,%などの単位を付ける
auto‥‥関連するプロパティの値によって自動設定| |height|高さを指定| 数値‥‥px,rem,%などの単位を付ける
auto‥‥関連するプロパティの値によって自動設定|

余白について

|プロパティ|用途|値| |---|---|---| |margin|要素の外側の余白|top、right、bottom、leftで方向指定
数値‥‥px,rem,%などの単位を付ける
auto‥‥関連する値によって自動設定| |padding| 要素ン内側の余白|top、right、bottom、leftで方向指定
数値‥‥px,rem,%などの単位を付ける
auto‥‥関連する値によって自動設定|

線について

|プロパティ|用途|値| |---|---|---| |border-color|線の色|カラーコード‥‥＃で始まる3行-6行で指定する
色の名前‥‥red、blueなど決められた色で指定する | |border-style|線の種類|none‥‥線を非表示、solid‥‥1本の実線、double‥‥2本の実戦
dashed‥‥破線、dotted‥‥点線、groove‥‥立体谷型の線
ridge‥‥立体山型の線、inset‥‥囲まれた部分が凹んで見える線、outset‥‥囲ま鰓部分が浮き上がって見える| |border-width|線の太さ|数値‥‥pxrem%などの単位をつける。
thin(細い)、medium(普通)、thick(太い)| |border|線の色‥スタイル‥線の太さをまとめて指定|top、right、bottom、left|

リストについて

プロパティ	用途	値
list-style-type	リストマーカーの種類	none‥リストマーカー非表示、disc‥黒丸、circle‥白丸、square‥黒四角、decimal‥数字、など
list-style-position	リストマーカーの表示位置	outside‥ボックスの外側 inside‥ボックスの内側
list-style-image	リストマーカーに使う画像	url‥画像ファイルURL none‥指定しない
list-style	リストマーカーの位置、種類、画像、まとめて指定	type、position、imageの値

flexboxについて

| プロパティ | 用途 | 値 | |-----------------|------------------|------------------| | display |flexboxを使って子要素を並べる | flex | |flex-direction|子要素の並ぶ向きを指定|・row(初期値)‥子要素を左から右に配置
・row-reverse‥子要素を右から左に配置
・column‥子要素を上から下に配置
・column-reverse‥子要素を下から上に配置| |flex-wrap|子要素の折り返し方法を指定|・nowrap(初期値)‥子要素を折り返しせず一行に並べる
・wrap‥子要素を折り返し、複数行に上から下に並べる
・wrap-reverse‥子要素を折り返し、複数行に下から上に並べる| |justify-content|水平方向の揃えを指定|・flex-strart(初期値)‥行の開始位置から配置。左揃え
・flex-end‥行末から配置。右揃え
・center‥中央揃え
・space-between‥最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
・space-around‥両端の子要素を含め、均等に間隔をあけて配置| |align-item|垂直方向の揃えを指定|・stretch(初期値)‥親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
・flex-start‥親要素の開始位置から配置。上揃え
・flex-end‥親要素の終点から配置。下揃え
・center‥中央揃え
baseline‥ベースラインで揃える | |align-content|複数行にした時の揃えを指定|・stretch(初期値)‥親要素の高さに合わせて広げて配置
・flex-start‥親要素の開始位置から配置。上揃え
・flex-end‥親要素の終点から配置。下揃え
・center‥中央揃え
・space-between‥最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
・space-around‥上下端にある子要素も含め、均等に間隔を開けて配置|

gridについて

| プロパティ|要素|値| |---|---|---| |display|CSSグリッドを使って子要素を並べる|grid| |grid-template-columns|子要素の幅を指定|数値‥px、rem、%、fr、などの単位をつける| |grid-template-rows|子要素の高さを指定|数値‥px、rem、%、fr、などの単位をつける| |grid-gap|子要素同士の余白を指定|数値‥px、rem、%、などの単位をつける|