- 最終更新日
- 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表示を指定します。
