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

この記事では、IM-BloomMakerのデザイナ画面で見た目を調整する方法について紹介します。
IM-BloomMakerには、レイアウトに必要なUIコンポーネントが豊富に用意されており、余白や幅、文字サイズなどの細かい設定も可能で、自由度が高いデザインが実現できます。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を入力すると、marginが1rem分だけ空きます。remは、html要素のfont-size値を基準とするため、文字サイズに合わせて余白を自動で調整できます。

CSSで調整したい

複数のエレメントに同じスタイルを適用する場合など、CSSエディタを利用できます。CSSエディタは、（CSS編集）をクリックすると表示されます。エレメントにクラスを付与したい場合は「cssクラス」に値を指定します。クラスを複数指定する場合は、半角スペース区切りで指定するか、変数値で1次元配列を指定します。

まとめ

IM-BloomMakerでは、各エレメントに必要な設定を行うことで、余白や幅、文字サイズなどの細かい設定ができます。さらに、CSSを活用すれば、より柔軟なデザイン表現も実現できます。この記事で紹介した方法以外にも、UIデザインガイドラインやCookBookには、見た目を調整するための多様な方法が掲載されています。それらを参考にしながら、デザインの幅を広げていきましょう。

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