集客に強いSEO対策完備のホームページ制作会社|新潟・東京・名古屋→全国対応
0120-66-0209
お電話

スタッフブログ

59 CSS3のプロパティまとめ

2017/06/30 HTML

CSS3のプロパティまとめ

CSS3は以前のCSS2.1に新たな機能やプロパティが追加されたものです。従来の表現に比べて、アニメーションや音声、オブジェクトの変形なども行えるようになりましたが、ブラウザによっては対応されていないものもあります。ここでは、「CSS3」のプロパティの中でも使う事が多く、ブラウザでの実装が進んでいるプロパティをまとめています。「CSS3」の列に○がついているプロパティはCSS3で新しく追加されたプロパティです。

【フォントと色】

プロパティ名 説明 CSS3
font-size フォントのサイズを指定する  
font-family フォントの種類を指定する  
font-weight フォントの太さを指定する  
font-style フォントの斜体・イタリック体を指定する  
font-variant フォントをスモールキャップにする  
font フォント関連のプロパティをまとめて指定する  
color 文字の色を指定する  
opacity 色の透明度を指定する

【テキストと行】

プロパティ名 説明 CSS3
text-align 文字の水平位置を指定する  
letter-spacing 文字の間隔を指定する  
text-decoration 文字の下線などを表示する  
text-indent 1行目のインデント幅を指定する  
text-transform 文字の大文字、小文字を指定する  
white-space タブなどの表示を指定する  
word-spacing 単語の間隔を指定する  
text-shadow 文字に影をつける
line-height 行と行の間隔を指定する  
vertical-align 縦方向の揃え位置を指定する  

【背景と枠線】

プロパティ名 説明 CSS3
background-color 背景色を指定する  
background-image 背景画像を指定する  
background-repeat 背景画像の繰り返し方を指定する  
background-position 背景画像の表示位置を指定する  
background-clip 背景画像の描画領域を指定する  
background-size 背景画像のサイズを指定する
background-origin 背景画像の基準位置を指定する
background-attachment 背景画像のスクロールを指定する  
background 背景のプロパティをまとめて指定する  
border-width 枠線の太さを指定する  
border-style 枠線のスタイルを指定する  
border-color 枠線の色を指定する  
border 枠線の太さ、スタイル、色を指定する  
border-radius 枠線の角丸をまとめて指定する
border-image 枠線に使う画像を指定する
box-shadow ボックスに影をつける

【テーブル】

プロパティ名 説明 CSS3
border-collapse セルの枠線の表示方法を指定する  
border-spacing セルの枠線の間隔を指定する  
caption-side 表のキャプションの位置を指定する  
empty-cells 空白セルの枠線を表示/非表示にする  
table-layout 表の表示方法を指定する  

【リスト】

プロパティ名 説明 CSS3
list-style リストマーカー関連をまとめて指定する  
list-style-image リストマーカーに使用する画像  
list-style-position リストマーカーの位置  
list-style-type リストマーカーの種類  

【コンテンツの挿入と置換】

プロパティ名 説明 CSS3
content 生成された内容を挿入する  
counter-increment 要素に連番を振る  
counter-reset 要素の連番をリセットする  
quotes 引用府を設定する  

【ユーザインタフェース】

プロパティ名 説明 CSS3
outline-style アウトラインのスタイルを指定する  
outline-width アウトラインの太さを指定する  
outline-color アウトラインの色を指定する  
outline アウトラインのスタイル、太さ、色を指定する  
cursor カーソルの形状を指定する  
box-sizing ボックスサイズの計算方法を指定する

【ボックスモデル】

プロパティ名 説明 CSS3
float ボックスを左右に配置  
display ボックスの種類を指定  
clear 回り込みを解除  
margin マージンの大きさ  
padding パディングの大きさ  
width ボックスの幅  
max-width ボックスの幅(最大値)  
min-width ボックスの幅(最小値)  
height ボックスの高さ  
max-height ボックスの高さ(最大値)  
min-height ボックスの高さ(最小値)  
overflow-x 表示領域から溢れた内容の扱い(水平方向)
overflow-y 表示領域から溢れた内容の扱い(垂直方向)
overflow overflow-xとyをまとめて指定する  
visibility 要素を非表示にする  

【マルチカラム】

プロパティ名 説明 CSS3
column-width カラム幅を指定する
column-width カラム数を指定する
columns カラム幅とカラム数を指定する
column-rule-width カラムの区切り線の幅を指定する
column-rule-style カラムの区切り線のスタイルを指定する
column-rule-color カラムの区切り線の色を指定する
column-rule 区切り線の幅、スタイル、色を指定する
column-gap カラムの間隔を指定する
column-span マルチカラムのカラム数を指定する

【ボジション】

プロパティ名 説明 CSS3
position ボックスの配置方法を指定する  
top 上からの距離  
right 右からの距離  
bottom 下からの距離  
left 左からの距離  
z-index ボックスの重なる順番  
clip 画像を切り抜く範囲を指定する  

CSS3の使用は「W3C」によって策定されており、変更の可能性がありますので、最新の仕様についてはCascading Style Sheet homepageをご覧下さい。

関連記事