ReflexKR

Reflex公式ドキュメント

コンポーネント工房：Reflexライブラリ100

講座の概要

レイアウト

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

タイポグラフィ

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

フォーム

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

データ表示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

開閉と切り替え

Tabs

Accordion

Segmented Control

オーバーレイ

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

動的レンダリング

Cond

Match

Foreach

Auto Scroll

メディア

Image

Audio

Video

表とデータグリッド

Table

Data Table

Data Editor

チャート

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

チャートの部品

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

ほかのチャートライブラリ

Plotly

Pyplot

HTML要素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

そのほかの道具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

コンポーネント工房：Reflexライブラリ100

タイポグラフィ

Heading

rx.heading

公式ドキュメント

工房の注文書

ショッピングサイトの特集ページに、大きなページ見出しを1つと、その下に同じサイズのカテゴリ見出しを2つ置いてください。

rx.heading はページや節の見出しです。rx.text と同じ文字プロパティ（size、weight、align、trim、色）を使いますが、既定で太く大きく、as_ で h1〜h6 の見出しレベルを決めます。見出しレベルは文書の目次構造になるので、見た目とは切り離して考えます。

The quick brown fox jumps over the lazy dog.

rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2")

プロパティを変えてみる

as_ を変えても画面はそのままで、サイズを変えるには size を変えます。2つを別々に変えて、違いを確かめてみてください。

プロパティを変えてみる

Spring Collection

label

as_

size

weight

align

trim

color

high_contrast

rx.heading("Spring Collection", as_="h2", size="6", weight="bold", align="left", trim="normal", color_scheme="gray", high_contrast=False)

as_ は文書構造（h1〜h6）を、size は見た目のサイズを決めます。2つのプロパティは互いに影響しません。

プロパティ	値	既定値	用途
`as_`	`"h1"` ~ `"h6"`	`"h1"`	見出しレベル（文書構造）。見た目は変わらない
`size`	`"1"` ~ `"9"`	`"6"`	見た目のサイズと行間、字間
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	`"bold"`	太さ
`align`	`"left"` `"center"` `"right"`	継承	揃え
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	上下の行間の余白を切り取る
`color_scheme`	Radix の色名	テーマ色	文字色
`high_contrast`	`True` / `False`	`False`	背景とのコントラストを強める
`as_child`	`True` / `False`	`False`	子要素に見出しスタイルだけを適用

イベントは on_click などの基本イベントだけです。

as_ は構造、size は見た目

上の3行は h2、h3、h4 とレベルが違いますが、サイズは同じです。as_ は意味だけを変えるからです。下の3行のように、レベルが深くなるほど size を自分で小さくすると、構造と見た目が一致します。1ページに h1 は1つだけ置くのが普通です。

Level 2

Level 3

Level 4

Page title

Section

Subsection

rx.flex(
    rx.heading("Level 2", as_="h2"),
    rx.heading("Level 3", as_="h3"),
    rx.heading("Level 4", as_="h4"),
    rx.separator(),
    rx.heading("Page title", as_="h1", size="8"),
    rx.heading("Section", as_="h2", size="6"),
    rx.heading("Subsection", as_="h3", size="4"),
    direction="column",
    spacing="3",
)

サイズ、太さ、揃え

size は "1" から "9" までです。文字が大きくなるほど相対的な行間と字間が狭くなるので、大きな見出しも間延びして見えません。

Size 1

Size 3

Size 5

Size 7

Size 9

rx.flex(
    rx.heading("Size 1", size="1"),
    rx.heading("Size 3", size="3"),
    rx.heading("Size 5", size="5"),
    rx.heading("Size 7", size="7"),
    rx.heading("Size 9", size="9"),
    direction="column",
    spacing="3",
)

Light

Regular

Medium

Bold

Left-aligned

Center-aligned

Right-aligned

rx.flex(
    rx.heading("Light", as_="h2", weight="light"),
    rx.heading("Regular", as_="h2", weight="regular"),
    rx.heading("Medium", as_="h2", weight="medium"),
    rx.heading("Bold", as_="h2", weight="bold"),
    rx.separator(),
    rx.heading("Left-aligned", as_="h2", align="left"),
    rx.heading("Center-aligned", as_="h2", align="center"),
    rx.heading("Right-aligned", as_="h2", align="right"),
    direction="column",
    spacing="3",
    width="100%",
)

trim：見出しの上の余白を揃える

見出しは文字が大きいぶん、行間の余白も大きくなります。trim="start" で上側の余白を切り取ると、カードやボックスの上の内側余白が左右と同じに見えます。"both" は上下とも切り取ります。

Without Trim

With Trim

With trim

The heading now sits as close to the top edge as the text does to the sides.

rx.flex(
    rx.heading(
        "Without Trim",
        as_="h2",
        trim="normal",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    rx.heading(
        "With Trim",
        as_="h2",
        trim="both",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    rx.box(
        rx.heading("With trim", as_="h3", size="3", margin_bottom="4px", trim="start"),
        rx.text("The heading now sits as close to the top edge as the text does to the sides."),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

色とコントラスト

color_scheme でテーマとは別の色を使い、high_contrast=True で同じ系統のより濃い色にします。左が既定、右が高コントラストです。

Indigo

Cyan

Crimson

rx.grid(
    rx.heading("Indigo", as_="h3", color_scheme="indigo"),
    rx.heading("Indigo", as_="h3", color_scheme="indigo", high_contrast=True),
    rx.heading("Cyan", as_="h3", color_scheme="cyan"),
    rx.heading("Cyan", as_="h3", color_scheme="cyan", high_contrast=True),
    rx.heading("Crimson", as_="h3", color_scheme="crimson"),
    rx.heading("Crimson", as_="h3", color_scheme="crimson", high_contrast=True),
    columns="2",
    spacing="2",
)

画面幅に応じてサイズを変える

size、weight、align、trim には、文字列の代わりに画面幅ごとの値を dict で渡せます。下の見出しは狭い画面で "4"、sm 以上で "6"、md 以上で "8" になります。ウィンドウの幅を縮めてみてください。

Resize the window

rx.heading("Resize the window", as_="h2", size={"initial": "4", "sm": "6", "md": "8"})

注文書を仕上げる

ページ見出しは h1 で大きく、カテゴリ見出し2つは h2 で同じサイズにします。いちばん上の見出しは trim="start" で上の余白を詰めます。

Spring Collection

New arrivals for warmer days.

Shirts

Linen and cotton, six colors.

Shoes

Light sneakers and sandals.

rx.box(
    rx.heading("Spring Collection", as_="h1", size="8", trim="start"),
    rx.text("New arrivals for warmer days.", size="3", color_scheme="gray"),
    rx.heading("Shirts", as_="h2", size="5", margin_top="20px"),
    rx.text("Linen and cotton, six colors.", size="2"),
    rx.heading("Shoes", as_="h2", size="5", margin_top="20px"),
    rx.text("Light sneakers and sandals.", size="2"),
)

工房ノート

rx.heading は既定で h1、size "6"、太字。as_ で h1〜h6 のレベルを決める。
as_ は文書構造だけを、size は見た目だけを変える。レベルが深ければ size を自分で小さくする。
weight・align・color_scheme・high_contrast は rx.text と同じ。
trim="start" でボックス内の見出しの上の余白を揃える。
size={"initial": "4", "md": "8"} のように画面幅ごとの値を渡せる。

← 前へ

タイポグラフィ · Text

タイポグラフィ · Link

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex