※当サイトにはプロモーションが含まれています。
SWELL（スウェル）は、ブロックエディタ（Gutenberg）に完全対応したワードプレス（WordPress）テーマです。
その為、基本的に余白調整や装飾は、ブロックエディタでできるのですが、SWELLにはないパーツを自作した際など、「カスタムHTML」を使う事もあるかと思います。
また、どうしても“クラシックエディター”でを使いたいという人もいるのではないでしょうか？
そういった際には、ブロックエディタで調整できないので、直接、クラス（class）を割り当ててあげる必要があります。
今回は、そういった人にとって、SWELLを使い際に知っておくと便利だと思われるCSSのクラスをまとめてみました。
SWELLの基本スタイル、CSSのクラス一覧
SWELLの基本スタイル、CSSのクラス一覧です。
なお、これら記載したCSSは予め、SWELLで用意されているものです。
その為、適用したいクラスがあれば、
<p class="u-fz-xs">文字が凄く小さくなる</p>のように書くことで、クラスが適用されます。
※追加CSSなどに記述する必要はありません
フォントサイズ・太さに関するCSS
文字のサイズや装飾を調整するクラスです。
.u-fz-xs { font-size: 0.75em !important; }
.u-fz-s { font-size: 0.9em !important; }
.u-fz-normal { font-size: 1rem !important; }
.u-fz-m { font-size: 1.1em !important; }
.u-fz-l { font-size: 1.25em !important; }
.u-fz-xl { font-size: 1.6em !important; }
.u-fw-bold { font-weight: 700 !important; }
.u-fw-normal { font-weight: 400 !important; }
.u-fw-lighter { font-weight: lighter !important; }
.u-fs-italic { font-style: italic !important; }マージン（外側余白）に関するCSS
自分は、余白調整で一番よく使うクラスになります。
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-5 { margin-bottom: 0.5em !important; }
.u-mb-10 { margin-bottom: 1em !important; }
.u-mb-15 { margin-bottom: 1.5em !important; }
.u-mb-20 { margin-bottom: 2em !important; }
.u-mb-25 { margin-bottom: 2.5em !important; }
.u-mb-30 { margin-bottom: 3em !important; }
.u-mb-40 { margin-bottom: 4em !important; }
.u-mb-50 { margin-bottom: 5em !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-5 { margin-top: 0.5em !important; }
.u-mt-10 { margin-top: 1em !important; }
.u-mt-15 { margin-top: 1.5em !important; }
.u-mt-20 { margin-top: 2em !important; }
.u-mt-25 { margin-top: 2.5em !important; }
.u-mt-30 { margin-top: 3em !important; }
.u-mt-40 { margin-top: 4em !important; }
.u-mt-50 { margin-top: 5em !important; }パディング（内側余白）に関するCSS
文字などを１文字分内側に入れたい時などに使用します。
.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-5 { padding-bottom: 0.5em !important; }
.u-pb-10 { padding-bottom: 1em !important; }
.u-pb-15 { padding-bottom: 1.5em !important; }
.u-pb-20 { padding-bottom: 2em !important; }
.u-pb-25 { padding-bottom: 2.5em !important; }
.u-pt-0 { padding-top: 0 !important; }
.u-pt-5 { padding-top: 0.5em !important; }
.u-pt-10 { padding-top: 1em !important; }
.u-pt-15 { padding-top: 1.5em !important; }
.u-pt-20 { padding-top: 2em !important; }
.u-pt-25 { padding-top: 2.5em !important; }テキスト配置に関するCSS
文字の位置調整（左・真ん中・右）などで使用します。
.u-ta-c { text-align: center; }
.u-ta-l { text-align: left; }
.u-ta-r { text-align: right; }
.u-nowrap { white-space: nowrap; }表示制御に関するCSS
知っておくと便利な表示を制御するクラスです。
.u-none { display: none !important; }
.u-block { display: block !important; }
.u-flex--aic { display: flex; align-items: center; }今のところ、これらのクラスを利用しています。
また、他に必要なクラスがでてきたら追記したいと思います。
SWELLを効率的に学んで最速でサイトを作るには？
ワードプレステーマのSWELLを効率的に学んで、最速でサイトを作成するには、オンライン講座のUdemyで学ぶのが最適です。
「Udemy(ユーデミー)」は、世界中で人気のあるオンライン学習プラットフォームで、日本ではベネッセ（Benesse）と提携して運営をしています。
日本最大のオンライン学習のプラットフォームだけあって、ワードプレステーマのSWELLを学べる講座がいくつか用意されています。
※画像は講座へのリンクになっています
※画像は講座へのリンクになっています
なお、Udemyでは定期的にセールを開催しています。
セール時は通常価格より、90%以上の値引きされた価格で購入する事ができます。
新規受講生割引などがある場合もありますので、まずは公式サイトで確認してみてください。
