ブロックサンプル：詳細（2/2）

詳細（2/2）

ブロックの設定を比較するサンプルです。各例の直前に変更設定と値を記載しています。

画像等は同梱素材を使用します。コピー用コードと書かれた例は、説明に従って必要なデータ・編集場所を用意してください。

sample-05390 / core/details　backgroundColor：backgroundColor="watery-blue"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05391 / core/details　backgroundColor：backgroundColor="watery-yellow"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05392 / core/details　backgroundColor：backgroundColor="watery-red"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05393 / core/details　backgroundColor：backgroundColor="watery-green"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05394 / core/details　backgroundColor：backgroundColor="ex-a"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05395 / core/details　backgroundColor：backgroundColor="ex-b"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05396 / core/details　backgroundColor：backgroundColor="ex-c"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05397 / core/details　backgroundColor：backgroundColor="ex-d"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05398 / core/details　backgroundColor：backgroundColor="ex-e"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05399 / core/details　backgroundColor：backgroundColor="ex-f"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05400 / core/details　fontSize：fontSize="small"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05401 / core/details　fontSize：fontSize="medium"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05402 / core/details　fontSize：fontSize="large"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05403 / core/details　fontSize：fontSize="huge"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05404 / core/details　align：align=""

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05405 / core/details　align：align="wide"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05406 / core/details　align：align="full"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05407 / core/details　lock：lock={"move":false,"remove":false}

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05408 / core/details　lock：lock={"move":true,"remove":false}

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05409 / core/details　lock：lock={"move":false,"remove":true}

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05410 / core/details　lock：lock={"move":true,"remove":true}

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05411 / core/details　allowedBlocks：allowedBlocks=["core/paragraph"]

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05412 / core/details　allowedBlocks：allowedBlocks=["core/paragraph","core/heading"]

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05413 / core/details　anchor：anchor="sample-anchor"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05414 / core/details　className：className="block-gallery-example"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05415 / core/details　文字色の自由指定：style.color.text="#19448e"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05416 / core/details　文字色の自由指定：style.color.text="#fff3ce"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05417 / core/details　文字色の自由指定：style.color.text="#a82d46"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05418 / core/details　背景色の自由指定：style.color.background="#fff3ce"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05419 / core/details　背景色の自由指定：style.color.background="#e8f0fa"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05420 / core/details　背景色の自由指定：style.color.background="#19448e"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05421 / core/details　グラデーション：style.color.gradient="linear-gradient(135deg,#dcecff 0%,#fff2db 100%)"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05422 / core/details　グラデーション：style.color.gradient="linear-gradient(90deg,#19448e 0%,#9b2d64 100%)"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05423 / core/details　linkの色：style.elements.link.color.text="#19448e"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05424 / core/details　linkの色：style.elements.link.color.text="#fff3ce"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05425 / core/details　文字組みの組み合わせ：style.typography.fontSize="14px" / style.typography.lineHeight="1.2" / style.typography.fontWeight="400" / style.typography.fontStyle="normal" / style.typography.letterSpacing="0" / style.typography.textTransform="none" / style.typography.textDecoration="none"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05426 / core/details　文字組みの組み合わせ：style.typography.fontSize="24px" / style.typography.lineHeight="1.8" / style.typography.fontWeight="700" / style.typography.fontStyle="italic" / style.typography.letterSpacing="0.08em" / style.typography.textTransform="uppercase" / style.typography.textDecoration="underline"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05427 / core/details　文字組みの組み合わせ：style.typography.fontSize="2rem" / style.typography.lineHeight="2.4" / style.typography.fontWeight="900" / style.typography.fontStyle="normal" / style.typography.letterSpacing="0.2em" / style.typography.textTransform="lowercase" / style.typography.textDecoration="line-through"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05428 / core/details　文字組みの組み合わせ：style.typography.fontSize="14px" / style.typography.lineHeight="1.2" / style.typography.fontWeight="400" / style.typography.fontStyle="italic" / style.typography.letterSpacing="0" / style.typography.textTransform="capitalize" / style.typography.textDecoration="none"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05429 / core/details　余白の組み合わせ：style.spacing.padding={"top":"0","right":"0","bottom":"0","left":"0"} / style.spacing.margin={"top":"0","right":"0","bottom":"0","left":"0"} / style.spacing.blockGap="0"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05430 / core/details　余白の組み合わせ：style.spacing.padding={"top":"1em","right":"1em","bottom":"1em","left":"1em"} / style.spacing.margin={"top":"1em","right":"1em","bottom":"1em","left":"1em"} / style.spacing.blockGap="1em"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05431 / core/details　余白の組み合わせ：style.spacing.padding={"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"} / style.spacing.margin={"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"} / style.spacing.blockGap="2rem"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05432 / core/details　枠線の組み合わせ：style.border.color="#19448e" / style.border.width="1px" / style.border.style="solid"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05433 / core/details　枠線の組み合わせ：style.border.color="#fff3ce" / style.border.width="3px" / style.border.style="dashed"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05434 / core/details　枠線の組み合わせ：style.border.color="#a82d46" / style.border.width="6px" / style.border.style="dotted"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05435 / core/details　layout：layout={"type":"constrained"}

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05436 / core/details　layout：layout={"type":"flex","flexWrap":"wrap","justifyContent":"center"}

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05437 / core/details　layout：layout={"type":"flex","orientation":"vertical","justifyContent":"left"}

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05438 / core/details　layout：layout={"type":"grid","columnCount":2}

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05439 / core/details　extraBottomMargin：extraBottomMargin=""

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05440 / core/details　extraBottomMargin：extraBottomMargin="0"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05441 / core/details　extraBottomMargin：extraBottomMargin="2"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05442 / core/details　extraBottomMargin：extraBottomMargin="10"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05443 / core/details　extraBottomMargin：extraBottomMargin="20"

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-05444 / core/details　組み合わせ：濃い背景と白い文字

詳細を開いて確認する

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。