よく使うCSSプロパティ

6778 ワード
自分用メモ 自分用メモ テキストリンク

よく使う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、%、などの単位をつける
cocos 2 d-x 3.3 lua拡張ライブラリのインポート
OC秩序辞書