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 Media

rx.el.arearx.el.audiorx.el.canvasrx.el.embedrx.el.iframerx.el.imgrx.el.mathrx.el.metarx.el.objectrx.el.picturerx.el.sourcerx.el.trackrx.el.video

公式ドキュメント

工房の注文書

商品詳細の画面：大きな写真（狭い画面では正方形の写真）、使い方の動画、試聴用の音声を、HTML のメディア要素だけで入れてください。

画像、動画、音声、別の文書をページに入れる HTML 要素です。img・video・audioがいちばんよく使われ、picture・sourceで画面に合うファイルを選び、iframe・embed・objectで別の文書を埋め込みます。 Reflex のrx.image、rx.video、rx.audioより単純で、ブラウザの標準機能をそのまま使います。

rx.el.img(src="https://picsum.photos/id/1025/300/200", alt="A dog in a blanket", width="300px", height="200px")

プロパティを変えてみる

imgではボックスへのサイズの合わせ方（object_fit）と CSS フィルターを、videoでは操作バー（controls）とループ・ミュートを変えてみましょう。

A city street — object_fit：cover は切り取って埋め、contain は全体が見えるように縮め、fill は比率を無視して引き伸ばします。

プロパティを変えてみる

controls

loop

muted

width

rx.el.video(
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
    poster="https://picsum.photos/id/152/320/180",
    controls=True,
    loop=False,
    muted=True,
    plays_inline=True,
    width="280px",
)

controls をオフにすると再生バーが消えます。poster は再生前に表示される画像です。

プロパティ	値	既定値	用途
`src` `alt` (img)	URL / 文字列	なし	画像のアドレスと代替テキスト。`alt`は必ず書く
`src_set` `sizes` (img, source)	候補のリスト	なし	画面の密度・幅に合うファイルを選ぶ
`loading` (img, iframe)	`"lazy"` `"eager"`	`"eager"`	画面に近づいたら読み込む
`decoding` (img)	`"async"` `"sync"` `"auto"`	`"auto"`	画像をデコードするタイミング
`controls` `loop` `muted` `auto_play` (video, audio)	`True` / `False`	`False`	操作バー、ループ、ミュート、自動再生
`poster` `plays_inline` (video)	URL / bool	なし	再生前の画像、モバイルで全画面にせず再生
`preload` (video, audio)	`"none"` `"metadata"` `"auto"`	ブラウザによる	先に読み込んでおく量
`media` `type` (source)	メディアクエリ / MIME	なし	条件とファイル形式
`kind` `src_lang` `label` `default` (track)	文字列・bool	なし	字幕ファイル
`src_doc` `sandbox` `allow` (iframe)	HTML / 権限のリスト	なし	埋め込む文書と制限
`shape` `coords` `href` (area)	`"rect"` `"circle"` `"poly"` …	なし	イメージマップのクリック領域

img：代替テキストと解像度の候補

altは画像を読み込めないときに代わりに表示され、スクリーンリーダーが読み上げるテキストです。右の画像はわざとこのサイトにないアドレスにしてあるので、altが表示されます。 src_setに1x・2xの候補を渡すと、高解像度の画面ではより大きなファイルを選びます。loading="lazy"は、画面の近くに来るまで読み込みを遅らせます。

rx.el.div(
    rx.el.img(
        src="https://picsum.photos/id/1025/150/100",
        src_set="https://picsum.photos/id/1025/150/100 1x, https://picsum.photos/id/1025/300/200 2x",
        alt="Sharp on high density screens",
        loading="lazy",
        decoding="async",
    ),
    rx.el.img(src="/no-such-image.png", alt="Broken image: the alt text shows"),
    display="flex",
    gap="12px",
    align_items="center",
)

picture と source：画面に合う画像

pictureの中のsourceを上から見ていき、mediaの条件に合う最初のファイルを使います。合うものがなければ最後のimgを使います。ウィンドウの幅を 640px より狭くすると、正方形の写真に切り替わります。

rx.el.picture(
    rx.el.source(media="(max-width: 640px)", src_set="https://picsum.photos/id/1015/300/300"),
    rx.el.img(src="https://picsum.photos/id/1016/480/200", alt="A landscape", max_width="100%"),
)

video、audio、source、track

srcを直接渡してもよいし、形式の違うファイルを複数sourceの子要素として渡しても構いません。ブラウザは再生できる最初のsourceを選びます。 sourceの後ろのテキストは、動画を再生できないブラウザでだけ表示されます。自動再生（auto_play）は、ほとんどのブラウザでmutedのときだけ許可されます。

