【CSS】プロパティチートシート TECH
CSSプロパティとは
適用するスタイルの種類のこと
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;
}