WEB:HTML＆CSS Flashcards

Question 1

Q

Question 2

Q

2024/12/04(Wed)
①CSSで画像の加工をするためのプロパティ一覧と、HTMLの<img>タグとCSSのbackground-imageの違い、そして現在の主流について教えて。

Answer

A

①以下、①CSSで画像の加工をするためのプロパティ一覧と、②HTMLの<img>タグとCSSのbackground-imageの違い、そして現在の主流について詳しく解説します。

① CSSで画像を加工するためのプロパティ一覧

CSSで画像を加工する際に使用できる主なプロパティを以下にまとめます。

画像の表示サイズや位置を調整するプロパティ
- width: 画像の幅を指定します。
- height: 画像の高さを指定します。
- object-fit: 画像の表示方法を指定します。
- cover, contain, fill, none, scale-down など。
- object-position: 画像の表示位置を指定します。

画像の背景に関するプロパティ
- background-image: 背景画像を指定します。
- background-size: 背景画像のサイズを指定します。
- cover, contain, auto など。
- background-position: 背景画像の位置を指定します。
- background-repeat: 背景画像の繰り返しを指定します。
- repeat, no-repeat, repeat-x, repeat-y など。
- background-attachment: 背景画像の固定方法を指定します。
- scroll, fixed, local。

画像の視覚効果を変更するプロパティ
- filter: 画像にフィルター効果を適用します。
- blur(px): ぼかし効果。
- brightness(%): 明るさ調整。
- contrast(%): コントラスト調整。
- grayscale(%): 白黒化。
- hue-rotate(deg): 色相を回転。
- invert(%): 色を反転。
- opacity(%): 不透明度を設定。
- sepia(%): セピア調に変更。
- drop-shadow(x, y, blur, color): 影を追加。
- opacity: 透明度を指定します。

画像の形状やボーダーを変更するプロパティ
- border: 画像のボーダーを設定します。
- border-radius: 角を丸くします。
- 50%で円形に。
- clip-path: 画像を特定の形状に切り抜きます。
- mask-image: 画像マスクを適用します。

アニメーションやトランジション
- transition: プロパティの変更にアニメーションを加えます。
- transform: 画像を変形します。
- rotate(deg): 回転。
- scale(x, y): 拡大・縮小。
- translate(x, y): 移動。
- skew(x, y): 傾斜。

② <img>タグとCSSのbackground-imageの違い

1. <img>タグの特徴
- 画像の役割: コンテンツとしての画像を挿入する場合に使用します（例: 製品画像、記事内の画像など）。
- アクセシビリティ: alt属性を利用して、画像の内容を説明できます。
- SEO: 検索エンジンが画像を認識しやすくなります。
- スタイリング: CSSで加工は可能ですが、背景画像より柔軟性は劣ります。

2. CSSのbackground-imageの特徴
- 画像の役割: 装飾目的の画像を挿入する場合に使用します（例: 背景画像、装飾アイコンなど）。
- アクセシビリティ: background-imageは装飾目的のため、スクリーンリーダーなどで認識されません。
- SEO: 検索エンジンには認識されません。
- スタイリング: 背景画像のサイズや位置、繰り返し設定が可能で、装飾に適しています。

現在主流となっている記述方法
- コンテンツ画像: <img>タグを使用するのが一般的です。SEOやアクセシビリティを考慮した設計に適しています。
- 装飾画像: CSSのbackground-imageを使用するのが一般的です。デザインやレイアウトに合わせた柔軟な調整が可能です。

つまり、用途に応じて使い分けることが重要です。
現在のウェブ開発では、アクセシビリティやSEOを重視する傾向が強いため、コンテンツ画像には<img>タグが推奨されます。一方で、デザインや装飾に関してはbackground-imageが主流です。

補足
混乱を避けるために、CSSで画像加工を行う際は、以下のように整理して記述するとわかりやすくなります。

```html

```css
/* CSS */
.image-container img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  filter: brightness(80%);
}

また、background-imageを使用する場合は以下のように記述します。

```html

```css
/* CSS */
.background-container {
  background-image: url('example.jpg');
  background-size: cover;
  background-position: center;
  width: 300px;
  height: 200px;
  border-radius: 10px;
}

このように、HTMLとCSSを分けて記述することで、コードの見通しを良くすることができます。

項目 | <img>タグ | background-image |

Question 3

Q

2024/12/5(THU)
ⅠCSSで、画像の重なり順の優先度を変更するプロパティを教えて。

Answer

A

Ⅰ画像の重なり順の優先度を変更するためには、CSSのz-indexプロパティを使用します。このプロパティは、要素のスタッキングコンテキスト内での重なり順を指定します。
z-indexの使い方

プロパティの値:
- 整数値を指定します。値が大きいほど、前面に表示されます。
- デフォルトでは、z-indexはautoで、親要素のz-indexに従います。

例
css
.image1 {
position: relative; /* または absolute, fixed /
z-index: 1; / この要素は他の要素よりも後ろに表示される */
}

.image2 {
position: relative; /* または absolute, fixed /
z-index: 2; / この要素は前面に表示される */
}
~~~

注意点

z-indexは、positionプロパティがrelative, absolute, fixed, または sticky に設定されている要素に対してのみ有効です。
z-indexの値は、同じスタッキングコンテキスト内の要素に対してのみ影響します。親要素のz-indexが影響する場合があります。

このようにして、画像や他の要素の重なり順を調整できます。

Question 4

Q

Brainscape's Knowledge GenomeTM

WEB:HTML＆CSS Flashcards

Brainscape's Knowledge Genome^TM