主にWindows・ソフトウェア・スマートフォン関連の操作・設定を掲載してます、不定期の更新ですが是非、感想、コメント、評価をお願いします。 ブロとも・相互リンク募集中


HTML 文書のルート ＜html dir="ltr"＞＜/html＞

公開
2022年12月18日(日) 18:05
<html dir=""></html>


html要素に dir="" を追加すると、文書全体の書字方向を指定できます。

<html dir="ltr"></html>


属性
値
グローバル属性
dir="" 書字方向 ltr 左から右へを指定
rtl 右から左へを指定


左から右へ
日本語や英語などの場合は、左から右へ記述するので ltr を指定します。

右から左へ
アラビア語やヘブライ語などの場合は、右から左へ記述するので rtl を指定します。



ブログ有料化の為に
1クリックにご協力お願いします。


dir属性はグローバル属性となるので、
全ての要素に対して指定することができます。

html要素に指定した場合
文書全体の書字方向を指定できます。

その他の要素に指定した場合
文書内の一部分に対して書字方向を指定できます。



使用例


サンプルコード

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>

<title>文書のタイトル</title>

</head>
<body>

<h1>書字方向の指定</h1>

<p>文書全体は「左から右へ」を指定。</p>
<p>これは日本語の文章です。</p>
<p>日本語の文章の中に<q lang="ar" dir="rtl">（ここがアラビア語だと思ってください。）</q>アラビア文を引用する時はこうなります。</p>

</body>
</html>




ビットフライヤーで仮想通貨
登録するなら招待コード【2iwsgrhu】コピペお願いします。



     にほんブログ村 IT技術ブログへ




