2025/3/29 「HTML/CSS基礎④」の記録です。
講師：⼤浜 信彦先生
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
PNGとJPEGの違い
| 特徴 | PNG | JPEG |
|---|---|---|
| 圧縮方式 | 可逆圧縮（画質が劣化しない） | 非可逆圧縮（画質が劣化する） |
| 画質 | 高画質を維持 | 高圧縮率でファイルサイズ小さい |
| 透過サポート | アルファチャンネルで透過可能 | 透過をサポートしない |
| 色の深度 | 最大48ビット/ピクセル（高い色精度） | 最大24ビット/ピクセル（一般的な用途に十分） |
| 適した用途 | ロゴ、アイコン、イラスト、スクリーンショット | 写真やデジタルカメラの画像 |
| ファイルサイズ | 比較的大きい | 比較的小さい |
- PNGは、透過や高い画質が求められる場合や、編集可能な画像に最適です。
- JPEGは、ファイルサイズを小さくしたい場合や写真の保存に適しています。
img要素
HTMLでは、画像のファイルパスは相対パスがよく使われます。
これにより、プロジェクトを移動してもリンクが崩れにくくなります。
特殊文字
通常のテキストでは表現しづらい記号や予約語（例えば や ）を表すためのコードです。
これらは「エンティティ」とも呼ばれ、特定の記号を安全に表示するために使用されます。
| エンティティ | 表示される文字 | 説明 |
|---|---|---|
| < | < | 小なり記号 |
| > | > | 大なり記号 |
| & | & | アンパサンド |
| " | " | ダブルクォーテーション |
| ' | ' | シングルクォーテーション |
| © | © | 著作権記号 |
| ® | ® | 登録商標記号 |
CSSの「id」と「class」
CSSのとは、HTML要素をスタイルやスクリプトで操作する際に使う重要な属性です。それぞれに特徴と使いどころがあります。
クラス（class）
- 複数の要素に同じデザインを適用したいとき
- 汎用的なスタイリングで頻繁に使用し
ID（id）
- ページ内で一意の要素を特定したいとき
- JavaScriptやリンクアンカーで、特定の要素を直接操作する際に便利
簡単にいうと
- 同じ服を何人かの人に着せたい（同じスタイルを適用したい）なら「クラス」
- 1人だけに特別な服を着せたい（特定のスタイルを適用したい）なら「ID」
リセットCSS
ウェブブラウザがデフォルトで提供するスタイルをすべてリセット（初期化）するCSSのことです。
ブラウザごとに異なるデフォルトスタイルを統一し、開発者が自由にカスタマイズできるようにするのが目的です。
主な特徴
- デフォルトの差異を排除: ブラウザ間で異なる余白やフォントサイズなどをなくします。
- スタイルの統一: ページ全体のデザインが意図通りに反映されやすくなります。
- 開発効率の向上: スタイルの不整合を気にせずにデザインを構築できます。
なぜリセットCSSが必要なのか
ブラウザごとにスタイルが微妙に異なるため、意図しないデザインの違いを防ぐためにリセットCSSがよく使われます。
リセットCSSを使うと、スタイルの基礎が整うので、デザインがしやすくなります。
