eclairのブログ 
コピペできるコードで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でラジオボタンのデザイン４選
句読点や括弧の文字詰めをしたい
CSSで句読点やカッコなどを文字詰めする方法