• 最終更新日
  • CSS

よく使うCSSのプロパティ一覧と効果!ホームページをデザインする要素

ホームページのデザインに使うCSSのプロパティを紹介します。

プロパティという言葉を説明するのは難しいですが、日本語にすると特性や属性という意味です。この辺は完璧に理解する必要はないです!ニュアンスで覚えてください(笑)。

指定したHTMLタグに対して「何を・どうする」という指示を与えます。CSSはコピペでも使えますが、プロパティを知っているほどデザインのアレンジが広がります。

フォント

color
文字色を指定します。
font-size
文字サイズを指定します。
font-weight
文字の太さを指定します。
font-style
文字を斜体に指定します。
font-family
文字の種類を指定します。

テキスト

letter-spacing
文字の間隔を指定します。
line-height
行の高さを指定します。
text-align
左寄せ・中央寄せ・右寄せを指定します。
vertical-align
縦方向に揃える位置を指定します。
text-indent
1行目の字下げを指定します。
text-decoration
テキストの装飾を指定します。
line-break
改行の禁則処理を指定します。
word-break
改行の仕方を指定します。
text-shadow
テキストに影を指定します。

横幅・高さ

width
横幅を指定します。

min-width
横幅の最小値を指定します。

max-width
横幅の最大値を指定します。

height
高さを指定します。

min-height
高さの最小値を指定します。

max-height
高さの最大値を指定します。

box-sizing
widthやheightの値にpaddingとborderを含めるかどうかを指定します。

余白

padding
内側の余白を指定します。

padding-top
上部の余白を指定します。

padding-right
右部の余白を指定します。

padding-bottom
下部の余白を指定します。

padding-left
左部の余白を指定します。

margin
外側の余白を指定します。

margin-top
上部の余白を指定します。

margin-right
右部の余白を指定します。

margin-bottom
下部の余白を指定します。

margin-left
左部の余白を指定します。

ボーダー

border-width
枠線の太さを指定します。
border-style
枠線のスタイルを指定します。
border-color
枠線の色を指定します。
border
枠線の太さ・スタイル・色をまとめて指定します。

border-top
上部の枠線を指定します。

border-right
右部の枠線を指定します。

border-bottom
下部の枠線を指定します。

border-left
左部の枠線を指定します。

背景

background-color
背景色を指定します。
background-image
背景画像を指定します。
background-size
背景画像のサイズを指定します。
background-attachment
背景画像の固定表示を指定します。
background-position
背景画像の位置を指定します。
background-repeat
背景画像のリピート表示を指定します。

リスト

list-style
リストマークを指定します。
list-style-image
リストマークの画像を指定します。
list-style-type
リストマークの種類を指定します。
list-style-position
リストマークの位置を指定します。

テーブル

border-spacing
隣り合うセルとの境界線の間隔を指定します。
border-collapse
隣り合うセルとの枠線の間隔を指定します。
table-layout
表のレイアウトを指定します。

表示・配置

position
配置方法を指定します。

top
指定範囲の上部からの位置を指定します。

right
指定範囲の右部からの位置を指定します。

bottom
指定範囲の下部からの位置を指定します。

left
指定範囲の左部からの位置を指定します。

overflow
はみ出た要素の処理を指定します。

overflow-x
はみ出た要素の左右の処理を指定します。

overflow-y
はみ出た要素の上下の処理を指定します。

display
要素の表示形式を指定します。
z-index
重なりの順序を指定します。
float
回り込みを指定します。
clear
回り込みを解除します。
visibility
表示・非表示を指定します。
opacity
透明度を指定します。
cursor
カーソルの種類を指定します。

アウトライン

outline
アウトラインの表示を指定します。
outline-width
アウトラインの太さを指定します。
outline-style
アウトラインのスタイルを指定します。
outline-color
アウトラインの色を指定します。

アニメーション

animation
アニメーションの設定を指定します。
animation-name
アニメーションのキーフレーム名を指定します。
animation-duration
アニメーションにかかる時間を指定します。
animation-timing-function
アニメーションの速度を指定します。
animation-delay
アニメーションの始まりを指定します。
animation-iteration-count
アニメーションの再生される回数を指定します。
animation-direction
アニメーションの向きを指定します。
animation-fill-mode
アニメーションの再生前後のスタイルを指定します。
transition
要素の時間的変化を指定します。
transition-property
時間的変化を適応するプロパティ名を指定します。
transition-duration
時間的変化にかかる時間を指定します。
transition-timing-function
時間的変化の進行度を指定します。
transition-delay
時間的変化の始まりを指定します。
transform
要素の変形を指定します。
transform-origin
変形させる要素の中心点を指定します。
transform-style
3D表示を指定します。

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ!
Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。