CSS– tag –

SWELLのボタンのデザインと、マウスを乗せたときの動きを変えるCSSを6種類紹介します。どれも「追加CSS」に貼るだけで使え、実際に動く見本で動きを確認できます。色はSWELLのボタン設定の色をそのまま使います。

SWELLのアコーディオンとステップの見た目を変えるCSSを、6種ずつ合わせて12種類、実際の表示画像つきでまとめました。どれも「外観」→「カスタマイズ」→「追加CSS」に貼るだけで使えます。色の変え方と、反映されないときの確かめ方も紹介します。

MacのDigital Color Meterでカラーコードを取得する手順を解説します。16進数への切り替え方と、CSSの#RRGGBBと同じ値になるsRGBの選び方を、W3Cの仕様とmacOSの色管理の仕組みをもとに説明します。

Claude CodeでSWELLを安全にカスタマイズする方法です。親テーマを変更しない子テーマの使い方、SWELL独自ブロックを推測で書かせないコツ、壊してしまった実例と戻し方、最終確認のやり方をまとめました。

「実装したいことが、ここで見つかる」をコンセプトに、ボタン・見出し・カード・ファーストビュー・アニメーションの名前・GSAPのサンプルなどを1つにまとめた自社ライブラリ library.moatway.com の紹介と、現場での使いどころを解説します。