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

最終更新日:-0001年11月30日  (初回投稿日:2012年01月26日)

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

使用する要素 <wbr>

「wbr」は「word break」の略だそうです。 ずいぶん前に紹介した<br>(改行させる要素)は「line break 」の略です。
<wbr>は<br>と同様に「終了を表す表記」(</wbr>)は省略できます。

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

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

HTML5から標準仕様のこの<wbr>は、このブログ(XHTML 1.0 Transitional)ではプレビューできないかな?と思いましたが、新しいブラウザは<wbr>要素に対応していて、けっこうOKみたい。プレビューできています。
ただ、Win IE8ではNGでした。IE8の方は、申し訳ないのですが FirefoxChromeSafariをダウンロードして見てみてください。

<wbr>を使ってみよう

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

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

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

<wbr>を指定しないと、枠を突き抜けて全部読めませんね。このサイトの作りでは、右のサイドバーが本文スペースの上にかぶるようになっているので、文字がサイドバーにもぐってしまいます。
(IEのかたはどっちも同じように読めない状態ですよね。申し訳ないのですが、FirefoxChromeSafariをダウンロードして見てください。)

上のサンプルのソースを見てみましょう。

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

日本語の場合、ブラウザは基本的に単語の途中でもどこででも字切りします。1文字単位で切っても大丈夫な言語だから…というか出版界の慣習でしょうか?(句読点が行頭に来ないようになっているので、やはり出版界の慣習でブラウザの仕様を作っているのでしょうね)

英語などの場合は、ブラウザは「半角スペース」が入っている所を改行します。
で、長い単語など、通常なら改行されないけど、そのままじゃ変な(読めない)表示になりそうな時には、ブラウザに対して「改行してもいいよ」と<wbr>要素で示してやるんです。

次回予告

いかがでしたか?

次回は、改行がらみ(?)で、関連のCSSを紹介します。
単語の途中でも強制的に改行する「word-wrap: break-word」です。
今日の<wbr>要素は、ブラウザに「単語を勝手に壊させず、改行していい所を指定」しましたね。
このCSSは、領域の幅に合わせて単語の途中でも切らせる(break-word)という指定です。幅重視。
URLなど、どこで切っても良いモノに使うと便利です。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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