*

PC LIFE

ホーム >  Web制作 >  サイト編集支援 > 
CSSプロパティ一覧&クリップボード・コピー

CSSプロパティと値の一覧及びCボタンクリックでクリップボードにコピー

  • プロパティと値 ☆: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-orient:horizontal;
  • ボックス内の子要素の配置方向 vertical; inline-axis; block-axis; inherit;
  • box-pack:center;
  • ボックス内の子要素の横方向 start; end; justify;
  • box-sizing: border-box;
  • 算出 paddingとborderを含める:border-box; 含めない:content-box; 親を継承:inherit
  • C
  • color:#000;
  • rgba(0,0,255,0.5) rgba(赤, 緑, 青, 透明度);
  • 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 %
  • M
  • margin:0 auto;
  • 中央揃え
  • 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;
  • 絶対配置 親ボックスの左上が基準位置
  • position:fixed;
  • 絶対配置 スクロールしても動かない
  • position:relative;
  • 相対位置へ配置
  • R
  • resize:both;
  • ユーザにサイズを変更できる指定 none; horizontal; vertical; inherit;
  • right:10px;
  • em % positionと併用 position:staticは無効
  • ruby-align:center;
  • ルビ設定 auto; start; left; end; right; distribute-letter; distribute-space; 他
  • T
  • table-layout:fixed;
  • 「fixed」指定は、幅が指定がない列には残りの幅が均等に割当
  • text-align:center;
  • left; right; justify;
  • 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は無効
  • V
  • vertical-align:middle;
  • 縦方向の揃え位置 top; bottom;
  • visibility:hidden;
  • visible; collapse; →tableの行や列を詰めて表示
  • W
  • width:10px;
  • 領域の幅。%;
  • Z
  • z-index:5;
  • 要素の重なった時の表示優先順序を指定。
  • @
  • @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{ }
  • 最初の子要素に適用
  • :last-child { }
  • 最後の子要素に適用
  • :nth-child(n) { }
  • n+2 2番目~最後、-n+5 最初~5番目、nth-child(n+4):nth-child(-n+7) 4番目~7番目
  • radial-gradient(#fff, #000);
  • 円形グラデーション。ベンダープレフィックス必須、プロパティは background: 他