逆引きCSSコピペ辞典

css

SHARE

コピペできるコードでCSSのあれこれどうやればいいんだっけ？という疑問に応えていきます。

リセットCSSを使いたい

destyleというリセットCSSのCDNコードです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css">

全ての要素にborder-boxをつけたい

destyleというリセットCSSのCDNコードです。

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

要素を非表示にしたい

再度、表示させたい場合は、display: block;やdisplay: inline;などを設定します。

display: none;

要素を透明にしたい（透過させたい）

opacityで透明度を設定します。50%の透明度にする場合はopacity: 0.5;です。

opacity: 0;

要素に影をつけたい（ボックス・boxに影をつけたい）

要素に影をつけるにはbox-shadowを使います。

box-shadow: 2px 2px 4px rgba(0,0,0,.65);

要素を回転させたい

Z軸にくるっと90度回転します。

transform: rotateZ(90deg);

要素を拡大させたい

scaleで要素を２倍に拡大させます。

transform: scale(2);

要素をクリックできないようにしたい

pointer-events:none;でイベントを無効にします。pointer-events:auto;にすると再度有効になります。

pointer-events: none;

マウスカーソルをポインターにしたい

マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類をcursorで設定します。

cursor: pointer;

親要素をはみださないようにしたい

overflow:hidden;ではみ出した子要素を非表示にします。

overflow: hidden;

背景にグラデーションを設定したい（線形グラデーション）

背景を右に向かって黒から白へとグラデーションさせます。

background: linear-gradient(to right, #000, #fff);

円形グラデーションや細かな設定方法は、https://gray-code.com/html_css/setting-gradiation-by-css/ が参考になります。

角を丸くしたい（角丸をつけたい）

角を16px分丸くします。正円にしたい場合は、50%として半径分を丸くします。

border-radius: 16px;

要素をぼかしたい

要素全体を10px分ぼかします。

filter: blur(10px);

要素をスクロール固定（画面固定）にしたい

position: fixed;を指定します。

position: fixed;

プロパティの変化を滑らかに遷移させたい（アニメーションをつけたい）

全てのプロパティの変化を0.65秒でlinearのイージングでアニメーションさせます。

transition: all .65s linear;

レスポンシブ対応したい（メディアクエリー）

タブレット以下の幅の時（横幅が768px以下）にスタイルを当てます。

@media screen and (max-width: 768px) {
    /* ここにスタイルを記述する */
}

偶数番目の要素にスタイルを当てたい

nth-childを使って偶数番目の子要素にスタイルを当てます。

.item:nth-child(even){
    /* ここにスタイルを記述する */
}

奇数番目の要素にスタイルを当てたい

nth-childを使って奇数番目の子要素にスタイルを当てます。

.item:nth-child(odd){
    /* ここにスタイルを記述する */
}

テキストを中央揃えにしたい

text-align: center;で中央揃えにできます。左揃えならleft、右揃えならrightを指定します。

text-align: center;

文字同士の間隔を空けたい（文字間を調整したい）

letter-spacingを使って0.1文字分の文字間をあけます。

letter-spacing: 0.1em;

行の高さを調整したい

line-heightを使って行の高さを文字の2倍に設定します。

line-height: 2;

テキストを強制的に改行させたい（テキストの折り返し）

word-break: break-all;でテキストを強制的に改行します。

word-break: break-all;

太字にしたい

font-weight: bold;を使って太字にします。

font-weight: bold;

下線をつけたい

text-decoration: underline;を使って下線を引きます。

text-decoration: underline;

文字色を変更したい

RGB値で文字色を白にします。

color: #FFF;

チェックボックスのデザインをカスタマイズしたい

HTMLとCSSのチェックボックス実例集。コピペ用のチェックボックス デザインをまとめました。【コピペ可】HTMLとCSSのチェックボックスのデザイン４選

ラジオボタンのデザインをカスタマイズしたい

HTMLとCSSのラジオボタン事例集。コピペ用のラジオボタンの基本デザインをまとめました。【コピペ可】HTMLとCSSでラジオボタンのデザイン４選

句読点や括弧の文字詰めをしたい

cssCSSで句読点やカッコなどを文字詰めする方法

前の記事

javascript
【コピペ可】DOMの変更を監視できるjavascriptスニペ…

次の記事

【コピペ可】すぐに使えるCSSアニメーション集
css