[33-1] 改行可能位置を示す wbr要素 を使ってみよう

最終更新日:2017年11月05日  (初回投稿日:2012年01月26日)

<wbr>要素は、ブラウザに改行可能位置を示します。

使用する要素 <wbr>

「wbr」は「word break」の略。
以前紹介した <br>(改行させる要素)は「line break 」の略です。
<wbr>は<br>と同様に「終了タグ」(</wbr>)を省略できます。

<wbr>は、<br>と違って、強制的に改行させるのでなく「改行すべきだったら改行していいよ」とブラウザに指示し、ブラウザは、表示領域の幅に合わせて改行かそのままか自動的に判断します。

<wbr>は、もともと Netscape Navigator独自の要素で、<nobr>〜</nobr>(改行禁止の指定)の中で、改行してもいい箇所に使用したそうです。
HTML4では標準仕様に取り入れなかったけど、HTML5から標準仕様になったんだそうです。

<wbr>を使ってみよう

<wbr>は、長い単語などを表記するときに、改行してもいい所をブラウザに指示します。

サンプルを見てみましょう。

(サンプルの英単語は「17の材料からなる料理の名前」だそうで、182文字もあります。
 古代ギリシャの劇作家アリストファネスの作品中に出てくる単語(の英訳)だそうです。)

wbrを指定した場合
Aopadotenachoselachogaleokranioleipsanodrimhipotrimmatosilphioparaome litokatakechymenokichlepikossyphophattoperisteralektryonoptekephallio kigklopeleiolagoiosiraiobaphetraganopterygon
wbrを指定しなかった場合
Aopadotenachoselachogaleokranioleipsanodrimhipotrimmatosilphioparaomelitokatakechymenokichlepikossyphophattoperisteralektryonoptekephalliokigklopeleiolagoiosiraiobaphetraganopterygon

<wbr>を指定しない2番目の <dd>要素の中は、枠を突き抜けています。

上のサンプルのHTMLです。

<dl>
<dt>wbrを指定した場合</dt>
<dd>Aopadotenachoselachogaleokranioleip<wbr>sanodrimhipotrimmatosilphioparaome<wbr>
litokatakechymenokichlepikossypho<wbr>phattoperisteralektryonoptekephallio<wbr>
kigklopeleiolagoiosiraiobaphetragano<wbr>pterygon</dd>
<dt>wbrを指定しなかった場合</dt>
<dd>Aopadotenachoselachogaleokranioleipsanodrimhipotrimmatosilphioparaom
elitokatakechymenokichlepikossyphophattoperisteralektryono
ptekephalliokigklopeleiolagoiosiraiobaphetraganopterygon
</dd>
</dl>

最初の <dd>要素の中で、<wbr>要素を適宜使っています(3〜5行目)
必ず <wbr>要素の部分で改行しているのではなく、領域内に収まる部分はそのままで、収まらないところでは <wbr>要素の箇所で改行していますね。

日本語の場合は、ブラウザは基本的に 単語の途中でも1文字単位で切ります。なのでこの <wbr>要素は、あまり使う機会がないかもしれません。

英語などの場合は、ブラウザは単語の途中で改行しないようになっています。
単語と単語の間の「半角スペース」や、「-(ハイフン)」「/(スラッシュ)」などの記号の箇所が、ブラウザにとってデフォルトの「改行可能位置」です。
長い単語など、通常なら改行されないものに対して<wbr>要素を使います。

次のサンプルは、とても長いプログラムコードに、<wbr>要素を使って改行可能な位置を指定しています。

<pre>...
Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], <wbr>HeadingCoordinates[2], <wbr>HeadingCoordinates[3], <wbr>HeadingCoordinates[4]);
Course course = Helm.CourseFactory(Heading, <wbr>Maps.MapFactoryFromHeading(heading), <wbr>Speeds.GetMaximumSpeed().ConvertToWarp());
...</pre>

参考:The wbr element - HTML 5.1 2nd Edition | W3C Recommendation

次回予告

次回は、改行がらみ(?)で、関連のCSSを紹介します。
単語の途中でも強制的に改行する「word-wrap: break-word」です。

今日の<wbr>要素は、ブラウザに「単語を勝手に壊させず、改行していい所を指定」しましたね。
このCSSは、領域の幅に合わせて単語の途中でも改行させる指定です。
URLなど、どこで切っても良いモノに使うと便利です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.