プログラミングで暮らしをハック
ITで暮らしを便利にするブログ
Web制作のノウハウ

よく使う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;
}

 

 

コメントを書く

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