関連記事


















    (この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

    HTML 文書のルート ＜html lang=""＞～＜/html＞

    公開
    2022年11月21日(月) 14:20
    <html lang="">～</html>

    html要素に lang="" を追加すると、文書全体の
    言語を指定することができます。


    属性
    値
    グローバル属性
    lang="" 記述言語 言語コード 日本語の文書の場合は ja を指定

    他国の言語で作成された文書では、
    その言語に合わせた指定を行います。



    lang属性はグローバル属性となるので、
    全ての要素に対して指定することができます。

    html要素に指定した場合
    文書全体の言語を指定できます。

    その他の要素に指定した場合
    文書内の一部分に対して言語を指定できます。

    メモ
    html要素にはlang属性を指定することが推奨されています。


    使用例


    文書のタイトル

    サンプルコード

    <!DOCTYPE html>

    <html lang="ja">

    <head>


    <title>文書のタイトル</title>


    </head>

    <body>

    <h1>言語コードの指定</h1>

    <p>文書全体は日本語の言語コードを指定。</p>

    <p>これは日本語の文章です。</p>

    <p>日本語の文章の中に<q lang="en">This is a pen.</q>

    英文を引用する時はこうなります。</p>

    </body>

    </html>



    　にほんブログ村 IT技術ブログへ




    関連記事


















      (この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

      HTMLの基本・主な言語コード

      公開
      2022年11月17日(木) 11:15
      主な言語コードの一覧表


      使用する言語コード（言語タグ）の一覧です。

      言語名
      		  言語コード 
      日本語  ja
      英語  en
      アメリカ英語   en-US
      イギリス英語   en-GB
      中国語  zh
      韓国語  ko
      ドイツ語  de
      フランス語  fr
      イタリア語  it
      オランダ語  nl
      ポルトガル語   pt
      スペイン語  es
      ポーランド語  pl
      ギリシャ語  el
      ロシア語  ru
      ヘブライ語  he
      ヒンディー語   hi
      アラビア語  ar
      ラテン語  la
      スワヒリ語  sw


      ブログ有料化の為に
      1クリックにご協力お願いします。


      hreflang属性・srclang属性を持つ要素


      hreflang属性は、以下の要素で指定することができます。

      ★ <a>

      ★ <link>


      また、srclang属性は以下の要素に指定できます。

      ★ <track> 



          にほんブログ村 IT技術ブログへ



      関連記事


















        (この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

        HTML 文書のルート ＜html＞～＜/html＞

        公開
        2022年09月19日(月) 09:21
        <html></html>

        html要素は、HTML文書の最上位に
        位置する要素（ルート要素）です。

        この要素は、DOCTYPE宣言のすぐ後に配置します。

        <!DOCTYPE html>
        <html>
        <head>文書情報</head>
        <body>文書のコンテンツ</body>
        </html>

        html要素にlang属性やdir属性を追加することで、
        文書全体の言語や書字方向を指定することもできます。


        html要素の内容には、head要素とbody要素を1つずつ、
        この順番で配置することになります。

        20220919-090310.jpg


        html要素にはlang属性を指定することが推奨されています。

        旧HTMLからの変更点
        HTML5：version属性が廃止され、manifest属性が追加されました。
        HTML5.1：manifest属性が廃止されました。




        ブログ有料化の為に
        1クリックにご協力お願いします。



        使用例

        サンプル

        ★基本構造

        <!DOCTYPE html>
        <html>
        <head>

        <title>文書のタイトル</title>

        </head>
        <body>

        <p>body要素の内容がブラウザ上に表示されます。</p>

        </body>
        </html>


        ★lang属性を指定した例

        <!DOCTYPE html>
        <html lang="ja">
        <head>

        <title>文書のタイトル</title>

        </head>
        <body>

        <p>body要素の内容がブラウザ上に表示されます。</p>

        </body>
        </html>


        　にほんブログ村 IT技術ブログへ



        関連記事


















          (この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

          HTMLの基本 物理要素・論理要素

          公開
          2022年07月04日(月) 08:56
          タグで囲まれた内容に何らかの意味を持たせる
          要素を「論理要素」、意味を持たず見た目の
          変更だけを目的とした要素を「物理要素」といいます。


          例えば、太字（b要素）と強調（strong要素）を
          比較した場合、一般的なブラウザでは
          どちらも太い文字で表示されますが、

          • 太字（b要素） … 見た目は太字で表示されるが
               意味は持たない［物理要素］

          • 強調（strong要素） … 強調という意味を持ち
               見た目は太字で表示される［論理要素］

          の違いがあります。


          　物理要素と論理要素について

          要素には、その内容に意味を持つ｢論理要素」と、

          意味を持たない｢物理要素」があります。


          ★論理要素

          タグで囲まれた内容に何らかの意味を持たせる要素です。

          例えば、文字の強調（em要素、strong要素）などが

          このタイプの要素になります。


          ★物理要素

          タグで囲まれた内容は意味を持たず、見た目の

          変更だけを目的とした要素です。

          例えば、太字（b要素）やイタリック体（i要素）などが

          このタイプの要素になります。


          　物理要素・論理要素の表示例

          以下のサンプルというテキストは、一般的なブラウザで

          見た場合はどちらも同じように表示されます。


           <h1>サンプル</h1> ［論理要素］

          サンプル

          <font size="6"><b>サンプル</b></font> ［物理要素］

          サンプル

          見た目は同じであっても、論理要素側のサンプルには

          見出しという意味があり、物理要素側のサンプルには

          何の意味もありません。


          　「意味」を持たせることの意味

          「見出」しや「強調」といった「意味」は、利用者の

          ブラウザに伝えられることになります。

          意味的な情報を受け取ったブラウザ側は、

          それらの意味を独自の方法で表現し、

          その内容を利用者に分かりやすく伝えようとします。


          例えば、strong要素（論理要素）の内容は「強調」という

          意味を持ちますが、ブラウザ側はこの「意味」を

          次のように表現することが期待されます。


          一般的なブラウザ … 太字で表示することで、

          その内容が強調されていることを表現します。


          音声ブラウザ … トーンを変えて読み上げることで、

          その内容が強調されていることを表現します。


          タイプの異なるブラウザであっても、「意味」を

          伝えることによりその内容が適切に

          表現されるようになります。

          その結果、様々な環境でその情報が利用しやすくなります。



          　物理要素の一覧と代替の手段

          次の物理要素による表示内容は、

          スタイルシート（CSS）で代替することができます。


          物理要素
          表示例
          CSS
          <b> サンプル font-weight: bold
          <big> サンプル font-size: larger
          <font> サンプル color: #ff0000
          サンプル font-size: 80%
          <i> サンプル font-style: italic
          <s> サンプル text-decoration: line-through
          <small> サンプル font-size: smaller
          <strike> サンプル text-decoration: line-through
          <tt> サンプル font-family: monospace
          <u> サンプル text-decoration: underline


          　にほんブログ村 IT技術ブログへ


          関連記事


















            (この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
            (この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
            検索フォーム

            カウンター



            閲覧者数
            現在の閲覧者数:
            ジャンルランキング
            [ジャンルランキング]
            コンピュータ
            201位
            ジャンルランキングを見る＞＞

            [サブジャンルランキング]
            ウィンドウズ
            54位
            サブジャンルランキングを見る＞＞
            RSSリンクの表示



            カテゴリ
            タグ一覧

             Windows   Windows10   Windows11 

             パソコン   インターネット   HTML 

             自作パソコン   コマンドプロント 

             Microsoft   アプリケーション   iPhone 

             Android   Office2021   Excel 

             Excel2021 

             AfterEffects 

            FC2リンク
          1. 赤髪船長のCUSTOMラベル

            2. ブロとも一覧

            You talkin' to me ? 2nd_新たなる驚異を求めて

            あっきーの雑記ブログ

            LEVEL1 FX-BLOG

            梅月夜の夢物語り

            株式情報市場
            ＱＲコード
            QR
            ブログランキング




            にほんブログ村 スマホ・携帯ブログへ にほんブログ村 スマホ・携帯ブログ iPhoneへ にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ IT技術情報へ にほんブログ村 地域生活（街） 沖縄ブログへ にほんブログ村 地域生活（街） 沖縄ブログ 沖縄市・コザ情報へ

            ブログ王ランキング

            相互リンクとランキングプラス

            PC・ソフトランキング









            ランキング集計結果









            タイムライン

            セキュリティーソフト
            ウイルスバスター公式トレンドマイクロ・オンラインショップ

            ノートンストア

            マカフィー・ストア

            ZERO ウイルスセキュリティ

            ソフトウェア
            Acronis True Image

            サイバーリンク Power2Go 12