HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのstyle.directionプロパティとは？テキスト方向の指定方法を解説

HTML DOMのstyle.directionプロパティは、要素内のテキストの流れる方向（文字方向）を取得・設定するために使用されるプロパティです。デフォルト値は「ltr」となっています。

この記事では、directionプロパティの基本的な使い方から、設定できる値、実際に動作するコード例までをわかりやすく解説します。

directionプロパティの構文

directionプロパティをJavaScriptで設定する場合、以下のような構文を使用します。

object.style.direction = "ltr|rtl|initial|inherit";

設定できる値の一覧

directionプロパティには、以下の4つの値を指定できます。

値説明
ltrデフォルト値。テキストは左から右へ流れます（left to right）。
rtlテキストは右から左へ流れます（right to left）。アラビア語やヘブライ語などの言語で使用されます。
initialこのプロパティを初期値（デフォルト値）に戻します。
inherit親要素のプロパティ値を継承します。

directionプロパティの使用例

ここでは、ボタンをクリックするとspan要素内のテキストの方向が「左から右」から「右から左」に切り替わるサンプルを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    div,span {
        margin: 3px;
        padding: 4px;
    }
    div{
        height: 50px;
        width: 540px;
        border: 2px solid black;
    }
    span {
        float: left;
        width: 500px;
        height:40px;
        background-color: lightblue;
    }
</style>
<script>
    function changeDir(){
        document.getElementById("DIV1").style.direction="rtl";
        document.getElementById("Sample").innerHTML="上記のテキストの方向は現在、右から左になっています";
    }
</script>
</head>
<body>
    <div id="DIV1">
        <span>これはSPAN要素内のテキストです。</span>
    </div>
    <p>下のボタンをクリックすると、span要素内のテキストの方向が変更されます</p>
    <button onclick="changeDir()">テキストの方向を変更</button>
    <p id="Sample"></p>
</body>
</html>

実行結果

ページを表示した直後は、テキストが通常通り左から右へ表示されます。

HTML DOMのstyle.directionプロパティとは？テキスト方向の指定方法を解説

「テキストの方向を変更」ボタンをクリックすると、以下のようにテキストが右から左へ流れるように変化します。

HTML DOMのstyle.directionプロパティとは？テキスト方向の指定方法を解説

まとめ

HTML DOMのstyle.directionプロパティを使うことで、JavaScriptから動的にテキストの表示方向を制御できます。日本語や英語などは標準の「ltr」で問題ありませんが、多言語対応サイトでは「rtl」への切り替えが必要になるケースがあります。ぜひ実際のコードで挙動を確認してみてください。

  1. HTML DOM スタイルの whiteSpace プロパティとは？使い方と設定値を解説

    HTML DOM の style.whiteSpace プロパティは、HTML ドキュメント内の要素テキストにおけるタブ・改行・空白文字の表示方法を取得および設定するために使用されます。テキストの折り返しや空白の扱いを動的に制御したい場合に便利なプロパティです。 構文（シンタックス） whiteSpace プロパティの基本的な構文は以下の通りです。 whiteSpace の値を取得する場合 object.style.whiteSpace whiteSpace の値を変更する場合 object.style.whiteSpace = value 設定できる値 whiteSpace プロパティには、

  2. HTML DOMスタイルのuserSelectプロパティとは？テキスト選択の制御方法を解説

    HTML DOMのuserSelectプロパティは、HTMLドキュメント内で要素のテキストがユーザーによって選択可能かどうかを取得・設定するためのプロパティです。このプロパティを活用することで、Webページ上のテキストのコピーやドラッグによる選択を柔軟に制御できます。構文userSelectプロパティの基本的な構文は以下のとおりです。userSelectの値を取得する場合object.style.userSelectuserSelectの値を設定する場合object.style.userSelect = value;設定できる値valueには以下のいずれかの値を指定できます。値説明autoブラ