この記事では
- よく使うcssについての説明
- 超便利！コピペするだけ！一覧表
について詳しく解説しています！
cssはコーディングでデザインをするにあたり必要不可欠な知識です。
沢山のプロパティ（CSSのスタイルの種類）を扱うので、覚えづらかったり、なにを使うんだっけ…？と悩んでしまう事ってよくありませんか？
一口にcssといってもたくさんのプロパティがあります。
よく使うものから、中には出番の少ないマニアックなものまで…笑
すべて覚えるのは大変という方向けに、よく使うcssの一覧表をご用意しました！
ぜひ、コーディングの際にお役立てください。
まずは、プロパティ内の単位から！
プロパティとは作成したHTMLにスタイル（装飾）を付ける作業のことです。
その際にはカラーやフォントサイズ等のサイズを指定するので、様々な「単位」を使用します。
ここでは、CSSを記述する際によく使われる単位について確認しましょう。
| 単位 | 説明 |
| px | 「pixel」のサイズで指定する |
| % | 親要素のサイズに対しての割合を百分率で指定する 例. 親要素が16pxの場合、50％＝8px |
| em | 親要素のサイズに対する割合で指定する。 例.「％」と基本的には同じ考え方で、1em＝100％、0.5em＝50％となる。 |
| rem | ルート(htmlタグ)に指定した文字サイズを基準とした相対的な指定する。 例.htmlに16pxを指定した場合、2rem＝32px |
| vw | ユーザーが利用している画面幅を100vwとする。「viewport width」の略。 例. 画面の横幅が1000pxの場合、10vw＝100px |
| vh | ユーザーが利用している画面幅を100vwとする。「viewport heigth」の略。 例. 画面の縦幅が1000pxの場合、10vh＝100px |
CSSのプロパティとは
CSSのプロパティとは、HTMLで記述したコードにデザインを追加するためのコードです。プロパティをHTMLに指定するには、セレクタというHTML要素を指定する値を利用します。
セレクタでHTML要素を指定するには、要素に指定されているクラス属性を利用するのが基本となり、｛｝内に変更したいカラーや文字サイズ、フォント等を指定していきます。
セレクタ｛
プロパティ：値｝
セレクタ…HTML要素を指定
プロパティ…どの部分をデザインするのか（例：文字カラー）
値…プロパティに対してどのようにデザインするのか（例：文字カラー変更であれば何色にするのかを指定）
cssプロパティ一覧表
フォント・文字色
文字の色を指定するCSS「color」
p{
color: red;
}colorプロパティは、文字の色を指定するCSSプロパティです。Webページにある文字や見出しの色を変更することができます。
font
文字フォントに関する指定をまとめて行う
font-family
文字フォントファミリー（フォントの種類）を指定する
font-size
文字フォントのサイズ（大きさ）を指定する
font-style
文字フォントを斜体で表示する
font-weight
文字フォントの太さを指定する
テキスト関連
text-align
内包する要素に対して横位置の揃え方を指定する
text-decoration
文字列に装飾線や点滅を指定する
text-indent
文章のインデント幅を指定する
文字揃え・段落の振る舞い
letter-spacing
文字の間隔を指定する
line-height
行の高さを指定する
要素の横幅や高さ
height
要素の高さを指定する
width
ボックス領域の幅を指定する
max-height
要素の高さの最大値を指定する
max-width
要素の幅の最大値を指定する
min-height
要素の高さの最小値を指定する
min-width
要素の幅の最小値を指定する
余白の指定
margin
要素の外側の余白（マージン）を指定する
margin-bottom
要素の底辺に当たる外側の余白（マージン）を指定する
margin-left
要素の左辺に当たる外側の余白（マージン）を指定する
margin-right
要素の右辺に当たる外側の余白（マージン）を指定する
margin-top
要素の上辺に当たる外側の余白（マージン）を指定する
padding
要素の内側の余白を指定する
padding-bottom・
要素の内側の底辺側に当たる余白を指定する
padding-left
要素の内側の左辺側に当たる余白を指定する
padding-right
要素の内側の右辺側に当たる余白を指定する
padding-top
要素の内側の上辺側に当たる余白を指定する
要素の表示や配置方法
bottom
positionに従って要素を配置する際に、底辺からの距離を指定する
clear
要素の回り込み（float）を解除する
display
要素の表示形式を指定する
float
要素を右または左へ寄せて配置する
left
positionに従って要素を配置する際に、左辺からの距離を指定する
overflow
要素からはみ出した内容の表示方法をまとめて指定する
overflow-x
要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y
要素からはみ出した内容の垂直方向の表示方法を指定する
position
要素の配置方法について相対的か絶対的にするかを指定する
right
positionに従って要素を配置する際に、右辺からの距離を指定する
vertical-align
ボックス内のインライン要素に縦位置を揃える基準を指定する
visibility
要素の領域を残したまま表示・非表示を指定する
z-index
要素の重なり順序を指定する
背景（バックグラウンド）
background
背景に関する指定をまとめて行う
background-color
背景色を指定する
background-image
背景画像を指定する
background-position
背景画像の表示開始位置を指定する
background-repeat
背景画像の繰り返しを指定する
background-size
背景画像を表示するサイズ（大きさ）を指定する
外枠（ボーダー・アウトライン）
border
要素の周囲にボーダー（枠線）を付ける
border-bottom
要素の底辺にボーダー（枠線）を付ける
border-left
要素の左辺にボーダー（枠線）を付ける
border-radius
要素の角丸についてまとめて指定する
border-right
要素の右辺にボーダー（枠線）を付ける
border-style
ボーダー（枠線）の種類を指定する
border-top
要素の上辺にボーダー（枠線）を付ける
カラム・レイアウト関連
align-items
flexコンテナ内に含まれる全てのflexアイテムに対して揃える位置を指定する
flex
flexbox内のアイテムの伸縮に関する指定をまとめて行う
flex-direction
flexbox内のアイテムの並び順を指定する
flex-wrap
flexboxに入り切らないアイテムの折り返し方法について指定する
justify-content
flexboxコンテナ内でのボックスの詰め方を指定する
リスト（list）関連
list-style
リストマーカーに関する指定をまとめて行う
内容の挿入・置換
content
内容（コンテンツ）を挿入する
アニメーション
animation
アニメーションに関する指定をまとめて行う
トランジション
ransition
時間によって変化するトランジション効果の遷移についてまとめて指定する
影（シャドウ）の指定
box-shadow
ボックスに影をつける
text-shadow
文字に影（ドロップシャドウ）を付ける
変形・トランスフォーム
transform
要素を変形させる
解説内容の引用元：https://weblan3.com/css/css_property#css_property_purpose
まとめ
今回はcssでよく使うプロパティをまとめました。
cssは制作するWebサイトによっても、使うものが大きく変わる部分かと思います。
本記事では、特に使うことの多いプロパティをおまとめしました。
サイト制作の際にお役立てください！