ホーム お問合せはこちらから ページのトップへ戻る

新潟のホームページ制作会社・ワードプレスでウェブサイトを製作するドコドア
お問合せはこちらから お電話でのお問い合わせは0120-66-0209まで

SEOブログ

スタッフブログ

59 CSS3のプロパティまとめ

2014.7.15

html59

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」をご覧下さい。

主にコーディング作業や納品後の更新作業を担当しています。デザイン業務もちょこちょこやってます。PHPやらJQueryの勉強中。
>清野哲郎のプロフィールを見る

お問合せメールフォーム

このページがあなたにとって役に立ったと感じたら下のボタンから共有をよろしくお願いします。

WORKS

制作事例一覧を見る
  • case72i
  • case89i
  • case107i
  • case108i
  • case111i
  • case88i
  • case98i
  • case110i
  • case113i
  • case112i
  • case102i
  • case106i
  • case104i
  • case103i
  • case100i
  • case99i
  • case109i
  • case96i
  • case105i
  • case86i
  • Ciel02
  • case22_1
  • toiro
  • case80i
  • case79i
  • case78i
  • case06-2i
  • case76i
  • case74i
  • case73i
  • case97i
  • スクリーンショット 2016-04-05 18.41.36
  • case90i
  • case82i
  • case87i
  • case71アイキャッチ
  • 国際大学
  • case84i
  • dejimo0
  • case65アイキャッチ
  • kirin_hanbai
  • case67アイキャッチ
  • case75i
  • flowerhome0
  • keiwa
  • greenstyle0
  • case57_1
  • case92i
  • case56_2
  • case54_2
  • case52_1
  • case51-1
  • case49-1
  • joywood0
  • case59_1
  • 上越どんぶり巡り様
  • yu
  • 無添加住宅
  • neal
  • hukuhuku1
  • sasa-t
  • shinoda
トップへ戻るボタン

WORKS

zero case76i case59_1
新潟のホームページ制作・Webデザイン製作のドコドア

本 社 新潟県三条市土場1-5 tel 0120-66-0209
新潟オフィス 新潟市中央区天神1-1 プラーカ3 2F
東京オフィス 渋谷区道玄坂1-12-1 渋谷マークシティW22F