デザインの逆引き辞典

569 views

クラスを追加してデザインを変更する

SmartUXではBootstrapという技術を使っているため、デザインの変更方法を応用できます。
変更方法とは、希望のデザインを再現するクラス名を追加するだけです。
以下にはクラスを追加して変更できるデザインを列挙しておりますので、クラス名をコピー＆ペーストしてお使いください。

クラスの追加場所と確認方法

追加場所

画面の右ペインにある「スタイルのオーバーライド」に書き込むと、タグのような見た目で追加されます。
必要であれば2つ以上のクラスを追加することができます。

確認場所

中央ペインのキャンバスで画面の様子を確認します。
テンプレートの画面でタグの中にクラスが追加されている様子を確認します。

テキストに関係するクラス

テキストの位置調整

以下のクラスを追加することでテキストの位置を変更します。

希望のデザイン

クラスに貼り付ける文字

解説リンク先

すべてのブラウザサイズでテキストを左に揃えたい

text-start

テキストの位置調整

すべてのブラウザサイズでテキストを中央で揃えたい

text-center

テキストの位置調整

すべてのブラウザサイズでテキストを右に揃えたい

text-end

テキストの位置調整

スマホサイズ(≥576px)またはそれ以上のブラウザサイズだけでテキストを揃えたい

text-sm-start
text-sm-center
text-sm-end

テキストの位置調整

タブレットサイズ(≥768px)またはそれ以上のブラウザサイズだけでテキストを揃えたい

text-md-start
text-md-center
text-md-start

テキストの位置調整

パソコンサイズ(≥992px)またはそれ以上のブラウザサイズだけでテキストを揃えたい

text-lg-start
text-lg-center
text-lg-end

テキストの位置調整

特大サイズ(≥1200px)またはそれ以上のブラウザサイズだけでテキストを揃えたい

text-xl-start
text-xl-center
text-xl-end

テキストの位置調整

テキストの折り返しとオーバーフロー

要素の中でテキスト折り返し、はみだしを防ぎます。
また、逆にはみ出させることも指定可能です。

希望のデザイン

クラスに貼り付ける文字

解説リンク先

テキストを折り返したい
20240612_2_1

text-wrap

テキストの折り返しとオーバーフロー

テキスト折り返しを抑止したい
20240612_2_2

text-nowrap

テキストの折り返しとオーバーフロー

単語の区切り

希望のデザイン

クラスに貼り付ける文字

解説リンク先

長い文字列がレイアウトを崩すのを防ぎたい
20240612_2_1

text-break

単語の区切り

テキストの変換

入力したアルファベットを自動で小文字のみや大文字のみ、
または単語の頭文字を大文字にできます。

希望のデザイン

クラスに貼り付ける文字

解説リンク先

すべて小文字に変換したい
（「Lowercased text.」→「lowercased text.」）

text-lowercase

テキストの変換

すべて大文字に変換したい
（「Uppercased text.」→「UPPERCASED TEXT.」）

text-uppercase

テキストの変換

単語の頭文字を大文字にしたい
（「CapiTaliZed text.」→「CapiTaliZed Text.」）

text-capitalize

テキストの変換

フォントサイズ

見出しクラス（例：.h1～.h6）と一致するテキストの大きさのみを再現します。
数字が大きくなるにつれて小さくなります。

希望のデザイン

クラスに貼り付ける文字

解説リンク先

フォントサイズを見出し要素の最上位h1と同じにしたい

fs-1

フォントサイズ

フォントサイズを見出し要素のh2と同じにしたい

fs-2

フォントサイズ

フォントサイズを見出し要素のh3と同じにしたい

fs-3

フォントサイズ

フォントサイズを見出し要素のh4と同じにしたい

fs-4

フォントサイズ

フォントサイズを見出し要素のh5と同じにしたい

fs-5

フォントサイズ

フォントサイズを見出し要素の最下位h6と同じにしたい

fs-6

フォントサイズ

フォントの太さと斜体

希望のデザイン

