書式の設定について - Adobe XDのチュートリアル

このレッスンでは 書式の設定について説明します。 教材として エクササイズファイルのフォルダーにある 05 フォルダーの中の 05_02 フォルダーの中の ファイルを使います。 まず最初に 05_02.xd を 開いておきましょう。 １枚目のアートボードから 進んでいきます。 テキストレイヤー、 この「坊っちゃん」と書かれている 文字を選択します。 プロパティインスペクタの テキストのところを確認します。 フォントやフォントサイズ、 フォント、ウェイトを 変更することができます。 今回はこのままにしておきます。 その下の 「文字の間隔」は 現在のフォントサイズを基準とした 1000 分の１、 em 単位で 文字間を指定することができます。 現在フォントサイズが 20px ですので、 1em、１文字分が 20px となります。 1em が 20px となります。 ここで「坊っちゃん」の文字を 選択している状態で 文字の間隔に 1000 と入力すると、 １文字分、1em 分、 20px 分が空いて、 文字と文字の間が 間隔が広がりました。 ここでは 100 と入力します。 100 と入力することで、 文字と文字の間が 2px 字間が空きました。 その下の複数行ある文章を選択し、 行送りを設定します。 現在フォントサイズが 12px ですので、 こちらの「行送り」のところに 12 とそのまま入れた場合、 行と行の間が ０になります。 読みやすくするために 今回は行間を 文字の 60%空けるという意味で 12 の後ろに x1.6 と入力します。 12 の後ろに *1.6 と入力して return キー、Enter キーを押します。 計算結果が表示され、 19.2 と入っていますが、 自動的にその値が反映されて、 可読性が上がりました。 テキストエリアの下に 二重丸が表示されていますが、 これは文字がオーバーフローして 見えない文字が存在している という意味ですので、 赤い二重丸をダブルクリックして 全文を表示させておきます。 上から四行目、 「新築の二階から」 という文字がありますが、 この前にカーソルを合わせて return キー、Enter キーを押して 改行しておきます。 このように テキストが段落に分かれている場合には、 この段落の間のスペースが 調整できます。…