HTMLのlang属性を使って多言語コンテンツを追加する方法
HTMLのlang属性を使用すると、英語以外の言語で書かれたコンテンツを正しく指定できます。lang属性は、ブラウザやスクリーンリーダー、検索エンジンに対して「この部分はどの言語で記述されているか」を伝える重要な役割を果たします。多言語対応のWebサイトを作成する際には欠かせない属性です。
実装例
以下のコードでは、英語に加えてフランス語とスペイン語のコンテンツもlang属性を使って追加しています。実際にコードを実行して、その動作を確認してみてください。
<!DOCTYPE html> <html> <body> <h2>English</h2> <p lang="en">This is demo text</p> <h2>French</h2> <p lang="fr">Ceci est un texte de démonstration</p> <h2>Spanish</h2> <p lang="es">Este es un texto de demostración</p> </body> </html>
lang属性のポイント
lang属性の値には、ISO 639-1で定義された言語コードを指定します。主な言語コードの例は以下の通りです。
- 日本語：
ja - 英語：
en - フランス語：
fr - スペイン語：
es
各要素に適切な言語コードを設定することで、音声読み上げソフトによる正確な読み上げや、検索エンジンによる言語判定が可能になり、アクセシビリティとSEOの両面で効果が期待できます。
-
HTMLとCSSでフローティングレイアウトを作成する方法をわかりやすく解説
フローティングレイアウトとはHTMLでフローティングレイアウトを作成するには、CSSのFloat（フロート）プロパティを使用します。Webサイトでは、コンテンツを見やすく表示するために複数のカラム（段組み）構成がよく採用されますが、CSS Floatはそのマルチカラムレイアウトを実現する手法のひとつです。フローティングレイアウトは、Webサイトのレイアウト設計で古くから広く使われている定番の手法です。要素にfloat: left;やfloat: right;を指定することで、要素を左右に寄せ、その横に他の要素を回り込ませることができます。以下は、ヘッダー・ナビゲーション・本文・フッターで構成さ
-
HTML Webページにオーディオプレーヤーを追加する方法
HTMLでのオーディオ再生の基本Webページに音声を埋め込むには、HTMLの<audio>要素を使用します。この要素にcontrols属性を追加すると、再生・一時停止・音量調整などができるオーディオプレーヤーがブラウザ上に表示されます。対応している音声フォーマットHTMLの<audio>要素でサポートされている主な音声フォーマットは以下の3つです。MP3（audio/mpeg）― 最も広く使われている形式で、ほぼすべてのブラウザで再生可能Wav（audio/wav）― 非圧縮の高音質形式だが、ファイルサイズが大きくなりがちOgg（audio/ogg）― オープンソースの