よく使うCSSのまとめ

Webページ作成でよく使うCSSをまとめました。

コピーして使えます。

要素の・・・

背景色

.sample{
  background-color: pink;
}

<p class="sample">おはようございます</p>

おはようございます

背景画像を設定する

.sample{
background-image: url(“ファイル名.jpg”);
background-size: cover
}

影をつける

.sample{
  box-shadow: 3px 3px 3px 3px black;
}

おはようございます

透過する

.sample{
  opacity: 0.5;
  background-color: pink;
}

おはようございます

境界線、枠線をつける

.sample{
  border: 1px solid red;
}

おはようございます

角を丸くする

.sample{
  border-radius: 10px;
}

おはようございます

インライン要素をブロック要素にする

.sample{
  display: block;
}

文字

太くする

.sample{
  font-weight: bold;
}

おはようございます

サイズを変える

.sample{
  font-size: 30px;
}

おはようございます

間隔をあける

.sample{
  letter-spacing: 10px;
}

おはようございます

色を変える

.sample{
  color: red;
}

影をつける

.sample{
  text-shadow: 3px 3px 15px black;
}

おはようございます

リンクの下線を消す

.sample{
  text-decoration: none;
}

おはようございます

行の高さ（間隔）を調整

.sample{
  line-height: 35px;
}

リストの点を非表示にする

.sample{
  list-style: none;
}

配置

文字を中央へ移動する

.sample{
  text-align: center;
  background-color: pink;
}

おはようございます

ブロック要素(p,h1,div)を中央揃え

.sample{
  margin:0 auto;
  width: 200px;
  background-color: pink;
}

おはようございます

その他

マウスカーソルがのった時だけCSSを適用する

.blue:hover{
  color: white;
}

コメントを書く

/*ここにコメントが書けます*/