作成日:  (更新日: )

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;

疑似要素

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

メディアクエリ

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

    }
}

グラデーション

    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); }
}

フォント

游ゴシック

font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
font-weight: 500;

游明朝

font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", serif;
  • "游明朝体", YuMincho は Mac, "游明朝", "Yu Mincho" は Windows 用

Noto Sans JP

HTML
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&amp;display=swap" rel="stylesheet">
CSS
font-family: 'Noto Sans JP', sans-serif;

Noto Serif JP

HTML
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&amp;display=swap" rel="stylesheet">
CSS
font-family: 'Noto Serif JP', serif;

M PLUS Rounded 1c

HTML
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&amp;display=swap" rel="stylesheet">
CSS
font-family: 'M PLUS Rounded 1c', sans-serif;

Roboto Condensed (700)

HTML
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&amp;display=swap" rel="stylesheet">
CSS
font-family: 'Roboto Condensed', sans-serif;

明朝系

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

スマートフォン向け

入力欄フォーカス時にズームさせない

@media (max-width: 680px) {
    input, select, textarea {
        font-size: 16px;
    }
}

ダブルタップでの拡大を抑止する

html {
    touch-action: manipulation;
}

横向き表示にしても文字サイズを拡大しない

body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

汎用クラス

margin

.mt-0   { margin-top: 0 !important; }
.mt-5   { margin-top: 5px !important; }
.mt-10  { margin-top: 10px !important; }
.mt-15  { margin-top: 15px !important; }
.mt-30  { margin-top: 30px !important; }
.mt-60  { margin-top: 60px !important; }
.mt-90  { margin-top: 90px !important; }
.mt-120 { margin-top: 120px !important; }

.mb-0   { margin-bottom: 0 !important; }
.mb-5   { margin-bottom: 5px !important; }
.mb-10  { margin-bottom: 10px !important; }
.mb-15  { margin-bottom: 15px !important; }
.mb-30  { margin-bottom: 30px !important; }
.mb-60  { margin-bottom: 60px !important; }
.mb-90  { margin-bottom: 90px !important; }
.mb-120 { margin-bottom: 120px !important; }

border

.border-0 { border: 0 !important; }

text-align 等

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }

float

.float-left { float: left !important; }
.float-right { float: right !important; }
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

overflow

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }

flex

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

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

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

.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }