CSS フラッシュカード

カテゴリースポンサー

CSS（Cascading Style Sheets）は、Håkon Wium Lieによって作成されたスタイルシート言語で、マークアップ言語で書かれたドキュメントの外観とフォーマットを記述するために使用されます。これは、World Wide Webの重要な技術であり、ドキュメントの構造からプレゼンテーションを分離するように設計されています。CSSは柔軟性と強力なスタイリング能力を特徴とし、ページ要素のレイアウト、色、フォント、およびアニメーションの正確な制御を可能にします。この言語は、開発者が反応的で視覚的に魅力的なインターフェースを作成するためのツールを提供する高度なセレクタとプロパティを提供します。CSSはまた、スタイルのモジュール性と再利用可能性をサポートし、パフォーマンスを維持し、異なるブラウザーおよびデバイス間で一貫したデザインの作成を可能にします。

当社のフラッシュカードアプリには、CSSの知識が必要な面接に効果的に対応するための、厳選されたCSS面接問題とその詳細な回答が含まれています。IT Flashcardsは求職者のためのツールだけでなく、現在のキャリアプランに関係なく、知識を強化しテストするための優れた方法です。アプリを定期的に使用することで、最新のCSSのトレンドに常に追いつき、スキルを高いレベルで維持することができます。

アプリからのCSSフラッシュカードのサンプル

App Store または Google Play から当社のアプリをダウンロードして、さらに多くの無料のフラッシュカードを入手するか、すべてのフラッシュカードにアクセスするために購読してください。

CSSでクラスとIDの違いは何ですか？

クラスと識別子は、特定のHTML要素にスタイルを適用するためのCSSツールです。これらの選択方法はほぼ同一ですが、いくつかの違いがあります。

1. 一意性：クラスは非一意的であり、同じクラスを多くの異なる要素で使用することができます。一方、識別子はページ上で一意的であり、各識別子をページごとに一度しか使用できません。

2. 特異性：識別子はクラスに比べてより具体的です。これは、スタイルが競合している場合、識別子のスタイルがクラスのスタイルを上書きすることを意味します。

3. JavaScriptの適用：識別子はよくJavaScriptを使用してHTML要素を操作するために使用され、クラスはこの目的であまり使用されません。

4. スケーラビリティ：クラススタイルはページ上の多くの要素に再利用することができます。識別子は柔軟性が低く、非常に特定のセクションをスタイリングするために使われる可能性が高いです。

CSSスタイルにはクラスを、JavaScriptには識別子を使用するのがベストプラクティスの一つであることに注意してください。

CSSスタイルシートはどのようにHTMLドキュメントにリンクできますか？

CSSスタイルシートは以下の方法のいずれかでHTMLドキュメントに付けることができます：

1. **インラインスタイル：** `style`属性を使用して、スタイルをHTML要素に直接付ける。例えば:

<p style="color:red;">このテキストは赤色です</p>

この方法はあまり使用されず、一度限りのスタイルの変更に使われます。

2. **内部CSS：** スタイルはHTMLドキュメントの`<head>`セクション内の`<style>`タグ内に含まれます。例:

<head>
     <style>
       p { color: red; }
     </style>
   </head>

この方法は単一ページのHTMLドキュメントに便利です。

3. **外部CSS：** CSSを付ける最も一般的に使用される方法。CSSシートは別のファイル（通常は.css拡張子）に書かれ、`<head>`セクション内のリンクを使ってHTMLドキュメントに付ける。例:

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>

この方法が最も一般的に使用される理由は、スタイルシートを容易に更新、維持、そして異なるHTMLドキュメント間で共有することができるからです。

CSSの擬似クラスとは何ですか？その使用例を挙げてください。

CSSの疑似クラスは、特定の要素の特定の状態を定義するためのセレクタへのキーワード追加です。これにより、コードに直接含まれる情報だけでなく、要素の特定のコンテクストや状態に基づいてHTML要素のスタイルを設定できます。

たとえば、:hover疑似クラスを使用すると、マウスで要素の上にホバーしたときに視覚的な変更が可能になります。他にも、:active（要素がアクティブまたはクリックされたとき）、:visited（リンクが訪れられたとき）、:first-child（特定の要素の最初の子のスタイルを設定）などの便利な疑似クラスがあります。

以下のサンプルコードは、:hover疑似クラスを使って、マウスで要素の上にホバーしたときにその要素の背景色を変更する方法を示しています。

button:hover {
  background-color: red;
}

この場合、ユーザーがマウスでボタンの上にホバーすると、ボタンの背景色が赤に変わります。このようなインタラクションは、疑似クラスを使わなければ可能ではありません。

CSSで要素を配置する方法とその制限は何ですか？

CSSでは、選択できるいくつかの要素の位置決め方法があります：

1. Static（静的）: HTMLの構造で決まるように、要素が一つ一つ積み重ねられるデフォルトの設定です。要素の位置は関係なく、top, right, bottom, または left のプロパティを使用して変更することはできません。その制限は、要素の配置を制御する上での不足です。

2. Relative（相対）: 元の位置に対して要素の位置を変更できます。位置は top, right, bottom, left プロパティで決定されますが、他の要素のレイアウトには影響しません。制限は、要素が単純にシフトされ、通常のドキュメントフローから削除されないことです。

3. Absolute（絶対）: 要素の位置は、（相対的、絶対的、固定的、粘着的な）異なる位置に配置された最も近い上位構造要素に対して決定されます。そのような要素がない場合、位置はドキュメント自体に対して決定されます。要素は通常のドキュメントフローから削除され、他の要素のレイアウトには影響しません。制限は、配置コンテキストを制御する必要性です。

4. Fixed（固定）: 要素の位置は、ブラウザーの端に対して決定されます。そのような要素はページをスクロールしても移動しません。要素は通常のドキュメントフローから削除され、他の要素のレイアウトには影響しません。制限は、恒久的に配置された要素によって他の要素が覆われる可能性です。

5. Sticky（追従）: これは相対的と固定的の位置決めの組み合わせです。要素は特定の場所（例えば、画面の上端）にその上端が達するまで静的なものとして振る舞います、それから要素は固定配置であったかのように振る舞います。制限は、ブラウザーのサポートが必要なことです。