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

CSSはHTMLを整形し、見た目を整えるために使われる重要なものになります。
Webサイトをデザインする上では欠かせないものになるので、よく使うプロパティをまとめてみました。

display

displayプロパティは、要素の表示タイプを設定します。これは、他の要素との相互作用やレイアウト方法に影響を与えます。

値	詳細
block	要素をブロックレベル要素として表示する
inline	要素をインライン要素として表示する
inline-block	要素をインライン要素として表示し、ブロックレベル要素のようにスタイリングを適用する
none	要素を非表示にする

なお、カラム（横並びや順番の入れ替え）において重要な値であるflexについては別記事で説明致します。

CSS Flexboxを使ってレイアウトの基礎を学習しよう

FlexboxはCSSの強力なレイアウト機能で、簡単にコンテンツを配置、調整、整列できます。今回は、Flexboxの基本的な使い方を学習しましょう。Flexboxの基本的な書き方Flexboxを使うには、まず親要素にdis...

position

positionプロパティは、要素の配置方法を設定します。これによって、要素の配置や重ね合わせを制御できます。

値	詳細
static	要素を通常の文書フローに従って配置する
relative	要素を相対的に移動し、他の要素に影響を与えない
absolute	要素を絶対的に配置し、他の要素に影響を与えない
fixed	要素をビューポートに固定して配置する
sticky	要素を相対的に配置し、スクロールに応じて固定になる

float

floatプロパティは、要素を左または右に浮かせることができます。これにより、テキストや他の要素が回り込むことができます。

値	詳細
left	要素を左に浮かせる
right	要素を右に浮かせる
none	要素を浮かせない

width

widthプロパティは、要素の横幅を設定します。

値	詳細
サイズ単位	要素の横幅を指定する (px, %, em, rem など)

height

heightプロパティは、要素の縦幅を設定します。

値	詳細
サイズ単位	要素の縦幅を指定する (px, %, em, rem など)

margin

marginプロパティは、要素の外側の余白を設定します。

値	詳細
サイズ単位	要素の外側の余白を指定する (px, %, em, rem など)

padding

paddingプロパティは、要素の内側の余白を設定します。

値	詳細
サイズ単位	要素の内側の余白を指定する (px, %, em, rem など)

border

borderプロパティは、要素の境界線を設定します。

値	詳細
線の太さ	境界線の太さを指定する (px, %, em, rem など)
線のスタイル	境界線のスタイルを指定する (solid, dashed, dotted など)
色	境界線の色を指定する (色名, #カラーコード, rgba, hsla など)

background-color

background-colorプロパティは、要素の背景色を設定します。

値	詳細
色	要素の背景色を指定する (色名, #カラーコード, rgba, hsla など)

font-family

font-familyプロパティは、要素のフォントファミリーを設定します。

値	詳細
フォント名	使用するフォントファミリー名を指定する

font-size

font-sizeプロパティは、要素のフォントサイズを設定します。

値	詳細
サイズ単位	フォントサイズを指定する (px, %, em, rem など)

font-weight

font-weightプロパティは、要素のフォントの太さを設定します。

値	詳細
数値	フォントの太さを指定する (100, 200, 300, …, 900)
normal	通常のフォントの太さに設定する (400)
bold	太字のフォントの太さに設定する (700)

color

colorプロパティは、要素のテキストカラーを設定します。

値	詳細
色	テキストカラーを指定する (色名, #カラーコード, rgba,hsla など)

text-align

text-alignプロパティは、要素内のテキストの水平方向の揃えを設定します。

値	詳細
left	テキストを左揃えにする
right	テキストを右揃えにする
center	テキストを中央揃えにする
justify	テキストを両端揃えにする

line-height

line-heightプロパティは、要素内のテキストの行間を設定します。

値	詳細
数値	フォントサイズに対する行高の倍率を指定する
サイズ単位	行高を具体的なサイズで指定する (px, %, em, rem など)