クラスに貼り付ける文字

解説リンク先

フォントを太字のスタイルにしたい

fw-bold

フォントの太さと斜体

フォントを細字のスタイルにしたい

fw-light

フォントの太さと斜体

フォントをイタリック体にしたい

fst-italic

フォントの太さと斜体

行の高さ

希望のデザイン

クラスに貼り付ける文字

解説リンク先

一番低い行の幅にしたい

lh-1

行の高さ

一般的な行の幅と一番低い行の幅の中間にしたい

lh-sm

行の高さ

一番高い行の幅にしたい

lh-lg

行の高さ

色のリセット

テキストやリンクの色をリセットし、親要素から色を継承するようにします。
例えば、リンク部分の色をほかのテキストと同じにしたい場合に使用します。

希望のデザイン

クラスに貼り付ける文字

解説リンク先

リンク部分の色をほかのテキスト色を同じくしたい

text-reset

色のリセット

テキストの装飾

テキストに施したいデザインを選びます。
リンク下の線を無くすこともできます。

希望のデザイン

クラスに貼り付ける文字

解説リンク先

テキストに下線を引きたい

text-decoration-underline

テキストの装飾

テキストの中央に線を引きたい

text-decoration-line-through

テキストの装飾

リンク部分の下線を消したい

text-decoration-none

テキストの装飾

テキストのカラー

クラスを割り当てたテキストの色を変えることができます。
SmartUXテンプレートによって設定の色が変わるため、解説リンクの先にある色は目安になります。

希望のデザイン

クラスに貼り付ける文字

解説リンク先

テキストを青色にしたい

text-primary

Colors

テキストを目立たない灰色にしたい

text-secondary

Colors

テキストを緑色にしたい

text-success

Colors

テキストを目立たない灰色にしたい

text-secondary

Colors

注意を知らせる黄色のテキスト色にしたい

text-success

Colors

濃い背景色に合わせてテキストを白くしたい

text-white

Colors

リンクテキストの色を変えたい（例：緑色）

link-success

カラーリンク

背景に関係するクラス

背景色

テキストカラークラスと同様に、要素の背景を任意の色に設定します。
SmartUXテンプレートによって設定の色が変わるため、解説リンクの先にある色は目安になります。

希望のデザイン

クラスに貼り付ける文字

解説リンク先

危険を知らせる赤色の背景色にしたい

bg-danger

背景色

注意を知らせる黄色の背景色にしたい

bg-warning

背景色

黒い背景色にしたい

bg-black

背景色

ボーダーに関係するクラス

ボーダー

ボーダーを使って要素のボーダーと角丸を素早く適用します。画像、ボタン、その他の要素に最適です。
ボーダーを使って、要素の線を追加・削除します。すべての境界線を一回の指定で適用できます。

希望のデザイン

クラスに貼り付ける文字

解説リンク先

要素を四角くボーダーで囲いたい

border

ボーダーを追加

要素に下線を引きたい

border-bottom

ボーダーを追加

囲ってあるボーダーを消したい

border-0

ボーダーを消す

四角い要素を丸くしたい

rounded-circle

半径

四角い要素を角丸にしたい(0~5までの数字で角丸の角度を調整する)

rounded-3

サイズ調整

余白に関係するクラス

マージンとパディング

要素の外観に対して余白を追加または削除します。
上下左右同時に作用させることも、いずれか一方向のみにすることも可能です。
「-」の後に書かれる数字は0～5までで「0」は削除と同意、「1～5」では数字が大きくなるほど幅が広くなります。
お好みに合わせて調整してください。
マージン：要素の外側に付く余白で、この場合「m」と表記される
パディング：要素の内側に付く余白で、この場合「p」と表記される

希望のデザイン

クラスに貼り付ける文字

解説リンク先

上下左右にある外側の余計な余白を削除したい

m-0

表記方法

上下左右にある内側の余計な余白を削除したい

p-0

表記方法

上下左右に外側の余白を追加したい

m-1,m-2,m-3,m-4,m-5

表記方法