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;
}
コメントを書く
/*ここにコメントが書けます*/
スポンサーリンク