CSS のスニペット集

このページは、CSS のスニペットなどをまとめる予定のページです。

目次

注意

  • コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。
  • 少なくとも IE11 以上で使用できるように調整しています。(他の想定ブラウザは Edge, Chrome, Firefox)
  • サンプルは「CSS のサンプル」を確認してください。
  • このページのコードはコピーしやすいようにしているため断片的になっています。

スニペット

天地中央寄せ (position: absolute)

    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100px;
    height: 100px;
    margin: auto;

天地中央寄せ (flex)

    display: flex;
    align-items: center;
    justify-content: center;

疑似要素

xxx::after {
    content: "";
    display: block;
}
  • xxx の部分に必要なセレクタを記載し、display の下に追加のスタイルを記載します。(position, width, height等)

メディアクエリ

@media (max-width: 680px) {
    xxx {

    }
}

グラデーション

    background: linear-gradient(to right, black, white);

縞模様

    background: linear-gradient(
        -45deg,
        hsl(48, 100%, 52%) 25%,
        hsl(52, 100%, 50%) 25% 50%,
        hsl(48, 100%, 52%) 50% 75%,
        hsl(52, 100%, 50%) 75%);
    background-size: 30px 30px;

トランジション

   transition: opacity 0.2s;
  • property duration timing-function delay の順で記載します。(複数プロパティの場合はカンマ区切り)

アニメーション

   animation: fadein 1s forwards;
  • name duration timing-function delay iteration direction fill-mode を空白区切りで記載します。
@keyframes fadein {
    to { opacity: 1; }
}
@keyframes scale {
    to { transform: scale(2); }
}

回転

   animation: rotate 1s linear infiniate;
@keyframes rotate {
    from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
}

フォント

Noto Sans JP (Google Fonts)

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&amp;subset=japanese" rel="stylesheet">
    font-family: "Noto Sans JP";

明朝系

    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;