ReflexKR

コンポーネント工房：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

HTML要素

HTML Text

rx.el.abbrrx.el.brx.el.bdirx.el.bdorx.el.brrx.el.citerx.el.coderx.el.datarx.el.dfnrx.el.emrx.el.irx.el.kbdrx.el.markrx.el.qrx.el.rprx.el.rtrx.el.rubyrx.el.srx.el.samprx.el.smallrx.el.strongrx.el.subrx.el.suprx.el.timerx.el.urx.el.wbr

公式ドキュメント

工房の注文書

リリースノートの1行に、バージョン、日付、新しいショートカットキー、廃止された機能を、それぞれふさわしい HTML のテキスト要素で表示してください。

文の中で特定の語に意味を与える HTML 要素26個です。強調、コード、キーボードのキー、引用、上付き文字、日付などです。ほとんどが行の中にとどまるインライン要素なので、rx.el.pやrx.textの中に混ぜて使います。ブラウザが基本の見た目（太字、斜体、等幅）を与え、検索エンジンやスクリーンリーダーはその意味を読み取ります。

Press Ctrl + S to save your work.

rx.el.p(
    "Press ",
    rx.el.kbd("Ctrl"),
    " + ",
    rx.el.kbd("S"),
    " to ",
    rx.el.strong("save"),
    " your work.",
)

プロパティを変えてみる

テキスト要素には固有の属性がほとんどなく、共通の属性とスタイルで扱います。markの背景色と、bdoのdir（文字の方向）を変えてみましょう。

プロパティを変えてみる

Reflex | Reflex | Reflex

word

mark_color

direction

size

rx.el.p(
    rx.el.mark("Reflex", background="yellow"),
    " | ",
    rx.el.bdo("Reflex", dir="rtl"),
    " | ",
    rx.el.small("Reflex"),
    font_size="18px",
)

bdo に dir="rtl" を渡すと、文字の並びがそのまま反転します。mark・small はスタイルで見た目を変えます。

プロパティ	値	既定値	用途
`value` (data)	文字列・数値	なし	人が読む文の裏にある、機械が読む値
`date_time` (time)	`"2026-05-01"`, `"09:00"` …	なし	日付・時刻の標準形式
`cite` (q)	URL	なし	引用元のアドレス（画面には表示されない）
`title` (abbr, dfn)	文字列	なし	略語の元の語。マウスを乗せると表示される
`dir` (bdo, bdi)	`"ltr"` `"rtl"`	親に従う	文字の方向
共通の属性・スタイル	`id` `class_name` `color` …	なし	すべてのテキスト要素で使える

強調と意味

見た目が同じでも意味が違う組があります。strongは重要であること、bは単なる太字。emは言葉の強勢、iは別の声（用語、外国語）です。 uは下線で示すべき注記、sはもう正しくない内容、markは蛍光ペン、smallは添え書きの小さな文字です。

strong important · b just bold

em stressed · i different voice

u annotated · s no longer true

mark highlighted · small side note

rx.el.div(
    rx.el.p(rx.el.strong("strong"), " important  ·  ", rx.el.b("b"), " just bold"),
    rx.el.p(rx.el.em("em"), " stressed  ·  ", rx.el.i("i"), " different voice"),
    rx.el.p(rx.el.u("u"), " annotated  ·  ", rx.el.s("s"), " no longer true"),
    rx.el.p(rx.el.mark("mark"), " highlighted  ·  ", rx.el.small("small"), " side note"),
    display="flex",
    flex_direction="column",
    gap="4px",
)

コードとキーボード

codeはコードの断片、kbdはユーザーが押すキー、sampはプログラムが出した出力です。3つとも等幅フォントで表示されます。

Run reflex run in the terminal.

Then press Ctrl + C to stop.

The terminal prints: App running at http://localhost:3000

rx.el.div(
    rx.el.p("Run ", rx.el.code("reflex run"), " in the terminal."),
    rx.el.p("Then press ", rx.el.kbd("Ctrl"), " + ", rx.el.kbd("C"), " to stop."),
    rx.el.p("The terminal prints: ", rx.el.samp("App running at http://localhost:3000")),
    display="flex",
    flex_direction="column",
    gap="4px",
)

引用、出典、定義

qは短い引用で、ブラウザが引用符を付けてくれます。cite属性には出典のアドレスを、cite要素には作品のタイトルを書きます。 dfnはその場で定義する用語、abbrは略語で、titleに元の語を書きます。

As The Zen of Python says: Simple is better than complex.

A component is a reusable piece of UI.

