レスポンシブ確認ツール
URLを入力するだけでスマホ・タブレット・PCの各サイズでページの見え方を並べて確認できるツールを作成しました。
Flexboxビジュアル学習ツール
スライダーやボタンでFlexboxのプロパティを変更すると、レイアウトがリアルタイムで動く学習ツール。生成CSSもコピーできる。
コンテナタブ（親要素の設定）
flex-direction— row / column など4種類を切り替えjustify-content— 主軸方向の並び方を6種類で確認align-items— 交差軸方向の揃え方を5種類で確認flex-wrap— 折り返しの有無を3種類で切り替えgap— アイテム間のスペースをスライダーで調整- アイテム数を1〜8個で増減
アイテムタブ（子要素の個別設定）
- 対象アイテム（A〜H）をボタンで選択
flex-grow— 余白の分配比率をスライダーで調整flex-shrink— 縮小率をスライダーで調整flex-basis— 基本サイズをauto / 50px / 100px / 150pxで切り替えalign-self— 個別の交差軸揃えを設定
設定を変えるたびに右下のCSSコードがリアルタイムで更新され、「コピー」ボタンでそのまま使えます。「リセット」ボタンで初期状態に戻せます。
CSSスニペット帳
よく使うCSSのコードをタグ付きで保存・検索・コピーできるスニペット管理アプリ。ブログの記事コードをそのまま貼り付けて保管できる。
基本操作
- タイトル・コード・タグで横断検索できます
- タグフィルターで絞り込みができます（レイアウト・アニメーション・テキスト・ボタン・カード・フォームなど）
- カードをクリックするとコードが展開・折りたたみされます
各スニペットへの操作
- コピーボタンでコードをクリップボードにコピーできます
- ハートボタンでお気に入り登録できます
- 鉛筆ボタンで編集モーダルが開きます
- ゴミ箱ボタンで削除できます
追加・編集モーダル
- 「追加」ボタンから新しいスニペットを登録できます
- タイトル・タグ（複数選択可）・CSSコードを入力して保存できます
上部のスタッツカードでスニペット数・タグ数・お気に入り数をいつでも確認できます。最初から6つのサンプルスニペットを入れてありますので、そのまま試せます！
