【コーディング】CSS ど忘れコードまとめ

2024年6月11日2026年2月2日

閲覧ありがとうございます。

ページテーマ

CSSを書いていて“あのコードは何だっけ？”をまとめました

ん、あのコードどうやって書くんだっけ？

コードの記述順、何が先だっけ？

そんな問題解決につながれば嬉しいです。

\ このサイトで利用しています /

おすすめテーマ

おすすめサーバー

font

font-family

游ゴシックの指定方法

body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

background

疑似要素

::befoer

画像に透過カラーを重ねる

.bg {
    background: url(/* 画像URL */);
    background-size: cover;
    position: relative;
    height: 100%;
}

背景画像.bgに::beforeで

.bg::before {
    content: ''; /* これを忘れずに */
    position: absolute;
    top: 0; /* 4つの0の指定で.bg全体をカバー */
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 0,0,0,はカラー、0.5は透過度 */
}