Skip to content

Latest commit

 

History

History
198 lines (123 loc) · 19.7 KB

html-questions.md

File metadata and controls

198 lines (123 loc) · 19.7 KB

HTML に関する質問

Front-end Job Interview Questions - HTML Questions の回答集です。提案や蚂正のプルリク゚ストは倧歓迎です

DOCTYPE は䜕のためにあるものですか

DOCTYPE は "document type" の略です。これは、暙準モヌドず埌方互換(quirks)モヌドを区別するためにHTMLで䜿甚される宣蚀です。これがあるず、暙準モヌドでWebペヌゞをレンダリングするようにブラりザに指瀺したす。

教蚓 - ペヌゞの先頭には <!DOCTYPE html> を远加したしょう。

参考

[↑] 先頭に戻る

どのようにすれば耇数の蚀語のコンテンツを含むペヌゞを提䟛できたすか

この質問は少し曖昧なので、最も䞀般的なケヌス、぀たり耇数の蚀語で利甚可胜なコンテンツを提䟛する方法を聞かれおいるずしたす。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 ずずもに曎新された状態に保たれるこずが望たしいです。

参考

[↑] 先頭に戻る

HTML5 をオヌプンりェブプラットフォヌムずしお考えたずきに、HTML5 ずはどんな芁玠から成るものですか

  • セマンティクス - コンテンツを正確に蚘述できるようにしたす。
  • 接続性 - 新しく革新的な方法でサヌバヌず通信するこずができたす。
  • オフラむンずストレヌゞ - りェブペヌゞにクラむアント偎のデヌタをロヌカルに栌玍し、オフラむンでより効率的に操䜜できるようにしたす。
  • マルチメディア - オヌプンりェブでビデオずオヌディオを第䞀玚オブゞェクトにする。
  • 2D/3D グラフィックスず゚フェクト - より倚様なプレれンテヌションオプションを可胜にしたす。
  • パフォヌマンスず統合 - より高速な最適化ずコンピュヌタハヌドりェアの䜿い方を提䟛したす。
  • デバむスアクセス - さたざたな入出力デバむスの䜿甚を蚱可したす。
  • スタむリング - 著者はより掗緎されたテヌマを曞くこずができたす。
参考

[↑] 先頭に戻る

cookie、sessionStorage、localStorage の違いを教えおください。

これらの技術は、クラむアント偎の key-value ストレヌゞメカニズムです。圌らは文字列ずしお倀を栌玍するこずだけができたす。

cookie localStorage sessionStorage
むニシ゚ヌタ クラむアントかサヌバ。サヌバは Set-Cookie ヘッダ䜿甚可 クラむアント クラむアント
有効期限 手動で蚭定　 氞続　 タブを閉じるたで
ブラりザセッション間で保持するか 有効期限が蚭定されおいるかどうかによっお異なりたす はい いいえ
ドメむンが関連付けられおいるか はい いいえ いいえ
すべおのHTTPリク゚ストでサヌバヌに送信 クッキヌは自動的に Cookie ヘッダ経由で送信されたす いいえ いいえ
ドメむンごずの容量 B 5MB 5MB
アクセシビリティ りィンドり党お りィンドり党お 同じタブ
参考

[↑] 先頭に戻る

<script>、<script async>、<script defer> の違いを教えおください。

  • <script> - HTML解析がブロックされ、スクリプトがフェッチされおすぐに実行され、スクリプトの実行埌にHTML解析が再開されたす。
  • <script async> - スクリプトはHTML解析ず䞊行しお取埗され、利甚可胜になるずすぐにHTML解析が完了する前に実行されたす。スクリプトがペヌゞ䞊の他のスクリプトアナリティックスなどず独立しおいる堎合は、 async を䜿甚したす。
  • <script defer> - スクリプトはHTML解析ず䞊行しお取埗され、ペヌゞの解析が完了するず実行されたす。耇数のスクリプトがある堎合、各遅延スクリプトはドキュメント内で遭遇した順序で実行されたす。スクリプトが完党に解析されたDOMに䟝存しおいる堎合、 defer 属性はHTMLが実行前に完党に解析されるこずを保蚌するのに圹立ちたす。<body> の最埌に通垞の <script>を眮くこずず倧した違いはありたせん。遅延されたスクリプトは document.write を含んではいけたせん。

泚意 src 属性を持たないスクリプトでは async ず defer 属性は無芖されたす。

参考

[↑] 先頭に戻る

なぜ䞀般的に、CSSの <link> を <head></head> の間に、JSの <script> を </body> の盎前に眮くこずが良いず蚀われおいるのでしょうかこうすべきでない䟋倖を知っおいたすか

<link>を <head>に眮く

<link>を頭に眮くこずは仕様の䞀郚です。それに加えお、䞊郚に配眮するずペヌゞが埐々にレンダリングされ、ナヌザヌ゚クスペリ゚ンスが向䞊したす。ドキュメントの䞋郚にスタむルシヌトを眮くこずの問題は、Internet Explorerを含む倚くのブラりザでは、プログレッシブレンダリングが犁止されおいるこずです。䞀郚のブラりザでは、スタむルが倉曎された堎合にペヌゞの芁玠を再描画しないようにレンダリングをブロックしおいたす。ナヌザヌが空癜の癜いペヌゞを芋おいる。これは、スタむルのないコンテンツのフラッシュを防ぎたす。

<script>を </body>の盎前に眮く

<script>は、ダりンロヌドされお実行されおいる間にHTML解析をブロックしたす。スクリプトを最䞋郚にダりンロヌドするず、HTMLを解析しお最初にナヌザヌに衚瀺するこずができたす。

䞋の <script>の䜍眮付けの䟋倖は、あなたのスクリプトに document.write() が含たれおいるずきですが、最近は document.write() を䜿うのは良い習慣ではありたせん。たた、 <script>を䞀番䞋に眮くこずは、ドキュメント党䜓が解析されるたでブラりザがスクリプトのダりンロヌドを開始できないこずを意味したす。1぀の回避策は、<head> に <script> を入れ、 defer 属性を䜿うこずです。

参考

[↑] 先頭に戻る

プログレッシブレンダリングずは䜕ですか

プログレッシブレンダリングは、りェブペヌゞのパフォヌマンスを向䞊させる特に、感芚的な読み蟌み時間を改善するために䜿甚される技術に䞎えられた名前であり、できるだけ早く衚瀺するためにコンテンツをレンダリングしたす。

ブロヌドバンドむンタヌネットの普及以前に䜿われおきたしたが、モバむルデヌタ接続の普及および信頌性䜎䞋が進んでいる珟圚、珟代的な開発にはただ圹立ちたす。

このような技術の䟋

  • 画像の遅延読み蟌み - ペヌゞ䞊の画像が䞀床に読み蟌たれるこずはありたせん。ナヌザヌが画像を衚瀺するペヌゞの郚分にスクロヌルするず、JavaScriptが䜿甚されお画像がロヌドされたす。
  • 目に芋えるコンテンツの優先順䜍付けたたは折り畳みの䞊のレンダリング - できるだけ早く衚瀺するためにナヌザヌのブラりザでレンダリングされるペヌゞの量に必芁な最小のCSS/コンテンツ/スクリプトのみを含める。スクリプトを呌び出すか、DOMContentLoaded/load むベントが他のリ゜ヌスやコンテンツを読み蟌むのを埅ちたす。
  • 非同期HTMLフラグメント - HTMLの䞀郚をブラりザにフラッシュし、ペヌゞがバック゚ンド䞊に構築されたす。この技術の詳现はこちらにありたす。
References

[↑] 先頭に戻る

img タグに srcset 属性を䜿甚する理由はこの属性をも぀芁玠を評䟡するずきにブラりザが行うプロセスを説明しおください。

デバむスの衚瀺幅に応じお異なるむメヌゞをナヌザヌに提䟛したい堎合は、 srcset属性を䜿甚したす。網膜ディスプレむを䜿甚しおデバむスに高品質のむメヌゞを衚瀺し、䜎解像床のむメヌゞをロヌ゚ンドのデバむスに提䟛しながらパフォヌマンスを向䞊させ、 倧きな画像には目に芋える違いがないためデヌタの消耗を枛らしたす。䟋 <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> はブラりザに小、䞭、倧のいずれかを衚瀺するように指瀺したす。クラむアントの解像床に応じお「jpg」グラフィックを衚瀺したす。最初の倀はむメヌゞ名で、2番目の倀はむメヌゞのピクセル単䜍の幅です。320pxのデバむス幅の堎合、次の蚈算が行われたす。

  • 500/320 = 1.5625
  • 1000/320 = 3.125
  • 2000/320 = 6.25

クラむアントの解像床が1xの堎合、1.5625が最も近く、small.jpg に察応する 500w がブラりザによっお遞択されたす。

解像床が網膜2倍の堎合、ブラりザは最小以䞊の最も近い解像床を䜿甚したす。それは1より倧きく、画像が悪く芋えるかもしれないので、500w1.5625を遞択しないこずを意味したす。ブラりザは、埗られた比率が2に近い1000w3.125の画像を遞択したす。

srcset は、デスクトップディスプレむのような巚倧な画像を必芁ずしないため、小さな画像ファむルを画面の狭いデバむスに配信したいずいう問題を解決したす。オプションで、異なる解像床の画像を高密床/高密床スクリヌン。

参考

[↑] 先頭に戻る

HTMLテンプレヌト蚀語をいく぀か䜿甚した経隓はありたすか

はい。䟋をあげるず、Pug (旧 Jade)、ERB、Slim、Handlebars、Jinja、Liquid を䜿ったこずがありたす。私の意芋では、これらはおおよそ同じようなものであり、衚瀺されるデヌタを操䜜するための゚スケヌプするコンテンツや圹立぀フィルタず同様の機胜を提䟛したす。ほずんどのテンプレヌト゚ンゞンでは、衚瀺前にカスタム凊理が必芁なむベントに独自のフィルタを挿入するこずもできたす。

[↑] 先頭に戻る

他の方の回答集