ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
wbr 要素とは
Word Break Opportunity の略。「この位置で改行してもよい」というヒントをブラウザに与える HTML5 の空要素です。デフォルトでは改行しないが、表示幅が狭く折返しが必要なときだけ、この位置で改行されます。
https://example.com/very/long/path/to/resource?id=12345&token=abc
npm install --save-dev eslint-plugin-react-hooks
非常に長いカタカナ語でも適切な位置で改行できる
なぜ wbr が必要なのか
通常、ブラウザはスペースやハイフンの位置で改行します。URL のように区切り文字が無い長い文字列は、コンテナをはみ出して横スクロールを発生させます。
https://example.com/very/long/path/to/resource
https://example.com/very/long/path/to/resource
CSS の代替案との比較
| 方法 | 動作 | 用途 |
|---|---|---|
| 指定位置のみ折返し可 | URL / 特定箇所だけ意図的に折返したい |
word-break: break-all | どこでも改行(強制) | 長い英単語・URL を強制折返し |
overflow-wrap: break-word | はみ出すときだけ単語途中で改行 | レイアウト崩れ防止 |
overflow-wrap: anywhere | 任意位置で改行可(min-content 計算に影響) | モダン推奨 |
(U+00AD) | 改行時にハイフン表示 | 英独語の長い単語 |
hyphens: auto | 言語辞書ベースで自動ハイフネーション | 英語コンテンツ |
CSS で同じ効果
/* 推奨: モダンブラウザでの折返し制御 */
.url-text {
overflow-wrap: anywhere; /* または break-word */
word-break: normal; /* 不要な強制改行をしない */
}
/* CJK と URL の両対応 */
.long-text {
word-break: break-all; /* 日本語の途中改行は問題ない */
overflow-wrap: break-word; /* URL 等もこれで吸収 */
}
/* 英語のハイフネーション */
.english-text {
hyphens: auto;
-webkit-hyphens: auto;
}
ソフトハイフンとの違い
HTML エンティティ (U+00AD SOFT HYPHEN)は、改行時にハイフン記号を表示する不可視文字です。欧米語のハイフネーション向けで、wbr とは目的が異なります:
supercalifragilisticexpialidocious
https://example.com/path/to/resource
使い所と使わない所
使うべきケース
- 長い URLを本文中に表示するとき
- コード例(コマンド・ファイルパス)を折返したいとき
- 非常に長い固有名詞 / 商品コード
- メールアドレス(
を@や.前に)
避けるべきケース
- 通常の文章(CJK は自然と改行できるので不要)
code/preの中(white-space: preと相性悪い)- CSS で
overflow-wrapを使えば済むケース
JavaScript で動的に wbr を挿入
// 長い URL に wbr を自動挿入
function wbrify(url) {
return url.replace(/([/?&=])/g, '$1');
}
document.querySelectorAll('.url').forEach(el => {
el.innerHTML = wbrify(el.textContent);
});
// 例: https://example.com/path?id=123
// → https://example.com/path?id=123
IE / 古ブラウザ対応
HTML5 標準化以前、IE は独自実装で を解釈していました。現在は IE7+ / すべてのモダンブラウザで対応:
https://example.com/pathtoresource
Markdown / CMS での扱い
Markdown は をそのまま通します。WordPress 等の CMS でも HTML タグとして許可されています。フィルター系プラグインで除去されないように注意。
SEO とアクセシビリティ
- SEO: 検索エンジンは
を無視するので、URL の分割としては評価されない(OK) - コピペ: ブラウザ・OS によって
の位置にゼロ幅スペースが入り、コピペした URL が機能しない場合がある - スクリーンリーダー: 通常は読み上げない
コピペ問題を避けるには、表示用テキストとリンク先 URL を分けるのが定番:
https://example.com/very/long/path/to/resource
FAQ
Q: と の違い?
A: は必ず改行、 は必要なときだけ改行。空き幅があれば は何もしません。
Q: 終了タグは必要?
A: 空要素なので不要。XHTML 互換にしたいなら も可。
Q: CSS だけで済ませたい
A: overflow-wrap: anywhere + word-break: break-word でほぼ代替可能。意図的に位置を指定したいときだけ を使うのが推奨。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子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アノテーションとは
最近更新/作成されたページ
- UE5 で鏡を作る方法 (Planar Reflection / Scene Capture / SSR / マテリアル) 2026-06-11 04:04:53
- Oracle CKPT (Checkpoint Process) の役割とパラメータ (リカバリ時間短縮) 2026-06-11 04:04:53
- Java プログラムの全体構造 (package / import / class / main / module / Maven) 2026-06-11 04:04:53
- UE5 Data Asset と Data Table の違い (使い分け / Asset Manager / CSV 連携) 2026-06-11 04:04:53
- Java 比較演算子の使い方 (== / equals / compareTo / Objects.equals) 2026-06-11 04:04:53
- Linux への scikit-learn インストール (pip / venv / Conda / 依存パッケージ) 2026-06-11 04:04:53
- Scratch でスプライトを追加する 5 つの方法 (ライブラリ / 自分で描く / アップロード / カメラ / サプライズ) 2026-06-11 04:04:53
- JavaScript の "" と '' の違い (仕様上は等価 / テンプレートリテラル / JSON / Lint) 2026-06-11 04:04:53
- Laravel マイグレーションファイルの作成 (make:migration / Schema::create / down 実装) 2026-06-11 04:04:53
- Unity 「3 Skyboxes」アセットの使い方と Skybox の基礎 (Material / Lighting / HDR) 2026-06-11 04:04:53
- Linux で IP アドレスを確認するコマンド完全ガイド(ip / ifconfig / hostname) 2026-06-11 04:04:52
- Docker イメージ操作完全ガイド(search / pull / images / rmi / multi-arch) 2026-06-11 04:04:52
- SQL の組み込み関数まとめ(集計 / 文字列 / 日時 / 数値 / 条件 / ユーザー定義) 2026-06-11 04:04:52
- Laravel Query Builder の DELETE 完全ガイド(Eloquent / Soft Delete / 一括削除) 2026-06-11 04:04:52
- HTML <wbr> 要素の使い方と <code>word-break</code> / ­ との違い 2026-06-11 04:04:52
コメントを削除してもよろしいでしょうか?