HTML および CSS の面接でよくある質問と回答

1.セマンティック要素と空の HTML 要素を理解する

セマンティック HTML 要素は、Web ページの構造と SEO を強化します。 これらはコンテンツに意味を与え、ブラウザーの解釈とコードの可読性の両方を向上させます。 例には、<header></header>、<footer></footer>、<article></article>、<section></section>、<nav></nav>、<aside></aside>、および <main></main> が含まれます。

空の要素 (void 要素とも呼ばれる) には、開始タグと終了タグの間にコンテンツが含まれません。 ページ レイアウトを効率的に制御します。 例には、<img alt="HTML および CSS の面接でよくある質問と回答" >、<br>、<hr>、<meta>、<link>、および <source></source> が含まれます。

2. HTML の div と span の比較

<div> 要素はブロックレベルの要素で、Web ページのレイアウト内に個別のブロックまたはセクションを作成します。これはページ構造の基礎であり、多くの場合、段落、画像、その他の要素が含まれます。 CSS を使用してスタイル設定されることもよくあります。 <p><code><span></span> 要素はインライン要素で、行内のテキストの特定の部分のスタイルを設定するために使用されます。 <div> とは異なり、改行は作成されません。これは主に、フォントや色の変更など、テキストの一部にスタイルを適用するために CSS とともに使用されます。 <p><strong>3. HTML フォームでの GET と POST</strong></p> <p>GET メソッドと POST メソッドはどちらもデータをサーバーに送信します。 GET は URL にデータを追加するため、データ サイズ (通常は 2048 文字) が制限され、機密情報が公開される可能性があります。 多くの場合、ブラウザとサーバーは GET リクエストをキャッシュします。</p> <p>POST は URL とは別にデータを送信し、特にログイン資格情報などの機密データのセキュリティを強化します。 各 POST 送信では固有の URL が作成され、ブックマークが防止されます。</p> <p><strong>4.ローカル ストレージとセッション ストレージ</strong></p> <p>ローカル ストレージでは、ブラウザを閉じて再度開いた後でも、ユーザーのブラウザにデータが保持されます。 これは、Web サイトのドメインに固有のキーと値のペアとして保存されます。</p> <p>セッション ストレージも似ていますが、一時的なものです。データはブラウザのタブまたはウィンドウを閉じるとクリアされます。 これはドメイン固有でもあります。</p> <p><strong>5. CSS</strong></p> の Z-index プロパティ <p><code>z-index プロパティは、重複する HTML 要素の積み重ね順序を制御します。 より高い z-index 値を持つ要素は、より低い値を持つ要素の上に表示されます。 これは、複雑な Web デザインでの視覚的な階層化を管理するために非常に重要です。

6. CSS 読み込みの最適化

次の方法で CSS 読み込みを最適化します:

• 重要な CSS を セクションに配置します。
• CSS ファイルを縮小および圧縮してサイズを削減します。
• 大きな CSS ファイルを小さくて管理しやすいモジュールに分割し、重要ではないスタイルシートを遅延読み込みします。

7. CSS ボックス モデル

CSS ボックス モデルは、ページ上で要素がどのようにレンダリングされるかを定義する基本的な概念です。 各要素は、コンテンツ (要素の実際のコンテンツ)、パディング (コンテンツと境界線の間のスペース)、ボーダー (要素の境界線)、およびマージン (要素の境界線と他の要素の間のスペース) の 4 つの主要コンポーネントを持つ長方形のボックスとして扱われます。 。 これらのプロパティは、要素のサイズと間隔を制御します。

8. CSS 疑似クラスと疑似要素

疑似クラスは、要素の状態に基づいてセレクターを変更します (例: :hover、:active、:visited、:focus)。 これらは、疑似クラス名の前にコロン (:) を使用してセレクターに追加されます。

疑似要素は、追加の HTML を必要とせずに、要素の特定の部分をスタイルします (例: ::before、::after)。 擬似要素名の前に二重コロン (::) を使用します。

9. CSS スプライト

CSS スプライトは、複数の画像を 1 つの画像ファイルに結合します。 これにより、HTTP リクエストの数が減り、ページの読み込み時間とパフォーマンスが向上します。 次に、CSS background-position を使用して個々の画像が選択され、スプライトの正しい部分が表示されます。

10. CSS メディア クエリ

メディア クエリを使用すると、開発者はデバイスの特性 (画面サイズ、方向、解像度など) に基づいてさまざまなスタイルを適用できます。これにより、レスポンシブ Web デザインが可能になり、Web サイトのレイアウトと外観をさまざまな画面サイズやデバイスに適応させることができます。