Framer + RemixでWebサイトをつくる #3 - Textのプロパティ
実は連続で3日分書いてます。もう疲れてきた。
引き続き開催しているもくもく会「Kamakura MokMok Hack」のサイトをFramer + Remixでつくっていきます。
サイトの要件などに興味ある方は1日目の記事をご覧ください。
3日目 - Textのプロパティを紹介
というわけで今回はFramerのTextオブジェクトのプロパティについてです。
こちらはそれほど説明しなくても実際に触っていくのが手っ取り早いですが、念のために各種値を調整しつつ紹介します。
見出しのテキストデザインを変更してみる
見出しにたての中央寄せを適応する
vertical-align とほぼ同じです。
ただし、個人的には文字列の縦の中央寄せにこれを使うよりは後日の記事で説明予定のStack（ flexbox ）で実現する方が使い勝手は良いのかなと思います。
フォントとフォントスタイルを変更する
フォントの変更は Font プロパティから変更できます。
フォントはローカルフォントとGoogleフォント、あとはFramerクラウド上でフォントをチーム共有することも可能です。個人的にはAdobe Fontsとか使えるとうれしいですが… まぁそれはCode Component（Framer上でReact Component、つまりTypeScriptをかけるコンポーネント機能）を活用すればできなくもなさそうなので後日の記事で余裕あれば取り上げようと思います。余裕あれば。
というわけで、Googleフォントから Noto Sans JP に変更してみました。
Noto Sans JP にはフォントスタイルが色々選択できるので Tin を選んでみます。
こちらは Style プロパティから選択可能です。フォントによってはこれらのスタイルは変わるので可読性など目的に合わせて調整しましょー。
↓ Tin を選んだのでフォントが細身になりました。
テキストのスタイルをうまく使うことで「可読性」や「視認性」を向上させたり「視線誘導」にも使えます。
可読性や視認性などについては以下のページが参考になると思います。
その他のプロパティ
| プロパティ | 型 | 説明 |
|---|---|---|
| Content | String |
文字列の内容、ここを変更することでもテキストオブジェクトの文字列が変更できます |
| Size | Int |
文字のサイズ（px）、CSSの font-size と同じ |
| Letter | Int |
文字間のサイズ（px）、CSSの letter-spacing と同じ |
| Line | Int |
行間のサイズ（em/px/%）、CSSの line-height と同じ |
| Align | Select Button |
左寄せ, 中央寄せ, 右寄せ |
| Transform | Selector |
文字列をすべて小文字（Lowercase）、大文字（Uppercase）、単語の一文字目を大文字(Captlize)に変換できます。CSSの text-transform とほぼ同じ |
| Decoration | Select Button |
文字列の修飾。下線、打ち消し線を付け加えることができます |
これらの他にStylesやLayoutパネルの中でも特にGrowなどもありますが、この辺は後日の記事（Form要素の話）でまとめます。多分。
次回4日目はレイアウトの差し込み・積み重ね・横並びなどができるStack機能の話を書きます。
Discussion