[34] 文字表記の方向を指定する要素 bdo

<bdo>を使うと、横書きの文字の表示方向を指定する事ができます。
普通は左から右へ文字を書きますが、ヘブライ語などは逆ですよね。これらの言語を右から左に表示する事ができるようになります。

使用する要素 <bdo dir="rtl(またはltr)"> 〜 </bdo>

「bdo」は「Bi-Directional Override」の略。直訳すると「双方向オーバーライド」ですかね。

「オーバーライド」とは、プログラミング用語で、上位クラスで定義されたコトを下位クラスで再定義して上書きすること。
この<bdo>は、Unicode(ユニコード=文字表示のコード)の「双方向性アルゴリズム」を上書きします。

「dir属性」を必ず一緒に使います。

<bdo>要素は、表示方向を変える部分をマークアップしますが、単独ではテキストの方向を変えられません。で、必ず「dir属性」を一緒に使います。

使い方はこんなかんじ。

<bdo dir="rtl">〜右から左に表示したいテキスト〜</bdo>
<bdo dir="ltr">〜左から右に表示したいテキスト〜</bdo>

「dir」は「directional」の略です。「方向」ってことですね。
「dir属性」の値は「rtl」と「ltr」です。
「rtl」は「right to left(右から左)」「ltr」は「left to right(左から右)」の略。まんまですね。

<bdo dir="rtl">を使って、右から左に表示してみよう

さっそくサンプルを見てみましょう。

HEBREW(ヘブライ語)は右から左に読みます。

ソースはこちらです。

<p>
<bdo dir="rtl">HEBREW</bdo>(ヘブライ語)は右から左に読みます。
</p>

HTMLソースでは「HEBREW」と書いている部分が、プレビューでは「WERBEH」になっていますね。

じゃあ<bdo dir="ltr">(左から右)って使うの?

デフォルトが左から右なのに「dir="ltr"」って使うのかなあ?(いらねんじゃね?)と思います。
使うとしたら「入れ子方式」かなあ?…と思い、サンプルを作ってみました。

あいうえお0123456789 ──ここだけ左から右へ0123456789── 0123456789かきくけこ

ソースはこちらです。

<p>
<bdo dir="rtl">あいうえお0123456789 <bdo dir="ltr">──ここだけ左から右へ0123456789──</bdo> 0123456789かきくけこ</bdo>
</p>

ヘブライ語などの表示の中に、英語などの表示を挿入するときに使えそうですね。たぶん?

次回予告

いかがでしたか?

次回は、<hr>を紹介します。
これ、大昔からある要素です。もっと前にやるべきだったのですが、HTML5でまだ残っているとは思わなかったんですよ。
HTML5では「内容的な区切りを示す要素」として残っているそうです。
以前は区切り線(罫線)のための要素として使ってましたけどね。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.