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;

汎用クラス

margin

.mt-5  { margin-top: 5px }
.mt-10 { margin-top: 10px }
.mt-15 { margin-top: 15px }
.mt-30 { margin-top: 30px }
.mt-60 { margin-top: 60px }

.mb-5  { margin-bottom: 5px }
.mb-10 { margin-bottom: 10px }
.mb-15 { margin-bottom: 15px }
.mb-30 { margin-bottom: 30px }
.mb-60 { margin-bottom: 60px }

flex

/** flex */
.row { display: flex; }
/** 等間隔 */
.row > .col { flex: 1; }
/** 比率指定 */
.row > .col-1 { flex: 1; }
.row > .col-2 { flex: 2; }
.row > .col-3 { flex: 3; }
.row > .col-4 { flex: 4; }
.row > .col-5 { flex: 5; }
.row > .col-6 { flex: 6; }
.row > .col-7 { flex: 7; }
.row > .col-8 { flex: 8; }
.row > .col-9 { flex: 9; }
.row > .col-10 { flex: 10; }
.row > .col-11 { flex: 11; }

/** flex (余白あり) */
.row.gap { margin: 0 -15px 15px 0; }
/** 等間隔時の余白 */
.row.gap > .col { margin: 0 15px 0 0; }
/** 比率指定時の余白 */
.flex.flex-gap > .col-1 > .col-inner,
.flex.flex-gap > .col-2 > .col-inner,
.flex.flex-gap > .col-3 > .col-inner,
.flex.flex-gap > .col-4 > .col-inner,
.flex.flex-gap > .col-5 > .col-inner,
.flex.flex-gap > .col-6 > .col-inner,
.flex.flex-gap > .col-7 > .col-inner,
.flex.flex-gap > .col-8 > .col-inner,
.flex.flex-gap > .col-9 > .col-inner,
.flex.flex-gap > .col-10 > .col-inner,
.flex.flex-gap > .col-11 > .col-inner
{ margin: 0 15px 0 0; }

@media (max-width: 600px) {
    .row {
        display: block;
    }
    .col,
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11 {
        margin-top: 15px;
    }
}