HTML文章内で改行させるbr（ライン・ブレーク）タグ、改行が可能な位置を指定する<wbr>（ワード・ブレーク・オポチュニティー）タグの使用法について掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| br | ・フローコンテンツ ・フレージングコンテンツ |
なし |
| wbr |
グローバル属性
グローバル属性は、すべての要素に指定できる共通の属性のことです。
accesskey（アクセスキー）
要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。
autocapitallze
入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します
| 値 | 内容 |
|---|---|
| offまたはnone | 自動的な大文字化は指定しない |
| onまたはsentences | 最初の文字を大文字化する |
| words | 各語の最初の文字を大文字化する |
| characters | すべての文字を大文字化する |
class（クラス）
要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。
contenteditable（コンテント・エディタブル）
要素の内容が閲覧者による編集可能かどうか指定します。
| 値 | 内容 |
|---|---|
| trueまたは、空 | 閲覧者による編集可能。 |
| false | 閲覧者による編集不可。 |
data-
カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。
dir（ディレクショナリティ）
要素の内容の書字方向（文字を書き進める方向）を指定します。
| 値 | 内容 |
|---|---|
| ltr | テキストを左から右へ書き進める。「Left to Righ」の略 |
| rtl | 要素は編集不可。「Right to Left」の略 |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
draggable
Drag and Drop APIを使用して要素をドラッグすることができるか指定します。
| 値 | 内容 |
|---|---|
| テキストを左から右へ書き進める。「Left to Righ」の略 | |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
hidden（ヒドゥン）
要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。（商品IDやユーザーID）
id（アイディー）
要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。
空白文字は使用できません。
lang（ランゲージ）
要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。
例：lang=”ja”
spellcheck（スペルチェック）
要素の内容に対するスペルチェックの可否を指定します。
| true | スペルチェックをします。 |
| false | スペルチェックをしません。 |
style（スタイル）
要素に直接スタイルシートを指定します。
※style属性でスタイルを指定する方法はあまり推奨されていません。
tabindex（タブインデックス）
「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。
title（タイトル）
要素に補足情報を加えます
translate（トランスレート）
翻訳対象にするかどうかを指定します。
| 値 | 内容 |
|---|---|
| yes | 翻訳対象とする |
| no | 翻訳非対象とする |
イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。
onclick
要素をクリックしたときにスクリプトを実行します。
oninput
入力コントロールにデータを入力したときにスクリプトを実行します。
onsubmit
入力コントロールからデータを送信するときにスクリプトを実行します。
br要素
書式・概要
インラインレベル要素
<br>HTMLのコンテンツであるテキストに、ソースコード上で改行をいれてもブラウザでは反映されないため、改行するためのbr（ライン・ブレーク）要素を使用します。改行したいテキストの位置に<br>を設置することで改行して表示されます。
HTMLの仕様では、要素内容に含まれる改行はブラウザで表示させる時には半角スペースに変換されることになっています。
なお、br要素は段落間の余白を調整したり、文章の途中に不要な改行を入れたりするなどのレイアウト目的で使用するものではなく、詩や住所の表記のように改行がコンテンツの一部に含まれているような場合に使用する要素です。余白などはCSSを使用して調整します。
使用方法
<br>実装例
<!DOCTYPE html>
<html lang="ja">
<head>
<title>brタグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<h1>brタグ サンプル</h1>
<h2>brを使用しない場合</h2>
<p>
〒901-0154
沖縄県 那覇市 赤嶺 すなりんリゾート
すなりん支配人
</p>
<h2>brを使用する場合</h2>
<p>
〒901-0154<br>
沖縄県 那覇市 赤嶺 すなりんリゾート<br>
すなりん支配人
</p>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
wbr要素
書式・概要
<wbr>wbr要素はテキストの折り返し可能な箇所を指定します。通常、テキストがブラウザーの表示領域の幅に達すると、そこで折り返されます。英単語は途中での折り返しを禁止しているため長い英単語は表示領域を超えても折り返しされません。
その場合は、wbrタグを記述することにより、指定した場所で折り返すことができます。ただし、wbr要素は許可するだけなので、指定した位置で実際折り返すかどうかは、表示領域の幅やテキストの分量、文字サイズによります。
日本語の場合は、１文字が表示の単位なので、どの位置でも改行ができます。
使用方法
<wbr>実装例
<!DOCTYPE html>
<html lang="ja">
<head>
<title>wbrタグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<h1>wbrタグ サンプル</h1>
<h2>wbrを使用しない場合（英語）</h2>
<p>
The scope of this specification is not to describe an entire operating system. In particular, hardware configuration software,
image manipulation tools, and applications that users would be expected to use with high-end workstations on a daily basis are out of scope.
In terms of applications, this specification is targeted specifically at applications that would be expected to be used by users on an occasional basis,
or regularly but from disparate locations, with low CPU requirements. Examples of such applications include online purchasing systems, searching systems,
games (especially multiplayer online games), public telephone books or address books, communications software (email clients,
instant messaging clients, discussion software), document editing software, etc.
</p>
<h2>wbrを使用する場合</h2>
<p>
The scope of this specification is not to describe an entire operating system. In particular, hardware configuration soft<wbr>ware,
image manipulation tools, and applications that users would be expected to use with high-end workstations on a daily basis are out of scope.
In terms of applications, this specification is targeted specifically at applications that would be expected to be used by users on an occasional basis,
or regularly but from disparate locations, with low CPU requirements. Examples of such applications include online purchasing systems, searching systems,
games (especially multiplayer online games), public telephone books or address books, communications software (email clients,
instant messaging clients, discussion software), document editing software, etc.
</p>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント