デザイナ画面で見た目を調整したい

この記事では、IM-BloomMakerのデザイナ画面でエレメントの見た目を調整する方法を紹介します。

IM-BloomMakerでは、エレメントのサイズや色、文字、余白などをプロパティから設定できます。また、CSSエディタを利用して、より細かく見た目を調整することもできます。

ここでは、デザイナ画面に配置したエレメントを例に、見た目を調整する方法を確認していきましょう。

エレメントのプロパティとは

プロパティでは、エレメントの見た目や表示、動作などに関する設定を行います。表示される設定項目は、選択したエレメントの種類によって異なります。

デザイナ画面でエレメントを選択し、調整したい項目に値を入力します。設定項目の値がわからない場合は、項目名の右側にあるをクリックすると、ヘルプを確認できます。

見た目を調整する

デザイナ画面に配置したエレメントは、プロパティに値を設定することで、サイズや色、文字、余白などを調整できます。ここでは、エレメントを配置した後に、見た目を調整する方法を紹介します。

サイズを調整したい

エレメントのサイズや、エレメント内の文字サイズを調整する方法を説明します。

エレメントを規定のサイズに変更する

エレメントのサイズは「エレメント固有」の「size」で設定します。規定のサイズは、4種類（small、normal、medium、large）です。固定値はプルダウンから選択します。変数値を設定する場合は、「is-」＋「プルダウンの値」の形式の値を持つ変数を指定します。エレメントの横幅を最大にする場合は「fullwidth」にチェックを入れてください。

たとえば、ボタンのサイズを変更する場合は、規定のサイズから選択するだけで変更できます。選択したサイズに応じて、文字サイズも変更されます。標準的なサイズは「normal」です。

エレメントを自由なサイズに変更する

エレメントのサイズを自由に指定したい場合は、「幅・高さ」で設定します。エレメントの幅は「横幅」、高さは「縦幅」に、それぞれ「数値」＋「単位」で指定します。指定できる単位は、「px」「%」「em」「rem」です。画面サイズなどに応じてエレメントのサイズを調整したい場合は、最大値や最小値も指定できます。

たとえば、ボタンの幅を200pxに指定したい場合、「横幅」の固定値に「200px」と入力します。

指定した値に応じてエレメントのサイズが変更されます。エレメントの文字サイズは、変更前の状態が維持されます。

エレメント内の文字サイズを指定する

「エレメント固有」の「size」では、エレメントのサイズに応じて文字サイズが調整されます。エレメントのサイズを「幅・高さ」で設定した場合は、「フォント」の「サイズ」で文字サイズを個別に指定できます。

文字サイズを変更すると、設定した文字サイズに応じてエレメントの幅や高さも調整されます。文字サイズは「数値」＋「単位」で指定します。指定できる単位は、「%」「px」「rem」「em」です。

たとえば、ボタンの文字サイズを20pxにしたい場合、「サイズ」の固定値に「20px」と入力します。

前の手順で横幅を200pxに固定しているため、文字サイズを変更すると、高さが文字サイズに合わせて自動的に調整されます。

色を調整したい

エレメントの色や、エレメント内の文字色を調整する方法を説明します。

エレメントを規定の色に変更する

エレメントの色は「エレメント固有」の「color」で設定します。規定の色は、以下の17種類です。

• モノトーンカラーが5種類（white、light、dark、black、text）
• 用途別のカラーが6種類（primary、link、info、success、warning、danger）
• 用途別のライトカラーが6種類（primary light、link light、info light、success light、warning light、danger light）

固定値はプルダウンから選択します。変数値を設定する場合は、「is-」＋「プルダウンの値」の形式の値を持つ変数を指定します。

たとえば、ボタンの色を変更する場合は、規定の色から選択するだけで変更できます。

選択した色に応じて、文字色も変更されます。標準的な色は「primary」です。

エレメントを自由な色に変更する

エレメントの背景色を自由に指定したい場合は「背景色」で設定します。指定できる記法は、「色名」「カラーコード（Hex）」「RGB」「rbga」「hsl」「グローバル値」です。

たとえば、ボタンの色を薄い青色に変更したい場合、「背景色」の固定値に「#87cefa」と入力します。

指定した値に応じて背景色が変更されます。文字色は変更されません。

エレメント内の文字色を指定する

