前回はレイアウトの方法について学びました。
今回はエレメントそれぞれの幅と高さである、「width」と「height」について学びます。
前回作成したアプリを開いてください。
一度作成したアプリを開きなおす場合は、トップページからアプリを開き、「Launch editor」をクリックします。
開いたページには前回作成したデータが残っていると思います。
配置されているエレメントそれぞれを右クリックし、「Delete」をクリックします。
これでページが真っ白の状態になっていると思います。
エレメントのwidthとheightについて
ページの「Container layout」が「Column」になっていることを確認した後、Textを配置してみましょう。
背景色の指定
今からこの「Text」エレメントの幅や高さを変更していくのですが、まず、わかりやすいように背景色を付けます。
画面上に配置されているTextエレメントをダブルクリックして、「Appearance」タブの中から「Background style」という項目を見つけます。
Flat colorを選びます。
すると、「Color」という項目が出てくるので、クリックし、好きな色を選びます。
このような色の指定方法に慣れていない方は、下にある「Color variables」の中から好きな色をクリックすればOKです。
見本ではオレンジ色にします。
このように背景色が付き、見やすくなりました。
widthの変更
背景色を変更したTextの「Layout」タブから、幅である「width」を変更します。
「Make this element fixed-width」にチェックが入っているのを確認した後、Widthの値を変更してみてください。
デフォルトでは200pxになっていると思いますが、400pxにしてみます。
すると、Textの幅が広くなっていることがわかります。
ページに幅を合わせる
今度は、「Make this element fixed-width」のチェックを外してみます。
すると、画面いっぱいにTextが広がっていることがわかると思います。
他にも設定できる項目はありますが、この回では簡単に説明だけします。
Min widthとMax width
「Make this element fixed-width」のチェックが外れているときにのみ設定できます。
Min widthは最小の幅、Max widthは最大の幅です。
「画面いっぱいに表示されてほしいけど〇〇pxよりは大きく(小さく)なってほしくない」
というときに使えます。
Fit width to content
中身の幅に合わせて自身の幅を変更します。
「文字数に応じて伸縮してほしい」
といった時に使えます。
Heightの変更
次にHeightについてです。Heightは高さを意味します。
Textエレメントの「Layout」から、「Make this element fixed-height」にチェックを入れましょう。
すると、高さを固定で指定できるようになるので、好きな高さに指定してみてください。
試しに300pxにしてみます。
このように、高さも変更することができます。使い方はwidthと一緒です。
widthやheightの単位はpx以外にも%を指定することができます。これによってページや親グループの幅・高さに合わせて伸縮させることができます。
テキストのスタイルの変更
ここまで、Textエレメントの幅や高さの変更の方法を学びました。
他のエレメントでも、同様の方法で幅や高さを変更することができます。
今回はテキストの幅と高さを変更しましたが、文字自体の見た目は一切変わっていないことに気づいたと思います。
文字のスタイルは、Appearanceから変更ができます。
WordやExcelなどでも似たような項目を見たことがあると思います。
