Jetpack Compose Academy · レッスン

フォントサイズ、太さ、スタイル

文字を太字や斜体にし、適切なサイズにします。

レッスン 2/413 ステップ

「フォントサイズ、太さ、スタイル」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

テキストをスタイル設定する

普通の文字でも十分ですが、実際のアプリでは強調が必要です。Text には、XML を使わずにサイズや太さ、スタイルを制御する簡単な引数があります。

サイズを設定する

fontSize を使って、テキストを大きくしたり小さくしたりします。サイズには sp 単位を使い、ユーザーのアクセシビリティ向けフォント設定が反映されます。

Text("Big title", fontSize = 24.sp)

dp ではなく sp を使う理由

Text には、システムのフォントサイズに合わせて拡大縮小される sp を使います。レイアウトには dp を使いますが、ユーザーが大きな文字を好む場合は文字も大きくする必要があります。

太字にする

強調したい場合は fontWeight を使います。タイトルや重要なラベルには、FontWeight.Bold が一般的な選択です。

Text("Headline", fontWeight = FontWeight.Bold)

太さには段階がある

太さは、太字かどうかだけではありません。FontWeight には Light から Black まであり、デザインに合わせて強調の度合いを細かく調整できます。

FontWeight.Light
FontWeight.Medium
FontWeight.Black

斜体を追加する

fontStyle を使ってテキストを斜体にします。FontStyle.Italic は引用、キャプション、控えめな個性を加えたい場合に適しています。

Text("a note", fontStyle = FontStyle.Italic)

組み合わせて使う

これらの引数は自由に組み合わせられます。1 つの Text 呼び出しで、大きく、太字で、斜体のテキストを 1 行の読みやすいコードとして指定できます。🙂

Text("Wow", fontSize = 20.sp,
     fontWeight = FontWeight.Bold)

フォントファミリーを変更する

fontFamily で書体を変更します。Serif や Monospace などの組み込みフォントをすぐに使えるほか、カスタムフォントも読み込めます。

Text("code", fontFamily = FontFamily.Monospace)

文字間隔

ゆとりのある洗練された見出しには、letterSpacing を微調整します。文字の間隔を少し広げるだけで、大文字のタイトルに高級感を出せます。

Text("MENU", letterSpacing = 2.sp)

テーマのスタイルを活用する

値を 1 つずつ設定する代わりに、MaterialTheme の既成の style を渡します。すべての画面で見た目を統一できます。

Text("Title", style = MaterialTheme.typography.titleLarge)

小さな工夫で大きく洗練する

サイズ、太さ、スタイルは小さな引数ですが、組み合わせることで単調なテキストが、ユーザーにすぐ伝わる明確な階層構造になります。

クイックチェック

fontSize にはどの単位を指定すべきでしょうか。また、その理由は何でしょうか。

まとめ

fontSize、fontWeight、fontStyle、フォントファミリーを使ってテキストをスタイル設定しました。サイズには sp を使い、見た目を統一するためにテーマのタイポグラフィを優先しましょう。🎨

無料で開始

AI チューターと学ぶ Kotlin — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
30
レッスン
120

よくある質問

「フォントサイズ、太さ、スタイル」レッスンは無料ですか?

はい。「フォントサイズ、太さ、スタイル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「フォントサイズ、太さ、スタイル」で何を学びますか?

文字を太字や斜体にし、適切なサイズにします。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「フォントサイズ、太さ、スタイル」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか?

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Text Composable
  2. フォントサイズ、太さ、スタイル
  3. 色、配置、オーバーフロー
  4. AnnotatedString:装飾付きの混在テキスト
← Jetpack Compose Academyに戻る