rx.el.div(
    rx.el.p(
        "As ",
        rx.el.cite("The Zen of Python"),
        " says: ",
        rx.el.q("Simple is better than complex.", cite="https://peps.python.org/pep-0020/"),
    ),
    rx.el.p(
        "A ",
        rx.el.dfn("component"),
        " is a reusable piece of ",
        rx.el.abbr("UI", title="User Interface"),
        ".",
    ),
    display="flex",
    flex_direction="column",
    gap="4px",
)

上付き、下付き、改行

sub・supは化学式や指数に使います。brはその場で改行し、wbrは「ここで改行してもよい」という印です。下のボックスは幅が狭いので、長い単語がwbrの位置で分かれます。

Water is H₂O. Energy is mc².

Line one
Line two after br

Supercalifragilisticexpialidocious

rx.el.div(
    rx.el.p("Water is H", rx.el.sub("2"), "O. Energy is mc", rx.el.sup("2"), "."),
    rx.el.p("Line one", rx.el.br(), "Line two after br"),
    rx.el.p(
        "Super",
        rx.el.wbr(),
        "califragilistic",
        rx.el.wbr(),
        "expialidocious",
        width="120px",
        padding="6px",
        border="1px dashed gray",
    ),
    display="flex",
    flex_direction="column",
    gap="8px",
)

機械が読む値

dataとtimeは、画面には人が読む文を表示し、属性にはプログラムが読む標準の値を隠しておきます。見た目は普通の文字と同じです。

Price: $12

Opens on May 1st

Starts at 9 am

rx.el.div(
    rx.el.p("Price: ", rx.el.data("$12", value=12)),
    rx.el.p("Opens on ", rx.el.time("May 1st", date_time="2026-05-01")),
    rx.el.p("Starts at ", rx.el.time("9 am", date_time="09:00")),
    display="flex",
    flex_direction="column",
    gap="4px",
)

文字の方向とルビ

bdiは方向がわからない文字列（ユーザー名など）を周囲から切り離し、右から左に書く文字が混ざっても順序が崩れないようにします。 bdoは方向を強制的に決めます。ruby・rtは漢字の上に読み方を付けるもので、rpはルビに対応していないブラウザでだけ表示されるかっこです。

Winner: إيان - 3 points

bdo rtl: Hello

漢(kan)字(ji)

rx.el.div(
    rx.el.p("Winner: ", rx.el.bdi("إيان"), " - 3 points"),
    rx.el.p("bdo rtl: ", rx.el.bdo("Hello", dir="rtl")),
    rx.el.p(
        rx.el.ruby("漢", rx.el.rp("("), rx.el.rt("kan"), rx.el.rp(")"), "字", rx.el.rp("("), rx.el.rt("ji"), rx.el.rp(")")),
        font_size="24px",
    ),
    display="flex",
    flex_direction="column",
    gap="6px",
)

注文書を仕上げる

バージョンはstrong、日付はtime、ショートカットキーはkbd、廃止されたものはs、新しいものはmark、補足はsmallとabbrで分けました。

v2.1 · released Oct 24, 2026

Search now opens with Ctrl + K. ~~Slash key~~ New shortcut.

Requires API v3.

rx.el.div(
    rx.el.p(
        rx.el.strong("v2.1"),
        " · released ",
        rx.el.time("Oct 24, 2026", date_time="2026-10-24"),
    ),
    rx.el.p(
        "Search now opens with ",
        rx.el.kbd("Ctrl"),
        " + ",
        rx.el.kbd("K"),
        ". ",
        rx.el.s("Slash key"),
        " ",
        rx.el.mark("New shortcut"),
        ".",
    ),
    rx.el.p(rx.el.small("Requires ", rx.el.abbr("API", title="Application Programming Interface"), " v3.")),
    padding="12px 16px",
    border_left=f"4px solid {rx.color('indigo', 9)}",
    background=rx.color("gray", 2),
    display="flex",
    flex_direction="column",
    gap="4px",
)

工房ノート

テキスト要素は文中の語に意味を与える。rx.el.p の中で文字と混ぜて使う。
strong/b、em/i のように見た目が同じでも意味が違う。意味があるなら strong・em。
code はコード、kbd は押すキー、samp はプログラムの出力。
固有の属性は data の value、time の date_time、q の cite の3つだけ。残りは共通の属性とスタイル。
bdi・bdo は文字の方向、ruby・rt・rp は読み方、wbr は改行してもよい位置。

← 前へ

HTML要素 · HTML

HTML要素 · HTML Layout

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex