WordPress / devs tools

WordPressおすすめCSS Studio

見出し、ボタン、画像、表、引用などを選び、追加CSSからtheme.jsonまで6種類の実装方法へ変換します。

4 主な機能 English

編集画面を準備しています…

このツールの範囲

見た目だけで終わらない生成結果

見た目の設定だけでなく、状態、画面幅ごとの差、実装手順、注意点まで1つのProjectとして保存できます。

  • コアブロックscope
  • 追加CSS
  • Block Style Variation
  • theme.json・per-block stylesheet
出力形式

CSS · PHP · theme.json · WordPress

Glossary

画面に出てくる英語の意味

Preview(プレビュー)
現在の設定を実際の見た目として確認する領域です。
State(ステート)
マウスを重ねた時、キーボードで選んだ時、押している時、無効時などの状態です。
Responsive(レスポンシブ)
画面や親要素の幅に合わせて、配置や見た目を調整する考え方です。
Reduced motion(動きを減らす設定)
アニメーションによる負担を減らすため、端末側で動きを少なくする利用者設定です。