rx.el.div(
    rx.el.video(
        rx.el.source(src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4", type="video/mp4"),
        "Your browser cannot play this video.",
        controls=True,
        muted=True,
        preload="metadata",
        width="280px",
    ),
    rx.el.audio(
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
        controls=True,
        preload="none",
    ),
    display="flex",
    flex_direction="column",
    gap="12px",
)

trackは WebVTT（.vtt）の字幕ファイルを付けます。同じサイトの字幕ファイルが必要なので、ここではコードとしてだけ示します。ファイルはassetsフォルダーに置きます。

rx.el.video(
    rx.el.source(src="/flower.mp4", type="video/mp4"),
    rx.el.track(src="/flower.en.vtt", kind="subtitles", src_lang="en", label="English", default=True),
    controls=True,
)

iframe：ページの中のページ

srcに別のページのアドレスを渡すか、src_docに HTML を直接渡します。sandbox=""は埋め込んだ文書のスクリプト・フォーム・ポップアップをすべて止め、必要なものだけを"allow-scripts"のように許可します。 titleはスクリーンリーダーに何が入っているかを伝えます。ほかのサイトは埋め込みを禁止しているところが多いです。

rx.el.iframe(
    src_doc="<h3 style='font-family:sans-serif'>Hello from an iframe</h3><p style='font-family:sans-serif'>This page lives in src_doc.</p>",
    sandbox="",
    loading="lazy",
    title="Inline document",
    width="320px",
    height="130px",
    border="1px solid gray",
    border_radius="6px",
)

embed と object

どちらも外部リソースを入れる古い方法です。embedはsrcとtypeだけを受け取り、objectはdataで受け取って、読み込めなければ子要素を代わりに表示します。いまは画像ならimg、動画ならvideo、文書ならiframeを使うほうがよいでしょう。

rx.el.div(
    rx.el.embed(src="https://picsum.photos/id/237/160/110", type="image/jpeg", width="160px", height="110px"),
    rx.el.object(
        "Fallback text if the data cannot load",
        data="https://picsum.photos/id/40/160/110",
        type="image/jpeg",
        width="160px",
        height="110px",
    ),
    display="flex",
    gap="12px",
)

canvas：お絵かきボード

canvasは空のキャンバスで、描くのは JavaScript の仕事です。下ではon_mountでrx.call_scriptを使い、四角形と円を描いています。 canvasのwidth・heightは CSS のサイズではなくキャンバスのピクセル数なので、Reflex ではcustom_attrsで渡します（キーワードで渡すと CSS になります）。

rx.el.canvas(
    id="htmlmedia_canvas",
    custom_attrs={"width": "260", "height": "100"},
    border="1px solid gray",
    border_radius="6px",
    on_mount=rx.call_script(
        "const g = document.getElementById('htmlmedia_canvas').getContext('2d');"
        " g.fillStyle = '#6e56cf'; g.fillRect(20, 20, 120, 60);"
        " g.fillStyle = '#e54d2e'; g.beginPath(); g.arc(200, 50, 30, 0, Math.PI * 2); g.fill();"
    ),
)

area：イメージマップ

mapの中のareaが、画像の上のクリック領域です。imgのuse_mapに"#マップ名"を書いて結び付けます。写真の左半分と右の円が、それぞれ別の文書につながっています。

rx.el.div(
    rx.el.map(
        rx.el.area(shape="rect", coords="0,0,150,200", href="https://reflex.dev/docs/library/", target="_blank", alt="Library docs"),
        rx.el.area(shape="circle", coords="225,100,60", href="https://reflex.dev/docs/library/html/media/", target="_blank", alt="Media docs"),
        name="htmlmedia-map",
    ),
    rx.el.img(src="https://picsum.photos/id/1060/300/200", alt="Image map", use_map="#htmlmedia-map", width="300px", height="200px"),
)

math と meta

rx.el.mathは数式（MathML）を入れる箱ですが、中に入れるmi・mo・msupのようなタグはrx.elにありません。数式はrx.htmlで MathML を丸ごと入れるほうが簡単です。 metaは文書のヘッドの情報です。React 19 は本文のmetaをヘッドに引き上げるのでページには描かず、ふつうは@rx.pageのmeta引数で渡します。

a^{2} + b^{2} = c^{2}

rx.html("<math display='block'><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></math>")

rx.el.math(...)   # MathML box; rx.el has no mi/mo/mn tags to put inside it
rx.el.meta(name="description", content="A page about media")   # for the document head

@rx.page(title="Media", description="A page about media", meta=[{"name": "theme-color", "content": "#6e56cf"}])
def media_page(): ...

注文書を仕上げる

写真はpictureで画面に合わせ、動画はposterとpreload="none"でクリックされるまで読み込まず、音声はaudioの標準のバーを使います。

See it in action

Sound preview

rx.el.div(
    rx.el.picture(
        rx.el.source(media="(max-width: 640px)", src_set="https://picsum.photos/id/26/320/320"),
        rx.el.img(src="https://picsum.photos/id/26/440/240", alt="Travel kit on a table", border_radius="8px", max_width="100%"),
    ),
    rx.el.p("See it in action", font_weight="600", margin_top="8px"),
    rx.el.video(
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
        poster="https://picsum.photos/id/26/440/248",
        controls=True,
        muted=True,
        plays_inline=True,
        preload="none",
        width="100%",
    ),
    rx.el.p("Sound preview", font_weight="600", margin_top="8px"),
    rx.el.audio(src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", controls=True, preload="none"),
    max_width="440px",
)

工房ノート

img には alt を必ず。src_set・loading="lazy" で適切なファイルを遅れて読み込む。
picture + source(media) で画面に応じて別の画像、最後に img。
video・audio は controls でバーを、自動再生は muted と一緒に。字幕は track。
iframe は src か src_doc、sandbox で制限。embed・object は古い方法。
canvas のサイズは custom_attrs で、描画は JavaScript。meta は @rx.page(meta=...) で。

← 前へ

HTML要素 · HTML Forms

HTML要素 · HTML Tables

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex