CSSプレイボックス

みなさん、こんにちは！

今回は、「これからCSSを使って、自分好みのデザインにカスタマイズしていきたい！」という方向けに、視覚的にCSSの動きを学べるツール「CSSプレイボックス」を公開しました。

なぜこのツールを作ったのか？

私は普段、Webサイトを制作する際、「大枠のレイアウトはSWELLのブロック機能を活用し、細かいデザインの作り込みはCSSで行う」というハイブリッドスタイルを取り入れています。

この「CSSプレイボックス」は、私が直近で制作した複数のサイトの「追加CSS」を振り返り、「汎用性が高く、特によく使うプロパティ」だけを厳選してピックアップした生きた図鑑のようなツールです。

CSS初心者の壁「余白の感覚」を掴もう！

CSSを触り始めたばかりの頃って、「margin（外側のスキマ）」と「padding（内側のゆとり）」の違いがなかなか感覚に馴染まず、一苦労しますよね。
（「あれ！？枠ごと広がっちゃった！」「隣の要素が逃げていく！」と混乱した経験、誰しもあるはず…笑）

「CSSプレイボックス」では、スライダーを動かすだけで「外側にバリアが張られるのか」「内側が押しつぶされるのか」が直感的にわかるように作りました。 まずはここでスライダーをグリグリ動かして遊びながら、CSS特有の「感覚」を掴んでみてください。

実は、実務やデザイン段階でも便利です

初心者向けの学習ツールとして作りましたが、実はベテランの方にも便利な機能を入れています。

特に「透過HEXチェッカー」や、数値を細かく調整できる「box-shadow（影）プレビュー」は、私自身がWebデザインのモックアップ段階から「ちょっとあの色作りたいな」「いい感じの影の数値を探りたいな」と、ちょいちょい見に来て使うために組み込みました（笑）。 コピーボタンで一発で値を取得できるので、地味に時短になります。

これからCSSの道を歩み始める初心者の方から、サクッとHEXの透過率を確認したいベテランの方まで。 ぜひブックマークして、日々のWeb制作やカスタマイズにご活用ください！