HTML に関する質問
Front-end Job Interview Questions - HTML Questions の回答集です。提案や訂正のプルリクエストは大歓迎です!
DOCTYPE
は何のためにあるものですか?- どのようにすれば複数の言語のコンテンツを含むページを提供できますか?
- 多言語サイトを設計・開発する際には、どんなことに注意を払わなければならないですか?
data-
属性は何のために使われるのですか?- HTML5 をオープンウェブプラットフォームとして考えたときに、HTML5 とはどんな要素から成るものですか?
cookie
、sessionStorage
、localStorage
の違いを教えてください。<script>
、<script async>
、<script defer>
の違いを教えてください。- なぜ一般的に、CSS の
<link>
を<head></head>
の間に、JS の<script>
を</body>
の直前に置くことが良いと言われているのでしょうか?こうすべきでない例外を知っていますか? - プログレッシブレンダリングとは何ですか?
- img タグに
srcset
属性を使用する理由は?この属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください。 - HTML テンプレート言語をいくつか使用した経験はありますか?
- 他の方の回答集
DOCTYPE
は何のためにあるものですか?
DOCTYPE
は "document type" の略です。これは、標準モードと後方互換(quirks)モードを区別するために HTML で使用される宣言です。これがあると、標準モードで Web ページをレンダリングするようにブラウザに指示します。
教訓 - ページの先頭には <!DOCTYPE html>
を追加しましょう。
参考
- https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
- https://www.w3.org/QA/Tips/Doctype
- https://quirks.spec.whatwg.org/#history
どのようにすれば複数の言語のコンテンツを含むページを提供できますか?
この質問は少し曖昧なので、最も一般的なケース、つまり複数の言語で利用可能なコンテンツを提供する方法を聞かれているとします。1 つのページ内のコンテンツは 1 つの言語でのみ表示されるべきです。
HTTP リクエストがサーバに対して行われるとき、リクエストしているユーザエージェントは通常 Accept-Language
ヘッダのような言語設定に関する情報を送信します。サーバーはこの情報を使用して適切な言語のバージョンで文書を返すことができます。返された HTML 文書においても <html lang="ja">...</html>
のような <html>
タグで lang
属性を宣言するべきです。
バックエンドでは、HTML マークアップには YML 形式または JSON 形式で格納された各言語の i18n
プレースホルダとコンテンツを含めることができます。サーバーは通常、バックエンドフレームワークの助けを借りて各言語のコンテンツを含む HTML ページを動的に生成します。
参考
多言語サイトを設計・開発する際には、どんなことに注意を払わなけれ ばならないですか?
- HTML に
lang
属性を使います。 - ユーザーを母国語に誘導する - ユーザーが困難なく、国/言語を簡単に変更できるようにします。
- 画像によるテキストを使用することはスケーラブルな方法ではない - 確かに画像にテキストを配置することは、システムに無い見栄えの良いフォントをあらゆるコンピュータに表示させるための一般的な方法です。しかし、画像によるテキストを翻訳するにはテキストごとに各言語用の別々の画像が必要になります。このような画像の変換はほんの少しならいいものの、増えてくるとすぐに管理できなくなってしまいます。
- 制限的な言葉/文章の長さ - 別の言語で書くとコンテンツの長さが変わるので、デザインのレイアウトやオーバーフローの問題に注意します。テキスト量でデザインを決めるのは避けるべきです。文字数は、見出し、ラベル、ボタンなどのものがあります。それらは、本文やコメントなど自由に流れるテキストの問題ではありません。
- 色がどのように認識されているかに注意します。色は言語や文化によって違って見えます。デザインは適切に色を使用する必要があります。
- 日付と通貨の書式設定 - カレンダーの日付が異なる方法で表示されることがあります。 例えば。米国の "May 31, 2012" とヨーロッパの "31 May 2012" です。
- 翻訳された文字列を連結しない -
"今日の日付は" + date
のことです。異なる言語で単語の順序は変化するのです。かわりに各言語のパラメータ置換を伴うテンプレート文字列を使用します。たとえば、次の 2 つの文章をそれぞれ日本語と英語で見てみましょう:私は{% date %}に旅行します
とI will travel on {% date %}
です。変数の位置は、言語の文法規則によって異なることに注意する必要があります。 - 言語の読む方向 - 英語では、左から右、上から下へ向かって読みますが、日本語では伝統的に、上から下へ、右から左へ向かって読みます。
参考
data-
属性は何のために使われるのですか?
JavaScript フレームワークが普及する前に、フロントエンドの開発者は、非標準属性、DOM の余分なプロパティなどの他のハッキングなしで、DOM 内に余分なデー タを格納する data-
属性を使用しました。カスタムデータをページやアプリケーションに格納する際に、適切な属性や要素が存在しない時のために利用するものです。
しかし近頃は data-
属性を使うことは推奨されていません。その理由の 1 つは、ユーザーがブラウザの「検証」を使用してデータ属性を簡単に変更できることです。データモデルは JavaScript 自体の中に保存されるのが良く、ライブラリやフレームワークによるデータバインディングによって DOM とともに更新された状態に保たれることが望ましいです。
参考
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
HTML5 をオープンウェブプラットフォームとして考えたときに、HTML5 とはどんな要素から成るものですか?
- セマンティクス - コンテンツを正確に記述できるようにします。
- 接続性 - 新しく革新的な方法でサーバーと通信することができます。
- オフラインとストレージ - ウェブページにクライアント側のデータをローカルに格納し、オフラインでより効率的に操作できるようにします。
- マルチメディア - オープンウェブでビデオとオーディオを第一級オブジェクトにする。
- 2D/3D グラフィックスとエフェクト - より多様なプレゼンテーションオプションを可能にします。
- パフォーマンスと統合 - より高速な最適化とコンピュータハードウェアの使い方を提供します。
- デバイスアクセス - さまざまな入出力デバイスの使用を許可します。
- スタイリング - 製作者はより洗練されたテーマを書くことができます。
参考
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 (英語)
- https://developer.mozilla.org/ja/docs/Web/HTML/HTML5 (日本語)