CSSプロパティと値の一覧、クリックでクリップボードにコピー
- プロパティと値 ☆:CSS3
- ↓
- その他のプロパティ/値、説明など
- A
- animation
- ☆
- 短縮形 animation-name duration timing-function delay iteration-count direction ※
- B
- background:#000 url( );
- 短縮表記 repeat
- background-color: #9c0;
- rgba(0,0,255,0.5)
- border:1px solid #000;
- 短縮表記 dashed dotted double hidden groove ridge inset outset
- border-bottom:solid 1px #000;
- 短縮表記 dashed dotted double hidden groove ridge inset outset
- border-color:#000;
- rgba(0,0,255,0.5) 4つ指定:上から時計回り 3:上 左右 下 2:上下 左右
- border-left:solid 1px #000;
- 短縮表記 dashed dotted double hidden groove ridge inset outset
- border-right:solid 1px #000;
- 短縮表記 dashed dotted double hidden groove ridge inset outset
- border-top:solid 1px #000;
- 短縮表記dashed dotted double hidden groove ridge inset outset
- border-radius:5px;
- ☆
- 四方角丸 px em % まとめ指定の角個別指定はベンダープレフィックスが必須
- border-top-left-radius: 1em;
- ☆
- 角丸左上 px em % 右上:left→right
- border-bottom-left-radius: 1em;
- ☆
- 角丸左下px em % 右下:left→right
- bottom:10px;
- 下からの位置 em % positionと併用 position:staticは無効
- box-align:center;
- ☆
- 縦方向の揃え位置 start; end; baseline; strech;
- box-decoration-break:clone;
- ☆
- ボックスが改行する際の表示形式 slice;
- box-direction:reverse;
- ☆
- ボックス内の子要素の表示方向 normal; inherit;
- box-flex:0.0;
- ☆
- ボックスの伸縮比率
- box-flex-group:0.0;
- ☆
- 伸縮ボックスをグループ化し優先順位付け。
- box-lines:multiple;
- ☆
- 複数行(複数列)の指定 single;
- box-orient:horizontal;
- ☆
- ボックス内の子要素の配置方向 vertical; inline-axis; block-axis; inherit;
- box-ordinal-group:1;
- ☆
- 子要素に並び順を付ける(1以上の整数)
- box-pack:center;
- ☆
- ボックス内の子要素の横方向 start; end; justify;
- box-shadow:a b c d rgba(0,0,0,0.5);
- ☆
- 影 a:水平方向の距離 b:垂直方向の距離 c:ぼかしの距離 d:広がり距離 rgba:色 透明度
- box-sizing: border-box;
- ☆
- 算出 paddingとborderを含める:border-box; 含めない:content-box; 親を継承:inherit
- break-after: always;
- ☆
- ボックス後のカラムの区切り before inside
- C
- color:#000;
- rgba(0,0,255,0.5) 文字色 rgba(赤, 緑, 青, 透明度);
- column-count: 3;
- ☆
- 簡単に段組を作成。 fill gap rule rule-color rule-style rule-width span width
- columns:300px auto;
- ☆
- 簡単に段組を作成の短縮形。
- D
- display:block;
- inline inline-block inherit none
- display:flex;
- ☆
- -webkit-flex display: -moz-flex; -ms-flex; -o-flex;
- F
- float:left;
- 左寄せ。解除をわすれずに( clear:left; or clear:both; )
- float:right;
- 右寄せ。解除をわすれずに( clear:right; or clear:both; )
- font-family:sans-serif;
- "Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック" フォント一覧
- font-size:0.875em;
- 15px 1.5em 80% small x-mall large x-large etc.
- font-size-adjust: 0.5;
- ☆
- フォント同士のサイズのバラつきを調整。対応ブラウザに注意。
- font-stretch:expanded;
- ☆
- フォントの形状を幅広・幅狭。ultra-condensed ~ ultra-expanded。まだ使用出来ない?
- font-weight:bold;>
- normal bolder lighter 100 — 900
- H
- height:50%;
- 親に対し50% auto
- L
- left:10px;
- 左からの位置 em % positionと併用 position:staticは無効
- letter-spacing:0.5em;
- 文字間隔 px ex
- line-height:1.5em;
- 行の高さ。px em ex %
- list-style-type:none;
- 短縮表記。-type -image -position
- list-style-type:decimal;
- 先頭のマーカー文字種。none; disc; circle; square; lower-roman; upper-roman; 他
- M
- margin:0 auto;
- 中央揃え 0は無くても良い
- margin:10px 5px 10px 5px;
- 短縮表記 4つ指定:上から時計回り、3:上、左右 下、2:上下、右左
- margin-bottom:10px;
- 下の外側余白
- margin-left:10px;
- 左の外側余白
- margin-right:10px;
- 右の外側余白
- margin-top:10px;
- 上の外側余白
- max-height:100px;
- 高さの最大値 %;
- max-width:100px;
- 幅の最大値 %;
- min-height:100px;
- 高さの最小値 %;
- min-width:100px;
- 幅の最小値 %;
- プロパティと値 ☆:CSS3
- その他のプロパティ/値、説明など
- O
- outline:solid 1px #000;
- 短縮表記 dashed dotted double hidden groove ridge inset outset
- outline-color:#000;
- アウトラインの色
- outline-style:solid;
- none; dashed; dotted; double; hidden; groove; ridge; inset; outset;
- outline-width:1px;
- px; thin; medium; thick;
- overflow:hidden;
- auto scroll visible
- P
- padding:10px 5px 10px 5px;
- 短縮表記 内側余白:4つ指定:上から時計回り、3:上、左右 下、2:上下、右左
- padding-bottom:10px;
- 下の内側余白
- padding-lift:10px;
- 左の内側余白
- padding-right:10px;
- 右の内側余白
- padding-top:10px;
- 上の内側余白
- position:absolute;
- 絶対配置 親ボックス左上が基準置。位置指定:top:10%; left:10%; right bottom等 px指定可。
- position:fixed;
- 絶対配置 スクロールしても動かない
- position:relative;
- 相対位置へ配置
- Q
- quotes: "「" "」" "『" "』";
- 引用符 開始引用符と終了引用符をペアにしスペースで区切る。
- R
- resize:both;
- ユーザにサイズを変更できる指定 none; horizontal; vertical; inherit;
- right:10px;
- 右位置指定。px em % positionと併用 position:staticは無効
- ruby-align:center;
- ルビ設定 auto; start; left; end; right; distribute-letter; distribute-space; 他
- ruby-overhang:auto;
- ルビがテキストより幅が広い時 none; start; end;
- ruby-position:after;
- ルビの配置位置を指定 before; right;
- T
- table-layout:fixed;
- 「fixed」指定は、幅が指定がない列には残りの幅が均等に割当
- text-align:center;
- left; right; justify;。タグに注意:divは子要素に摘要、p, spanはその要素に適用
- text-indent:1em;
- 文章の一行目のインデント幅。px;
- text-decoration:underline;
- テキストに下線・上線・打ち消し線・点滅 none; overline; line-through; blink;
- text-shadow: 3px 3px 2px #60f;
- スペース区切り 水平方向の距離 垂直方向の距離 影ぼかし半径 影の色。IEは注意
- text-transform:capitalize;
- 表示は先頭大文字、lowercase; 全て小文字、uppercase; 全て大文字
- top:10px;
- em % positionと併用 position:staticは無効
- transform-origin:a b c;
- ☆
- 2D 3D変形原点 a:左上(% px) b:垂直 c:3D。水平:left center right、他
- transform-style:preserve-3d;
- ☆
- フラットに表示か立体的にか。フラット: flat;
- transform:matrix(a, b, c, d, e, f)
- ☆
- 2D変形 a:水平縮尺 b:垂直傾斜率 c:水平傾斜率 d:垂直縮尺 e:水平移動距離 f:垂直移動距離
- transform:matrix3d(4×4の数値)
- ☆
- 3D変形
- transform:perspective(100);
- ☆
- 3D変形 奥行きの深さの数値
- transform:rotate();
- ☆
- 回転表示 rotateX(); rotateY(); rotateZ(); rotate3d();
- transform:scale(0.5,0.5);
- ☆
- 拡大or縮小表示 scale(); scaleX(); scaleY(); scaleZ(); scale3d();
- transform:skew(a,b);
- ☆
- 傾斜変形 a:X軸 b:Y軸 X軸:skewX(); Y軸:skewY();
- transform:translate(a,b);
- ☆
- 表示位置の移動 a:水平方向 b:垂直方向
- transition:color 2.0s, font-size 0.3s;
- ☆
- 短縮表記 時間指定2個→間隔durationと開始deley、1個→間隔
- V
- vertical-align:middle;
- 縦方向の揃え位置 top; bottom;
- visibility:hidden;
- visible; collapse; →tableの行や列を詰めて表示
- W
- width:10px;
- 領域の幅。%;
- Z
- z-index: 10;
- 要素の重なった時の表示優先順序を指定。
- @
- @media only screen and (max-width: 480px) { }
- メディアクエリー。記述は、480px以下で適用されるCSS
- @media only screen and (min-width: 481px) and (max-width:768px) { }
- メディアクエリー。記述は、481px~768pxで適用されるCSS
- @media only screen and (min-width: 769px) { }
- メディアクエリー。記述は、769px以上で適用されるCSS
- 擬
- a:link { }
- 未訪問のリンク 1番目に記述
- a:visited { }
- 訪問済みのリンク 2番目に記述
- a:hover { }
- ポイント時のリンク 3番目に記述
- a:active { }
- 選択中のリンク 4番目に記述
- :first-child{ }
- 最初の子要素に適用。-childと-of-type:違い事例リンク
- :first-of-type{ }
- 指定タグの最初の子要素に適用
- :last-child { }
- 最後の子要素に適用
- :last-of-type { }
- 指定タグの最後の子要素に適用
- :nth-child(n) { }
- n+2:2番目~最後、-n+5:最初~5番、(n+4):nth-child(-n+7):4~7番目、(2n+1):2つ毎に1番から最後。
- :nth-of-type(n) { }
- 上記と同じだが、指定タグのみに適用。例)pタグの場合、このタグにだけ。
- 関
- linear-gradient(#fff, #000);
- ☆
- 線形グラデーション。ベンダープレフィックス必須、プロパティは一般的に background:
- radial-gradient(#fff, #000);
- ☆
- 円形グラデーション。ベンダープレフィックス必須、プロパティは background: 他