「エレメント固有」の「color」では、エレメントの色に応じて文字色が調整されます。文字色を自由に指定したい場合は、「文字色」で設定します。指定できる記法は、「色名」「カラーコード（Hex）」「RGB」「rbga」「hsl」「グローバル値」です。

たとえば、文字色を濃い青色に変更したい場合、「文字色」の固定値に「#00008b」と入力します。

前の手順で背景色を「#87cefa」に設定しているため、背景色はそのままで文字色だけが変更されます。

背景色と文字色を入れ替える

「エレメント固有」の「color」で色を指定している場合、「inverted」にチェックを入れると、エレメントの背景色と文字色を入れ替えることができます。入れ替えが可能な「color」は、以下の10種類です。

• モノトーンカラーが4種類（white、light、dark、black）
• 用途別のカラーが6種類（primary、link、info、success、warning、danger）

たとえば、「primary」を指定している場合、「inverted」にチェックを入れると、文字色と背景色が反転します。

マウスオーバー時など、ボタンの色を反転させたい場合に利用できます。

テキストを調整したい

メッセージやラベルなど、テキストを表示するエレメントを調整する方法を説明します。

テキストの高さを調整する

テキストの行の高さは、「テキストスタイル」の「行の高さ」で設定します。行の高さは「数値」＋「単位」で指定します。指定できる単位は、「px」「%」「em」「rem」です。

たとえば、テキストの高さを50pxに指定したい場合、「行の高さ」の固定値に「50px」と入力します。

指定した値に応じてエレメントの高さが変更されます。幅は変更されないため、設定した幅に合わせて文字が表示されます。

テキストの位置を調整する

テキストの位置は、「テキストスタイル」の「横揃え」で設定します。「横揃え」では、ブロックコンテナ内のテキストの揃え位置を指定できます。

ChromeやEdgeで「match-parent」が動作しない場合、ベンダープレフィックスを追加した「-webkit-match-parent」を変数にセットしてください。

たとえば、テキストを中央揃えにしたい場合は、「横揃え」から「center」を選択します。

余白を調整したい

エレメントの外側と内側の余白を調整する方法について、ボックスモデルをもとに説明します。HTMLの要素は、基本的に「要素」「枠」「内余白」「外余白」の4つの領域で構成されます。

• 要素（element）は、エレメントそのものを表します。幅（width）と高さ（height）を指定してサイズを設定します。デザイナ画面では、プロパティの「幅・高さ」で横幅と縦幅を設定します。
• 枠（border）は、要素の周囲に設定される領域です。画面上で枠が表示されていない場合でも、ボックスモデル上では枠として扱われます。
• 内余白（padding）は、枠と要素の間の余白です。デザイナ画面では、プロパティの「余白」で上下左右の内余白を設定します。
• 外余白（margin）は、枠の外側の余白です。隣接するエレメントとの間隔を空ける場合などに使用します。デザイナ画面では、プロパティの「余白」で上下左右の外余白を設定します。

エレメントの余白を指定する

エレメントの余白は、「数値」＋「単位」で指定します。指定できる単位は、「px」「%」「em」「rem」です。

たとえば、ラベルとプルダウンの間に余白を空けたい場合、「外余白（上）」に1remを入力します。

remはルート要素のフォントサイズを基準とするため、文字サイズとのバランスを保ちながら余白を指定できます。

CSSで調整したい

複数のエレメントに同じスタイルを適用したい場合などは、CSSエディタを利用できます。CSSエディタは、（CSS編集）をクリックすると表示されます。

エレメントにクラスを付与する場合は、「cssクラス」に値を指定します。複数のクラスを指定する場合は、半角スペースで区切って指定するか、変数値として1次元配列を指定します。

まとめ

IM-BloomMakerでは、エレメントのプロパティを設定することで、サイズや色、文字、余白などの見た目を調整できます。また、CSSエディタを利用すれば、複数のエレメントに同じスタイルを適用したり、条件に応じてスタイルを変更したりするなど、より柔軟に見た目を調整できます。

この記事で紹介した方法以外にも、UIデザインガイドラインやCookBookには、画面の見た目を調整するためのさまざまな方法が掲載されています。目的に応じてこれらの情報も参考にしながら、見やすく使いやすい画面を作成してみてください。

intra-martでは、IM-BloomMakerをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。IM-BloomMakerの機能を最大限に発揮させるためにも、ぜひご活用ください。