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

CSSでよく使うプロパティをまとめました 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 など)

letter-spacing

letter-spacingプロパティは、要素内のテキストの文字間隔を設定します。

詳細
サイズ単位文字間隔を指定する (px, %, em, rem など)

z-index

z-indexプロパティは、要素の重ね合わせ順序を設定します。positionプロパティがstatic以外の要素に対してのみ適用されます。

詳細
整数要素の重ね合わせ順序を指定する。数値が大きいほど前面に表示される。
           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

CSS
スポンサーリンク
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました