style / title / lang

対応:		HTML 4（1997）

『style』『title』『lang』はほぼすべてのHTML要素に指定できるグローバル属性です。『style』はインラインCSSの適用、『title』はツールチップの表示、『lang』は要素内のテキストの言語指定に使用します。

構文

<!-- インラインスタイルの指定 -->
<p style="color: red; font-size: 1.2rem;">赤いテキストです。</p>

<!-- ツールチップの指定 -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- 言語の指定 -->
<p lang="en">This paragraph is written in English.</p>

属性一覧

属性	概要
style	要素にインラインでCSSスタイルを適用します。CSSプロパティをセミコロン区切りで記述します。
title	要素のタイトルや追加情報を指定します。多くのブラウザでマウスオーバー時にツールチップとして表示されます。
lang	要素内のテキストの言語を指定します。BCP47の言語コードを使用します（例：『ja』『en』『zh』）。

サンプルコード

sample_style_title_lang.html

<!-- styleでインラインCSSを適用 -->
<p style="color: #e74c3c; font-weight: bold;">重要な注意事項</p>

<!-- titleでツールチップを表示 -->
<p>
  略語には<abbr title="HyperText Markup Language">HTML</abbr>のように
  <code title="abbreviation（略語）の略">abbr</code>タグと
  title属性を使います。
</p>

<!-- 段落ごとに言語を指定 -->
<p lang="ja">日本語のテキストです。</p>
<p lang="en">This is English text.</p>

<!-- imgのtitleはツールチップとして機能します -->
<img src="photo.jpg" alt="風景写真" title="北海道の雪景色（2024年1月撮影）">

実行結果

『style』を指定した段落は赤色の太字で表示されます。『title』を指定した要素にマウスを乗せると、指定したテキストがツールチップとして表示されます。『lang』はブラウザやスクリーンリーダーに言語情報を伝えますが、見た目には影響しません。

サンプルページはこちら

概要

『style』属性はすばやくスタイルを確認したいときや、JavaScriptで動的にスタイルを変更する場合には便利ですが、HTMLに直接スタイルを書くインラインスタイルは保守性が下がるため、通常は外部CSSファイルかスタイルタグを使うことをおすすめします。

『title』属性はすべての要素に指定できますが、主に略語（『<abbr>』）の展開表示や、リンクの補足説明として使われます。スマートフォンなどのタッチデバイスではツールチップが表示されないため、重要な情報は『title』のみに頼らず本文中に含めるようにしましょう。

『lang』属性は通常、ページ全体の言語を指定する際に『<html>』タグに記述しますが、ページ内に複数の言語が混在する場合は各要素に個別に指定することもできます。スクリーンリーダーは『lang』属性を見て正しい言語で読み上げを行うため、アクセシビリティの観点でも重要な属性です。

JavaScriptでstyle・title・langを動的に操作する

var el = document.getElementById("box");

// style属性を個別に変更する
el.style.color = "red";
el.style.fontSize = "1.5rem";   // font-size はキャメルケースで指定
el.style.backgroundColor = "#f0f0f0";

// style属性を一括で設定する（既存のスタイルは上書きされる）
el.style.cssText = "color: red; font-size: 1.5rem; margin: 0;";

// style属性を削除して元に戻す
el.style.color = "";  // 空文字でリセット

// title属性を動的に変更する（ローディング状態を示す例）
var btn = document.getElementById("save-btn");
btn.setAttribute("title", "保存中...");
// 完了後
btn.setAttribute("title", "保存する");

// lang属性を変更する
document.documentElement.lang = "en";  // htmlタグのlang属性を変更

その他の重要なグローバル属性

『style』『title』『lang』以外にも、ほぼすべてのHTML要素に指定できるグローバル属性があります。

属性	概要
id	要素の一意な識別子を指定します。
class	要素のクラス名を指定します（スペース区切りで複数可）。
hidden	要素を非表示にします。`display: none` と同等です。
tabindex	Tab キーのフォーカス順序を指定します。『-1』でフォーカスを無効化、数値でフォーカス順を制御します。
draggable	要素をドラッグ可能にします。Drag and Drop APIと連携します。
contenteditable	要素の内容をユーザーが直接編集できるようにします。
data-*	カスタムデータ属性。任意のデータをHTML要素に持たせてJavaScriptから参照できます。
dir	テキストの書字方向を指定します。『ltr』（左から右）・『rtl』（右から左）・『auto』があります。

<!-- contenteditable: クリックして直接編集できるメモ欄 -->
<div contenteditable="true" style="border: 1px solid #ccc; padding: 8px;">
  ここをクリックして編集できます
</div>

<!-- data-*属性: ボタンにデータを持たせてJSから参照する -->
<button data-user-id="42" data-action="delete">削除</button>
<script>
  var btn = document.querySelector('[data-action="delete"]');
  btn.addEventListener("click", function() {
    var userId = this.dataset.userId;  // "42"
    console.log("ユーザー " + userId + " を削除します");
  });
</script>

<!-- dir属性: アラビア語などの右から左に書く言語に対応 -->
<p dir="rtl" lang="ar">مرحبا</p>