こんにちはデザインチームオカベです。
突然ですがCSSに触れて早15年以上経ちました・・・。
CSSについてちょこっと小話
初めてCSSを書くきっかけは確か、「背景画像の固定」だったように思います。（リンクの文字色だったか？）
HTMLを初めてまも無い頃の私には、背景画像をパターンで配置することしかできず、他所様のサイトに訪れた際、パターン背景画像ではない１枚のイラストがどーんと置かれている事が衝撃的だった記憶があります。
そこからソースと睨めっこする事が多くなり、スクロールバーのデザインを変えたり（まだあるのかな・・）、CSSスプライトを覚えたり、擬似要素、レスポンシブを覚えたり・・・。常に新しい事を覚えざるを得なかったように思います。
少し前振りが長くなりましたが、そんな感じで目まぐるしく新しい知識を要求される中で、全てを覚えていられないので、今回は自分がCSSを触る時に割とよく見るサイトを備忘録的な感じでまとめたいと思います。
よく利用する便利なページ
１：グラデーションジェネレーター
CSSでグラデーションしたい時に。
パラメーターをいじるだけでCSSを出してくれるのでコードを書く手間が省ける（グラデーションのCSSを覚えるのはパラメーターが多くて正直めんどう）のはもちろん、グラデーションのイメージをしやすいので。
２：ボックスシャドウジェネレーター
グラデーションと同じく数値を変更するだけでCSSができあがります。簡単！実はシャドウって内側にも付けられるんですよね。ご安心ください。対応しています。
どっちがX座標でぼかしでY座標で？そんな悩みも一発解決！（一々覚えていられない）
あとこちらのサイトはテキストシャドウ版も用意されています。
ついつい忘れがちなあれ
次にご紹介するのは、CSSで「○○したいときどうするんだっけ〜？」的な時についついググってしまう物たちです。覚えればいいんでしょうけどね・・・。
以下は実例も載っていたりして個人的に見やすいと思うものなど。
１：CSSセレクタについて
補足しておくとこれは一応覚えてます。が、ごく稀に、「$」と「^」がごっちゃになったり、「even」「odd」が怪しくなるので・・・。
２：Flexboxについて
CSSでコンテンツの入れ替えができたり、高さを揃えたり、均等に配置したり・・・。使えるようになるとハイパー便利なFelxbox。ですが、親コンテンツに設定するんだっけ？それとも子供コンテンツ？なシーンがしばしば。ようやく慣れてはきたけど・・。
3：縦書き文字について
そんなに頻度は高くないものの、縦書きにしたいシーンもちらほら出てくる今日この頃。でも頻度は高くないので書き方を覚えておらずググるハメに。
縦中横とかDTPっぽいこともできるのは中々ありがたい。でも覚えない。
4：擬似要素の改行
CSSだけで後出しで要素を追加できる便利な「before」「after」。
改行もできるのでhtmlを書かなくともかなり自由度の高い要素を追加できますが、書き方は忘れがち。
「white-space: pre;」が肝。
まだ何かあった気もしますが思い出したら追記します。
