【HTML Living Standard】spellcheck属性の使い方
spellcheck属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
spellcheckプロパティは、HTML要素のスペルチェックと文法チェック機能を制御する情報を保持するプロパティです。HTML Living Standardにおいて、このグローバル属性は、ウェブブラウザが提供するスペルチェック機能が、その要素内のテキストコンテンツに対して有効になるか、または無効になるかを指定するために使用されます。
このプロパティには、主に三つの状態を設定できます。一つはtrueで、これは要素のスペルチェックを明示的に有効にすることを指示します。もう一つはfalseで、これはスペルチェック機能を無効にすることを指示します。そして、spellcheck属性自体を要素に指定しない場合、ブラウザはデフォルトの動作（通常は親要素の設定を継承するか、ユーザーエージェントのデフォルトに従う）を適用します。
spellcheckプロパティは、<input type="text">や<textarea>といったテキスト入力が可能なフォーム要素、またはcontenteditable="true"属性が設定された要素など、ユーザーがテキストを入力する可能性のある要素に特に有効です。
システムエンジニアを目指す方にとって、このプロパティはユーザーインターフェースのユーザビリティを向上させる上で重要です。例えば、ユーザーが自由に入力するテキストフィールドではスペルチェックを有効にして入力ミスを減らし、逆にプログラムコードや特定の識別子など、スペルチェックが誤解を招く可能性がある入力欄では無効にすることで、より良いユーザーエクスペリエンスを提供できます。全てのHTML要素に適用可能なグローバル属性であるため、幅広い場面で柔軟に利用できるのが特徴です。
構文(syntax)
1<textarea spellcheck="true"></textarea>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML spellcheck属性でスペルチェックする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML spellcheck属性のサンプル</title> 7</head> 8<body> 9 <h1>スペルチェック属性の例</h1> 10 11 <p>以下のテキスト入力フィールドで、`spellcheck`属性と`lang`属性の動作を確認できます。</p> 12 13 <!-- spellcheck="true" を指定し、英語のスペルチェックを有効にする例 --> 14 <!-- lang="en" により、ブラウザは入力内容を英語としてスペルチェックします --> 15 <label for="englishText">英語のテキスト (スペルチェック有効):</label><br> 16 <textarea id="englishText" rows="4" cols="50" spellcheck="true" lang="en" placeholder="Type some English text with a mistake, e.g., 'hte quick brown fox'."></textarea> 17 <br><br> 18 19 <!-- spellcheck="false" を指定し、スペルチェックを無効にする例 --> 20 <!-- 通常、コードスニペットなどスペルチェックが不要な場合に使用します --> 21 <label for="codeSnippet">コードスニペット (スペルチェック無効):</label><br> 22 <textarea id="codeSnippet" rows="4" cols="50" spellcheck="false" placeholder="例: function myFuntcion() { /* code */ }"></textarea> 23 <br><br> 24 25 <!-- input要素でも spellcheck="true" と lang を組み合わせて使用できます --> 26 <!-- lang="fr" により、ブラウザは入力内容をフランス語としてスペルチェックします --> 27 <label for="frenchWord">フランス語の単語 (スペルチェック有効):</label><br> 28 <input type="text" id="frenchWord" spellcheck="true" lang="fr" placeholder="例: bonjourr"> 29</body> 30</html>
spellcheck属性は、HTMLの要素内で入力されるテキストに対してスペルチェック機能の有効/無効を制御するグローバル属性です。この属性は、ほとんどのHTML要素に適用できる「グローバル属性」の一つで、ユーザーがテキストを入力する際にスペルミスを検出・修正する手助けをします。
値にはtrueまたはfalseを指定します。spellcheck="true"と設定すると、ブラウザはその要素に入力されたテキストに対してスペルチェックを有効にします。一方、spellcheck="false"と設定すると、スペルチェックは無効になります。spellcheck属性は値を指定するだけで動作するため、特別な引数や戻り値はありません。
特に重要なのは、lang属性と組み合わせることで、ブラウザが入力されるテキストの言語を認識し、その言語に応じた適切なスペルチェックを行える点です。サンプルコードでは、textarea要素でspellcheck="true"とlang="en"を組み合わせることで、英語のスペルチェックを有効にしています。これにより、誤った英単語が入力された際にブラウザが誤りを指摘します。また、別のtextareaではspellcheck="false"を指定し、コードスニペットのようにスペルチェックが不要な場合に無効化する例を示しています。さらに、input要素でもspellcheck="true"とlang="fr"を組み合わせることで、フランス語の単語に対してスペルチェックを行う例を確認できます。このように、spellcheck属性はユーザーからのテキスト入力を扱う際に、利便性を高めるために活用される非常に便利な属性です。
spellcheck属性は、ユーザーが入力するテキストのスペルチェックを有効または無効にするグローバル属性です。この属性を使用する際は、lang属性と組み合わせて使用する点に特に注意が必要です。spellcheck="true"とする場合、対象の要素や親要素にlang="en"のように言語コードを指定することで、ブラウザは指定された言語に基づいてスペルチェックを行います。lang属性が適切に設定されていないと、意図した言語でチェックが行われない可能性があります。
また、コードスニペットや固有名詞、専門用語など、スペルチェックが不要な入力フィールドでは、spellcheck="false"を指定して明示的に無効にすることが推奨されます。これにより、不要なエラー表示を避け、ユーザー体験を向上させることができます。この属性は主にinputやtextareaといった、ユーザーがテキストを入力する要素に対して使用します。ブラウザのデフォルト設定やユーザーの環境によって動作が異なる場合がある点も考慮してください。
HTML spellcheck属性の動作確認
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML spellcheck属性の動作サンプル</title> 7 <style> 8 /* 見やすさのための基本的なスタイル */ 9 body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; line-height: 1.6; } 10 h1 { color: #333; } 11 p { margin-bottom: 15px; } 12 div, textarea, input { 13 border: 1px solid #ccc; 14 padding: 10px; 15 margin-bottom: 15px; 16 width: 80%; 17 max-width: 600px; 18 box-sizing: border-box; 19 border-radius: 4px; 20 } 21 textarea { min-height: 80px; resize: vertical; } 22 input[type="text"] { height: 40px; } 23 label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } 24 .explanation { 25 font-size: 0.9em; 26 color: #777; 27 margin-top: -10px; /* 直前の要素との間隔を調整 */ 28 margin-bottom: 20px; 29 padding-left: 5px; 30 } 31 </style> 32</head> 33<body> 34 35 <h1><code>spellcheck</code>属性の動作確認</h1> 36 <p> 37 以下の入力フィールドや編集可能な領域に、意図的にスペルミス（例: "teh" を "the" の代わりに）を入力してみてください。 38 ブラウザやOSの設定によっては、スペルチェックが機能しない場合があります。 39 </p> 40 41 <!-- 編集可能なdiv要素でのspellcheck="true" --> 42 <label for="editable-div-true">編集可能なDIV要素 (spellcheck="true")</label> 43 <div id="editable-div-true" contenteditable="true" spellcheck="true"> 44 これは編集可能なエリアです。ここにタイプミスをてすと入力してください。 45 </div> 46 <div class="explanation"> 47 <code>contenteditable="true"</code> と <code>spellcheck="true"</code> の組み合わせです。 48 通常、スペルミスが強調表示されます。 49 </div> 50 51 <!-- 編集可能なdiv要素でのspellcheck="false" --> 52 <label for="editable-div-false">編集可能なDIV要素 (spellcheck="false")</label> 53 <div id="editable-div-false" contenteditable="true" spellcheck="false"> 54 このエリアではスペルチェックは無効化されています。タイプミスをてすと入力してください。 55 </div> 56 <div class="explanation"> 57 <code>contenteditable="true"</code> ですが、<code>spellcheck="false"</code> のためスペルチェックは働きません。 58 </div> 59 60 <!-- textarea要素でのspellcheck="true" --> 61 <label for="textarea-true">テキストエリア (spellcheck="true")</label> 62 <textarea id="textarea-true" spellcheck="true" rows="4"> 63 これはテキストエリアです。ここにタイプミスをてすと入力してください。 64 </textarea> 65 <div class="explanation"> 66 <code><textarea></code> はデフォルトでスペルチェックが有効なことが多いですが、明示的に <code>spellcheck="true"</code> を指定しています。 67 </div> 68 69 <!-- textarea要素でのspellcheck="false" --> 70 <label for="textarea-false">テキストエリア (spellcheck="false")</label> 71 <textarea id="textarea-false" spellcheck="false" rows="4"> 72 このテキストエリアではスペルチェックは無効化されています。タイプミスをてすと入力してください。 73 </textarea> 74 <div class="explanation"> 75 <code><textarea></code> で <code>spellcheck="false"</code> を指定するとスペルチェックは働きません。 76 </div> 77 78 <!-- input type="text"要素でのspellcheck="true" --> 79 <label for="input-text-true">テキスト入力欄 (spellcheck="true")</label> 80 <input type="text" id="input-text-true" spellcheck="true" value="タイプミスをてすと入力してください。"> 81 <div class="explanation"> 82 <code><input type="text"></code> もデフォルトでスペルチェックが有効なことが多いですが、明示的に <code>spellcheck="true"</code> を指定しています。 83 </div> 84 85 <!-- input type="text"要素でのspellcheck="false" --> 86 <label for="input-text-false">テキスト入力欄 (spellcheck="false")</label> 87 <input type="text" id="input-text-false" spellcheck="false" value="この入力欄ではスペルチェックは無効化されています。"> 88 <div class="explanation"> 89 <code><input type="text"></code> で <code>spellcheck="false"</code> を指定するとスペルチェックは働きません。 90 </div> 91 92 <!-- 読み取り専用のinput要素でのspellcheck="true" --> 93 <label for="readonly-input">読み取り専用のテキスト入力欄 (spellcheck="true"だが無効)</label> 94 <input type="text" id="readonly-input" value="読み取り専用なのでスペルチェックは機能しません。" readonly spellcheck="true"> 95 <div class="explanation"> 96 <code>readonly</code> 属性が指定されている入力要素では、内容を編集できないため、<code>spellcheck="true"</code> 97 が指定されていてもスペルチェック機能は働きません。「<code>spellcheck</code> not working」の一例です。 98 </div> 99 100</body> 101</html>
spellcheck属性は、HTMLのグローバル属性の一つで、テキスト入力フィールドやユーザーが編集可能な要素において、ブラウザのスペルチェックおよび文法チェック機能を有効にするか無効にするかを制御します。この属性は値を持ちませんが、属性名のみを指定した場合やspellcheck="true"と記述した場合はスペルチェックが有効になります。一方、spellcheck="false"と記述すると無効になります。これはHTML要素の動作を制御する属性であり、関数のような引数や戻り値はありません。
サンプルコードでは、contenteditable="true"が設定された<div>要素、<textarea>要素、<input type="text">要素に対し、spellcheck="true"とspellcheck="false"をそれぞれ適用し、スペルチェック機能のON/OFFを確認できます。spellcheck="true"が指定された要素では、タイプミスがブラウザによって自動的に検出・強調表示されることが期待されますが、spellcheck="false"が指定された要素ではスペルチェックは実行されません。
また、spellcheck属性は入力可能な要素で機能しますが、サンプルコードの読み取り専用 (readonly) の<input>要素のように、内容を編集できない要素に対してはspellcheck="true"と指定してもスペルチェックは動作しません。これはspellcheckが機能しない一般的な例の一つです。ブラウザやOSの言語設定によっては、意図した通りにスペルチェックが機能しない場合がある点にも注意が必要です。
spellcheck属性は、ユーザーがテキストを入力する要素（<textarea>、<input type="text">、contenteditable="true"を持つ要素など）で、スペルチェック機能の有効・無効を制御するものです。spellcheck="true"で有効、spellcheck="false"で無効に設定できます。
ただし、ブラウザやOSのシステム設定でスペルチェック機能が無効になっている場合、たとえspellcheck="true"を指定しても機能しないことがあります。また、readonly属性が設定された入力欄のように、ユーザーが内容を編集できない要素では、この属性は効果がありません。これらは「spellcheck not working」となる主な原因です。プログラミングコード入力欄など、スペルチェックが不要で煩わしいと感じる場面ではspellcheck="false"を指定すると、ユーザー体験が向上します。