川口・さいたまのホームページ製作 川口・さいたまのホームページ制作会社関東ダイイチへ問い合わせる 埼玉県川口市のホームページ制作会社関東ダイイチへ電話する さいたま・川口のホームページ制作会社関東ダイイチへメールする



Illustratorのチュートリアル|さいたま・川口の低価格なホームページ制作会社
TOPダイイチウェブニュース>CSS3リファレンス.1

CSS3リファレンス.1

今回は、CSS3のまとめをご紹介いたします


1.背景とボーダー (Backgrounds and Borders モジュール)

背景

background-clip …… 背景の適用範囲を指定する
background-origin …… 背景の基準位置を指定する
background-size …… 背景画像のサイズを指定する


角丸

border-radius …… 角丸をまとめて指定する
border-top-left-radius …… 左上の角丸を指定する
border-top-right-radius …… 右上の角丸を指定する
border-bottom-left-radius …… 左下の角丸を指定する
border-bottom-right-radius …… 右下の角丸を指定する


画像ボーダー

border-image …… 画像ボーダーを指定する
border-image-source …… ボーダーに使用する画像ファイルを指定する
border-image-slice …… 画像のボーダー使用範囲を指定する
border-image-width …… 画像ボーダーの太さを指定する
border-image-outset …… ボーダーイメージエリアを広げる
border-image-repeat …… 画像ボーダーの繰り返し方法を指定する


ボックスの表示

box-decoration-break …… ボックスが改行する際の表示形式を指定する
box-shadow …… ボックスに影をつける


2.2D 3D 変形 (2D 3D Transforms モジュール)

変形

transform …… 要素に2D変形、または、3D変形を適用する
transform:matrix() …… 行列を使用して要素に2D変形を適用する
transform:matrix3d() …… 行列を使用して要素に3D変形を適用する
transform:translate() …… 要素の表示位置を移動させる
transform:scale() …… 要素を拡大・縮小表示する
transform:rotate() …… 要素を回転表示する
transform:skew() …… 要素を傾斜変形させる
transform:perspective() …… 3D変形の奥行きの深さを指定する
transform-origin …… 2D変形、または、3D変形の原点を指定する
transform-style …… 子要素がフラットに描画されるか立体的に描画されるかを指定する
background-size …… 背景画像のサイズを指定する


遠近法

perspective …… 3D変形の奥行きの深さを指定する(親要素に指定)
perspective-origin …… 奥行きの消失点を指定する
backface-visibility …… 要素の裏面を見られるようにするかどうかを指定する


3.時間的変化 (Transitions モジュール)

時間的変化

transition …… transition効果(時間的変化)をまとめて指定する
transition-property …… transition効果を適用するCSSプロパティ名を指定する
transition-duration ……変化に掛かる時間を指定する
transition-timing-function …… 変化のタイミング・進行割合を指定する
transition-delay …… 変化がいつ始まるかを指定する


4. アニメーション (Animations モジュール)

アニメーション

animation …… アニメーションについてまとめて指定する
animation-name …… アニメーション名を指定する
animation-duration …… アニメーション一回分の時間の長さを指定する
animation-timing-function …… アニメーションのタイミング・進行割合を指定する
animation-iteration-count …… アニメーションの繰り返し回数を指定する
animation-direction …… アニメーションを交互に反転再生させるかどうかを指定する
animation-play-state …… 再生中か一時停止かを指定する
animation-delay …… アニメーションがいつ始まるかを指定する

5. 透過色 (Color モジュール)

色・透明度

opacity …… 要素の透明度を指定する
rgba() …… RGBAカラーモデルで色を指定する(プロパティでなく値)


6. グラデーション (Image Values モジュール)

グラデーション

linear-gradient() …… 線形グラデーションを指定する(プロパティではなく値)
radial-gradient() …… 円形グラデーションを指定する(プロパティではなく値)


7. ボックスの段組み (Flexible Box Layout モジュール)

ボックスの配置・方向・揃え位置

box-orient …… ボックス内の子要素の配置方向を指定する
box-direction …… ボックス内の子要素の表示方向を指定する
box-ordinal-group …… ボックス内の子要素に並び順グループを割り当てる
box-align …… ボックス内の子要素の縦方向の揃え位置を指定する


ボックスの伸縮

box-flex …… 伸縮ボックスの伸縮比率を指定する
box-flex-group …… 伸縮ボックスにグループを割り当てて伸縮の優先順位を指定する


ボックスの揃え位置

box-pack …… ボックス内の子要素の横方向の揃え位置を指定する
box-lines …… ボックス内を複数行(複数列)にするかどうかを指定する


8. 文章の段組み (Multi-column Layout モジュール)

カラムの数と幅

columns …… カラム幅とカラム数を指定する
column-width …… カラム幅を指定する
column-count …… カラム数を指定する

カラムの間隔と区切り線

column-gap …… カラムの間隔を指定する
column-rule …… カラムの区切り線のスタイル・幅・色を指定する
column-rule-color …… カラムの区切り線の色を指定する
column-rule-style …… カラムの区切り線のスタイルを指定する
column-rule-width …… カラムの区切り線の幅を指定する

カラムの改行

break-after …… ボックス後でのカラムの区切り方法を指定する
break-before …… ボックス前でのカラムの区切り方法を指定する
break-inside …… ボックス途中でのカラムの区切り方法を指定する

カラムへの要素の配置

column-span …… 要素がまたがる(横切る)カラム数を指定する
column-fill …… カラム同士の高さ(長さ)を揃えるかどうかを指定する


9. インターフェース (Basic User Interface モジュール)

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

appearance …… プラットフォームにおける標準的なUIの外観にする
icon …… 要素のアイコンを指定する
box-sizing …… ボックスサイズの算出方法を指定する
outline-offset …… アウトラインのオフセット値を指定する
resize …… ユーザーが要素のサイズを変更できるかどうかを指定する

フォーカス移動

nav-index …… タブキーによるフォーカス移動の順序を指定する
nav-up …… 上方向キーにフォーカス移動を割り当てる
nav-right …… 右方向キーにフォーカス移動を割り当てる
nav-down …… 下方向キーにフォーカス移動を割り当てる
nav-left …… 左方向キーにフォーカス移動を割り当てる

関連ニュース
CSS3リファレンス.2
CSS3リファレンス.3









ホームページ制作の料金|川口WEB会社HP制作の製作実績|川口のホームページ制作会社HP制作会社の関東ダイイチ|会社案内ウェブ制作のさいたま|関東ダイイチ|問い合わせ
Copyright © 2014 web no daiichi All Rights Reserved.  
>TOP >ホームページの必要性 >料金
>ご注文から公開まで >お問い合わせ >制作実績
>会社案内 >ダイイチニュース  >リンク
ホームページ制作|埼玉県川口市西川口2-10-1
川口・さいたまのWEB制作