View Categories

基本

見出し #

「Heading（見出し）」要素は、ウェブサイトに見出しを追加するための基本的かつ重要な要素です。SEO（検索エンジン最適化）やアクセシビリティの観点からも、正しい使い方が重要です。

基本テキストとリッチテキスト #

テキストのエレメントは基本テキストとリッチテキストがある。

特徴／要素Basic TextRich Text
複数段落対応❌✅
HTMLタグ使用❌（不可）✅（可）
ダイナミックデータ✅✅
装飾（太字・リンク等）❌✅
シンプルさ✅（超シンプル）⭕（やや複雑）

基本テキストの特徴 #

✅ 向いているケース #

  • タイトルやラベルなど短いテキスト
  • HTML構造が不要な場所
  • ダイナミックデータを使いたいけど装飾の必要がない場合

✍️ 例 #

  • 商品名や価格の表示（{product_price} など）
  • カードコンポーネントの中のちょっとしたテキスト
  • ボタンのラベルっぽい使い方にもOK

リッチテキストの特徴 #

✅ 向いているケース #

  • 長めの文章や説明文
  • 装飾（リスト、リンク、強調など）を入れたい場合
  • 投稿本文、概要、会社紹介文など

✍️ 例 #

  • セクションの説明文
  • ブログのリード文や紹介文
  • コンタクトページの案内文

テキストリンク #

文字列にリンクを設定するための専用要素です。シンプルに見えますが、デザインやダイナミックデータとの組み合わせがしやすく、実は結構便利。

Query loopと組み合わせてリストを作るなど、便利につかえる。基本テキストよりシンプル。

  • 通常のHTMLでいうと <a href="URL">テキスト</a> に相当
  • Bricksではスタイリングや条件付き表示がしやすい形でこれを扱える

🎯 向いている使い方 #

🔹 シンプルなリンク #

  • 「もっと読む」リンク
  • サイドバーのテキストメニュー

🔹 ダイナミックなリンク #

  • 投稿のタイトルとURLを組み合わせる動的リンク
    • 例：Text: {post_title} / URL: {post_url}

🔹 スタイリッシュなインラインリンク #

  • 通常の段落内の一部だけをリンクにしたいとき、Rich Textだと制御しづらい場面でも、Text Linkを個別要素として使うとCSS制御しやすいです。

ボタン #

デザイン的にも機能的にも超よく使う基本パーツです。リンクにもできるし、CTA（行動喚起）にも使える万能要素です 。

デフォルトタグは<button>。アイコンを付けたり、CSSでのデザイン変更も柔軟にできる。

凝ったボタンを作るならブロックとしてイチから作る場合もある。

アイコン #

ページ内にシンプルなアイコンを簡単に追加できます。Font Awesome、Ionicons、Themifyのライブラリがデフォルトで使える。

アイコンを一つでも使うとライブラリ全体が読み込まれるため重くなる（Font Awesomeで200k程度）。SVGは一つ1K程度なので、SVG化されたアイコンを個々にアップしたほうが軽い。

他にもSVGで公開されているアイコンは多数あるので、探してみるのがいい。

画像 #

細かい設定は別項で解説予定。ここではTIPS的な情報をアップする。

✅ 使用目的別のおすすめタグ #

タグはデフォルトは<figure>が設定されている。レスポンシブル用に画像を切り替える用に設定すると自動的に<picture>タグになる。

タグ使うべきケース説明
<img>常に使われる（実際の画像）画像そのものは常に<img>タグで出力されます。
<figure>キャプション付きの画像や意味を持たせたい画像HTML5の意味論的に「画像＋キャプション」のようなまとまりを表現
<picture>レスポンシブ画像の切り替えをしたい時srcsetやmedia属性を使ってデバイスによって画像を出し分け
<a>画像にリンクをつけるとき<a><img></a> という構造になります
<div>特に意味は持たせない装飾用の画像や、デザイン用の背景画像など一般的に無難だが、意味論的には弱い
<header> / <main> / <section>などページ構造と組み合わせて使う場合通常はImage要素単体では使わないが、状況に応じてラップすることも

読み込み中（Loading） #

デフォルトはlazyで、「画像を、ユーザーがスクロールして見えるタイミングで読み込む」 という機能です。

つまり、ページを開いたときに、見えていない画像はまだ読み込まないので、初回のページ読み込みが速くなります。実際のHTMLでは、loading="lazy" という属性が <img> タグに追加されます。

ただし、ヒーロー（ページの上のメイン部分）では、すぐに見せたいため「eager」に設定する。google speed insights的にも有効。

Image要素（＝<img>タグを使う画像）」と「背景画像（＝CSSで設定するbackground-image）の使い方の違い #

🔍 ざっくり比較：Image要素 vs 背景画像 #

比較ポイントImage要素 (<img>)背景画像 (background-image)
HTMLに画像が表示される✅ 表示される（SEO対象）❌ 表示されない（CSSのみ）
alt属性が使える✅ 使える（アクセシビリティ対応）❌ 使えない
画像の意味・内容✅ 伝えられる（情報として重要）❌ 見た目だけの飾りに向いている
サイズ調整の自由度△ 画像サイズに依存しやすい✅ cover, contain, positionなど自由自在
レスポンシブ画像✅ <picture>で可△ メディアクエリで切り替える必要がある
クリックやリンク✅ 可能（aタグで囲える）❌ 基本的にはできない（JSで対応）

🖼 Image要素を使うべきケース（<img>） #

✅ 意味を持つ画像（コンテンツとして重要）

  • 記事内の写真、図、チャート、アイキャッチ画像
  • 商品画像、プロフィール画像
  • ユーザーに情報を伝えるための画像

理由：

  • altテキストで内容が伝えられる
  • 検索エンジンにも「意味のある画像」として認識される

🎨 背景画像を使うべきケース（background-image） #

✅ デザイン的な装飾・見た目重視

  • セクションの背景
  • ボタンにあしらいで使うパターン画像
  • レイアウトを崩さず「ビジュアル」を作りたいとき

理由：

  • レスポンシブ対応（coverなど）しやすい
  • テキストやボタンを重ねるのが簡単
  • コンテンツとしての意味を持たないならSEO的にも無視してOK

動画 #

Webページに動画を埋め込むための要素です。

動画の種類 #

  • Self-hosted（自己ホスト）
    サーバーにアップロードした .mp4 や .webm などの動画ファイルを使用。
    media、File URL、Dynamib Dataなどがある。
  • External（外部）
    YouTube や Vimeo など、外部サービスの動画を埋め込む

自己ホストの使い分けガイド #

選択肢適したケース
Media自分でアップした動画を普通に使いたいとき
File URL外部ファイル、CDN、他サイトのファイルを使いたいとき
Dynamic Data投稿やカスタムフィールドで動画URLを動的に切り替えたいとき
ACF（Advanced Custom Fields）などと連携して「投稿ごとに違う動画」を表示したいときに使うなど。

自己ホストと外部読み込みの使い所 #

コンテンツとして動画を扱うなら、SEOも強いyoutubeがいい。
セクションの背景など、SEOに関係ない装飾用途ならコントロールしやすい自己ホストが向いている。

Updated on 4月 14, 2025

What are your Feelings

  • Happy
  • Normal
  • Sad