CSS入門(よく目にする、使用するプロパティ)

概要

「あのプロパティは、こういう用途の時に使うはず..」となった時の忘備録として概要的な一覧を作成。

プロパティ一覧

• 汎用的、FlexBox、メディアクエリ...等ざっくりと分類ごとに一覧化しています。
• 随時、更新します。

汎用的

プロパティ	概要	備考
margin	要素の周りに追加の領域を作成	inline要素には、上下のmarginが効かない ※家はそのままで土地だけ広げるみたいな
padding	要素の内部に追加の領域を作成	※家の中(部屋の広さ)を広げるみたいな
text-align	水平方向(横方向)の位置を調整	block要素に有効
vertical-align	垂直方向(縦方向)の位置を調整	inline,inline-block要素に有効
text-decoration	文字の装飾を指定
box-shadow	要素のフレームの周囲にシャドウ効果を追加
border-bottom	下ボーダーのスタイル・太さ・色を指定	初期値はnone
cursor	マウスポインターが要素の上にいるときに表示されるマウスカーソルを指定	初期値はauto
border-radius	要素の角を丸める設定
border-bottom-left-radius	要素の左下の角を丸める設定
border-bottom-right-radius	要素の右下の角を丸める設定
white-space	要素内のホワイトスペースをどのように扱うかを設定
line-height	行ボックスの高さを指定	主にテキストの行間を設定するために使用する
font-weight	フォントの太さを指定	font-family に依存する
opacity	要素の不透明度を設定	当該要素の内容を含む全体に影響する　 【0(透明※見えない) < 0.5(半透明) < 1(はっきり)】
transition	要素の 2 つの状態の変化を定義	擬似クラスや、JavaScriptを使用した動的な設定で用いることが多い
min-width	要素の最小幅を設定	指定したサイズ以下にはならない！ってこと
max-width	要素の最大幅を設定	指定したサイズ以上にはならない！ってこと
position	要素の配置に関する設定	・top、bottom、left、rightプロパティで位置を調整 ・親要素は「relative」子要素は「absolute」を指定
counter-reset	カウンター名を指定するとカウンターとして使用できる(連番などに使用)	初期値はnone
counter-increment	カウンタを増加（or減少）させる	初期値は+1
transparent	要素を透明にするプロパティ
top	基準の上から「〇〇px,%..など」の位置に要素を配置	どこを基準とするかはpositionプロパティで変わる
right	基準の右から「〇〇px,%..など」の位置に要素を配置	どこを基準とするかはpositionプロパティで変わる
bottom	基準の下から「〇〇px,%..など」の位置に要素を配置	どこを基準とするかはpositionプロパティで変わる
left	基準の左から「〇〇px,%..など」の位置に要素を配置	どこを基準とするかはpositionプロパティで変わる

flexbox

プロパティ	概要	備考
flex-direction	並ぶ方向を指定	row(横※初期値),column(縦)
justify-content	子アイテム間や周囲への間隔を配置する方法を指定
align-items	flexアイテムの縦方向位置を指定
order	子要素の順番を入れ替え	0から始まる(「0=1番目」「1を指定=2番目」ということ)

メディアクエリ

プロパティ	概要	備考
min-width	指定した値以上の時に適用させる ※モバイルファーストはこちら	ブレイクポイントとして使用した場合
max-width	指定した値以下の時に適用させる ※PCファーストはこちら	ブレイクポイントとして使用した場合

番外編

単位	概要	備考
rem	htmlタグの文字サイズから相対的に指定できる単位	htmlタグに「font-size: 62.5%」と指定しておくと、ブラウザのデフォルト設定の場合は文字サイズが10pxになる