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

JavaScriptでテキストの方向（direction）を設定する方法

JavaScriptでテキストの表示方向を設定するには、directionプロパティを使用します。このプロパティに「rtl」を指定すると右から左へ（Right-to-Left）、「ltr」を指定すると左から右へ（Left-to-Right）のテキスト方向になります。

directionプロパティで使える主な値

  • ltr：左から右へテキストを表示します（日本語や英語などの標準的な方向）
  • rtl：右から左へテキストを表示します（アラビア語やヘブライ語などで使用）
  • inherit：親要素から方向の設定を引き継ぎます

サンプルコード

以下のコードを実行すると、ボタンをクリックしたときに見出し（h1要素）のテキスト方向を変更できます。ここでは、クリック時にdirectionプロパティへ「rtl」を設定し、見出しが右から左に表示されるようにしています。

<!DOCTYPE html>
<html>
    <body>
        <h1 id="myID">Heading 1</h1>
        <p>下のボタンをクリックすると、見出しの方向が右から左（rtl）に変わります</p>
        <button type="button" onclick="display()">クリックして方向を変更</button>
        <script>
            function display() {
                document.getElementById("myID").style.direction = "rtl";
            }
        </script>
    </body>
</html>

ポイント解説

上記の例では、document.getElementById()で対象の要素を取得し、そのstyle.directionプロパティに値を代入することで、動的にテキスト方向を切り替えています。この方法は、多言語対応サイトなどでアラビア語のように右から左へ読む言語のコンテンツを表示したい場合に特に便利です。

  1. CSSのdirectionプロパティでテキストの表示方向を設定する方法

    directionプロパティとは CSSのdirectionプロパティは、テキストや要素内コンテンツの表示方向を指定するために使用します。設定できる値は、左から右へ流れる「ltr」（left to right）と、右から左へ流れる「rtl」（right to left）の2種類です。 日本語や英語などは通常「ltr」が使われますが、アラビア語やヘブライ語のように右から左へ読む言語では「rtl」を指定します。このプロパティは親要素から子要素へ継承されるため、bodyなどの上位要素に一度指定しておけば、ページ全体に反映させることも可能です。 directionプロパティで指定できる主な値 ltr

  2. JavaScriptでテキストをクリップボードにコピーする方法【サンプルコード付きで解説】

    JavaScriptでテキストをクリップボードにコピーするには？ Webアプリや管理画面などで、「コピー」ボタンをワンクリックするだけでテキストをクリップボードにコピーできれば、ユーザー体験は大きく向上します。JavaScriptを使えば、この機能はごくシンプルなコードで実装できます。 本記事では、document.execCommand(copy) を使った定番の実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 サンプルコード 以下は、入力フィールド内のテキストをボタン一つでクリップボードにコピーする完全なHTMLの例です。 <!DOCTYPE html>