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

文字色

文字色を指定する

CSS

p{
  color: red;
}

文字スタイル

フォントをイタリック体・斜体にする

CSS

p{
  font-style: italic;
}

スモールキャップ

フォントをスモールキャップにする

CSS

p{
  font-variant: small-caps;
}

文字の太さ

フォントの太さを指定する

CSS

p{
  font-weight: bold;
}

文字の大きさ

フォントのサイズを指定する

CSS

p{
  font-size: 20px;
}

行の高さ

行の高さを指定する

CSS

p{
  line-height: 1.5;
}

字体

フォントの種類を指定する

CSS

p{
  font-family: serif;
}

fontショートハンド

フォントに関する指定をまとめて行う

CSS

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

文字の位置

ブロック内の行の揃え位置を指定する

CSS

p{
  text-align: center;
}

文字の装飾

テキストの線・色・スタイルをまとめて指定する

CSS

p{
  text-decoration: underline;
}

文字の字下げ

一行目のインデント幅を指定する

CSS

p{
  text-indent: 1em;
}

文字の影

テキストに影をつける

CSS

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

大文字・小文字

大文字・小文字・全角文字への変換を指定する

CSS

p{
  text-transform: uppercase;
}

文字の間隔

文字の間隔を指定する

CSS

p{
  letter-spacing: 3px;
}

単語の間隔

単語の間隔を指定する

CSS

p{
  word-spacing: 10px;
}

空白・タブ・改行

空白・タブ・改行の表示の仕方を指定する

CSS

p{
  white-space: nowrap;
}

背景色

背景色を指定する

CSS

body{
  background-color: red;
}

背景画像

背景画像を指定する

CSS

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

背景画像繰り返し

背景画像のリピートの仕方を指定する

CSS

body{
  background-repeat: no-repeat;
}

背景画像の固定・移動

背景画像の固定・移動を指定する

CSS

body{
  background-attachment: fixed;
}

背景画像の表示位置

背景画像の表示開始位置を指定する

CSS

body{
  background-position: center;
}

backgroundショートハンド

背景に関する指定をまとめて行う

CSS

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

要素の幅

幅を指定する

CSS

div{
  width: 500px;
}

要素の高さ

高さを指定する

CSS

div{
  height: 200px;
}

要素の外側の余白

マージンに関する指定をまとめて行う

CSS

div{
  margin: 20px;
}

要素の内側の余白

パディングに関する指定をまとめて行う

CSS

div{
  padding: 20px;
}

線の太さ

ボーダーの太さを指定する

CSS

div{
  border-width: 1px;
}

線のスタイル

ボーダーのスタイルを指定する

CSS

div{
  border-style: solid;
}

線の色

ボーダーの色を指定する

CSS

div{
  border-color: red;
}

borderショートハンド

ボーダーの太さ・スタイル・色を指定する

CSS

div{
  border: 1px solid red;
}

リストマーカーの種類

マーカー文字の種類を指定する

CSS

ul{
  list-style-type: square;
}

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

マーカーの表示位置を指定する

CSS

ul{
  list-style-position: inside;
}

リストマーカーの画像

マーカー画像を指定する

CSS

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

list-styleショートハンド

マーカーに関する指定をまとめて行う

CSS

ul{
  list-style: square inside none;
}

要素の表示形式

要素の表示形式を指定する

CSS

div{
  display: block;
}

要素の配置方法

要素の配置方法を指定する

CSS

div{
  position: relative;
}

左・右に寄せて配置

左または右に寄せて配置する

CSS

div{
  float: left;
}

回り込みを解除

回り込みを解除する

CSS

div{
  clear: left;
}

はみ出た要素の表示方法

はみ出た要素の表示方法を指定する

CSS

div{
  overflow: hidden;
}

ボックスの表示・非表示

要素の表示・非表示を指定する

CSS

div{
  visibility: hidden;
}

重なりの順序

重なりの順序を指定する

CSS

div{
  z-index: 1;
}

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

CSSプロパティとは

文字や文章の装飾

文字色