*

ウェッブ制作・パソコン

Width =px

ホーム > 制作/編集・補助・メニュー概要 >
CSSプロパティ一覧&クリップボード・コピー

CSSプロパティと値の一覧、クリックでクリップボードにコピー

幅 740~810px 使い易いサイズ
  • プロパティと値 ☆:CSS3
  •  ↓
  • その他のプロパティ/値、説明など

  • A
  • animation
  • 短縮形 animation-name duration timing-function delay iteration-count direction

  • border-color:#000;
  • rgba(0,0,255,0.5) 4つ指定:上から時計回り 3:上 左右 下 2:上下 左右
  • border-radius:5px;
  • 四方角丸 px em % まとめ指定の角個別指定はベンダープレフィックスが必須
  • 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-size-adjust: 0.5;
  • フォント同士のサイズのバラつきを調整。対応ブラウザに注意。
  • font-stretch:expanded;
  • フォントの形状を幅広・幅狭。ultra-condensed ~ ultra-expanded。まだ使用出来ない?

  • L
  • left:10px;
  • 左からの位置 em % positionと併用 position:staticは無効

  • margin:10px 5px 10px 5px;
  • 短縮表記 4つ指定:上から時計回り、3:上、左右 下、2:上下、右左

  • プロパティと値 ☆:CSS3
  • その他のプロパティ/値、説明など

  • P
  • padding:10px 5px 10px 5px;
  • 短縮表記 内側余白:4つ指定:上から時計回り、3:上、左右 下、2:上下、右左
  • position:absolute;
  • 絶対配置 親ボックス左上が基準置。位置指定:top:10%; left:10%; right bottom等 px指定可。

  • 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; 他
  • T
  • table-layout:fixed;
  • 「fixed」指定は、幅が指定がない列には残りの幅が均等に割当
  • text-align:center;
  • left; right; justify;。タグに注意:divは子要素に摘要、p, spanはその要素に適用
  • top:10px;
  • em % positionと併用 position:staticは無効
  • Z
  • z-index: 10;
  • 要素の重なった時の表示優先順序を指定。
  • a:hover { }
  • ポイント時のリンク 3番目に記述
  • :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タグの場合、このタグにだけ。
  • radial-gradient(#fff, #000);
  • 円形グラデーション。ベンダープレフィックス必須、プロパティは background: 他