コピペで便利なCSS一覧
碁盤の目（市松模様）
コード解説
碁盤の目の様なマスをレスポンシブで作るコード。ゼロからCSSで組もうとするとかなり面倒。
以下のコード（CSS変数：カスタムプロパティ）は、CSSもhtmlもスッキリとして分かりやすいです。一番のポイントはマス目の数をCSSの変数を使ってhtml側で簡単に変更できる部分。
style="--items: 3"この部分の数字を変更すると、マス目の数を変更できます。styleの「–items」が、CSSの同じ部分に対応する形です。
サイト全体にCSS変数（カスタムプロパティ）を使いたいときは:rootに記載します。
:root {
--red: #ff6600;
}
.hoge {
color: var(--red);
}参考サイト
テキストの背後に飾りテキスト
コード解説
最近はあまり見ないですが、ちょっとした時にワンポイントで入れられるので重宝するCSS。
ポイントは「content: attr(data-en);」の部分。
html上で飾りテキストを入れたいところに「data-en=”Message”」として指定します。
position要素で、すきな位置に移動も出来て、確度や透明度を指定そいて綺麗で分かりやすいコードになります。
content: attr(data-en);参考サイト
三角次へ「＞」マーク ＆ aタグ全てにリンク
コード解説
アイコンやSVG、普通のテキストなどいろいろな方法がありますが、安定の「次へ＞」です
ダブルクォーテーション（“ ”）見出し
コード解説
レスポンシブに対応するようにしてますが、テキストの長さでもブレイクポイントを変えた方が良いので、メディアクエリでサイトにあった形で対応してください。
画像切り替え
コード解説
CSSだけで画像を切り替えます。jQuaryなど表現が多いものや種類が多いですが、読み込みファイルが一番軽いので、サイトの一部分にちょっとだけ使いたい時はこちらの方が良いかと思います。htmlに直書きなので分かりやすいですが更新性は低いです。
サンプルの画像は200pxの正方形で、切り替えに使う画像は全て同一サイズにする必要があります。
htmlには負荷を減らす為Base64でエンコードしてますので、その部分をサイトに合わせて画像URLを入れてください。
表組その１
表組その２
１文字だけインデント
１行単位でテキストに背景をつける
流れるお知らせテキスト（最後に少し停止してフェードアウト）
少し目立たせた外部リンク装飾
使いやすい＆ちょっと忘れがちCSS
* { color: red; } li > strong { color: red; } h2 + p { color: red; }p ~ span { color: red; }h3 ~ h3 { color: red; }h3[title] { color: red; }その他の例：h3[title=”foo”]、a[href][target]、p[class~=”foo”]、p[lang|=”en”]、a[href^=”http://”]、a[href$=”.pdf”]、img[src*=”/thumb/”] など
:not(p) { color: red; }その他の例：p:not(.sample)、p:not([title]) など
.hoge h3:nth-of-type(odd).hoge h3:nth-type(odd)p:empty { color: red; }参考サイト※超おススメ※
最後に
ほとんど自分の備忘録と復習の意味で書きました。CSSでいろんなことが出来るので、まだまだ勉強不足だなと痛感。
