ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
とは
(subscript) は、下付き文字として文字を表示するインライン要素です。化学式、数学の添字、脚注、変数のインデックスなどに使われます。
水の化学式は H2O である。
CO2 は温室効果ガスの代表である。
数列 a1, a2, a3, ... an
詳細は別表1を参照。
との対
と (superscript: 上付き) は一対の要素です。
| 要素 | 用途 | 例 |
|---|---|---|
| 下付き文字 | H2O, log10(x) |
| 上付き文字 | x2, 109, ™, ® |
主な使用例
化学式
H2O
H2SO4
C6H12O6
SO42-
14C
数式・統計
Sn = a1 + a2 + ... + an
log2(x) = ln(x) / ln(2)
N0 = 初期値, Nt = t 時点の値
∂f / ∂xi
変数インデックス(プログラミング解説など)
配列 arr のインデックス i は 0 から N-1 の範囲を取り、
arri が i 番目の要素を表す。
デフォルトスタイルと CSS 代替
多くのブラウザの初期 CSS は次のように定義されています:
/* ブラウザの user-agent stylesheet */
sub {
vertical-align: sub;
font-size: smaller;
line-height: normal;
}
sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
CSS だけで似た表示を作る
/* 意味は持たない、見た目だけ下付き */
.subscript-like {
vertical-align: sub;
font-size: 0.75em;
line-height: 0; /* 行間が広がるのを防ぐ */
}
ただし意味的なマークアップ (sub) と CSS による見た目だけの表現は別物です。化学式・数式のようにセマンティクスが重要なら必ず を使ってください。
カスタマイズ: 行間を保つ
そのまま使うと行の高さが広がってしまうことがあります。次の CSS で抑制できます:
sub, sup {
font-size: 0.75em;
line-height: 0; /* 行高を増やさない */
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
MathML での代替(複雑な数式)
3 行以上の数式や、複数の上下付きが入り組む場合は では限界があります。MathML を使うのが本来の解です:
KaTeX / MathJax を使う場合
水の分子式は $H_2O$ である。
エネルギーは $E = mc^2$ である。
アクセシビリティ
スクリーンリーダーは を普通の文字として読み上げることがほとんどです。「H 2 O」のように読まれます。意味を保証したい場合は aria-label で補完します:
H2O
よくあるミス
- 上下逆 -
とを間違える - 大量の数式を全て sub/sup で組む → MathML / KaTeX に切替
- 装飾目的で使う → CSS で済むなら CSS の方が適切
- SEO 目的でキーワードを sub に → 効果なし、可読性悪化
FAQ
Q: sub と sup は同時に使える?
A: 一つのテキスト要素に対し同時には付けられません(HTML の仕様上どちらか)。同時に表示したい場合は MathML を使うか、CSS で重ねます。
Q: 行間が広がる問題の解決法は?
A: 上述の line-height: 0 + position: relative 方式が最も簡単。
Q: sub/sup は SEO に影響する?
A: 検索キーワードへの直接効果はありません。意味的に正しいマークアップとして使うべきです。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- HTML q要素(インライン引用 / blockquote との違い / cite属性の使い方) 2026-06-11 05:44:46
- SQL 制約(NOT NULL / UNIQUE / PRIMARY KEY / FOREIGN KEY / CHECK / DEFAULT 完全ガイド) 2026-06-11 05:44:46
- Mac Safari でユーザーエージェントを切り替える方法(開発メニュー / Chrome や IE のフリ) 2026-06-11 05:44:46
- Laravel ルート一覧確認|php artisan route:list の使い方・フィルタオプション・JSON 出力・キャッシュ 2026-06-11 05:44:46
- Java static変数(クラス変数 / インスタンス変数との違い / 使い所と落とし穴) 2026-06-11 05:44:46
- HTML bdo要素(双方向テキストの方向を強制 / dir 属性の使い方 / bdi との違い) 2026-06-11 05:44:46
- Webスクレイピングとは|Python で始めるサンプルコード・robots.txt・利用規約・法的注意点まとめ 2026-06-11 05:44:46
- Canvas API 図形描画|四角形 fillRect / 円 arc / 線 lineTo / 多角形 と塗りつぶし・輪郭の使い分け 2026-06-11 05:44:46
- jQuery 値の取得|.text() / .html() / .val() / .attr() / .data() の違いと使い分け 2026-06-11 05:44:46
- UE5 ThirdPersonテンプレート キャラクターを歩かせる方法(Max Walk Speed / Shift で走る切替) 2026-06-11 05:44:46
- HTML figure要素(figcaption と一緒に図表・画像・コードを意味付け) 2026-06-11 05:44:46
- SQL DELETE 文 完全ガイド|WHERE 句必須、ROLLBACK、TRUNCATE との違い、Oracle/MySQL/PostgreSQL の違い 2026-06-11 05:44:46
- jQuery クリックイベント完全ガイド|.click() と .on("click") の違い・イベント委譲・ダブルクリック対策 2026-06-11 05:44:46
- jQuery .ready()(DOM 構築完了で実行 / 4 つの書き方 / 現代の代替) 2026-06-11 05:44:46
- Java Calendar.getInstance() 使い方|タイムゾーン/ロケール指定・年月日曜日の取得・LocalDate との比較 2026-06-11 05:44:46
コメントを削除してもよろしいでしょうか?