【CSS】プロパティチートシート | コレワカ

【CSS】プロパティチートシート

CSSプロパティとは

適用するスタイルの種類のこと

セレクタ{
  プロパティ: 値;
}

文字や文章の装飾

文字色

p{
  color: red;
}

文字スタイル

p{
  font-style: italic;
}

スモールキャップ

p{
  font-variant: small-caps;
}

文字の太さ

p{
  font-weight: bold;
}

文字の大きさ

p{
  font-size: 20px;
}

行の高さ

p{
  line-height: 1.5;
}

字体

p{
  font-family: serif;
}

fontショートハンド

p{
  font: italic bold/20px 1.5 serif;
}

文字の位置

p{
  text-align: center;
}

文字の装飾

p{
  text-decoration: underline;
}

文字の字下げ

p{
  text-indent: 1em;
}

文字の影

p{
  text-shadow: 3px 3px 2px #444;
}

大文字・小文字

p{
  text-transform: uppercase;
}

文字の間隔

p{
  letter-spacing: 3px;
}

単語の間隔

p{
  word-spacing: 10px;
}

空白・タブ・改行

p{
  white-space: nowrap;
}

背景の装飾

背景色

body{
  background-color: red;
}

背景画像

body{
  background-image: url(image.png);
}

背景画像繰り返し

body{
  background-repeat: no-repeat;
}

背景画像の固定・移動

body{
  background-attachment: fixed;
}

背景画像の表示位置

body{
  background-position: center;
}

backgroundショートハンド

body{
  background: red url(image.png) no-repeat fixed center;
}

幅と高さ

要素の幅

div{
  width: 500px;
}

要素の高さ

div{
  height: 200px;
}

余白

要素の外側の余白

div{
  margin: 20px;
}

要素の内側の余白

div{
  padding: 20px;
}

線

線の太さ

div{
  border-width: 1px;
}

線のスタイル

div{
  border-style: solid;
}

線の色

div{
  border-color: red;
}

borderショートハンド

div{
  border: 1px solid red;
}

リスト

リストマーカーの種類

ul{
  list-style-type: square;
}

リストマーカーの表示位置

ul{
  list-style-position: inside;
}

リストマーカーの画像

ul{
  list-style-image: url(image.png);
}

list-styleショートハンド

ul{
  list-style: square inside none;
}

表示・配置

要素の表示形式

div{
  display: block;
}

要素の表示形式

div{
  position: relative;
}

左・右に寄せて配置

div{
  float: left;
}

回り込みを解除

div{
  clear: left;
}

はみ出た要素の表示方法

div{
  overflow: hidden;
}

ボックスの表示・非表示

div{
  visibility: hidden;
}

重なりの順序

div{
  z-index: 1;
}