Day.6：Webサイトのキホン［後編］学びメモ

～誰でも使えるWEBを目指して～

✅ 今日の学習テーマ

• コース：リスキリングスタート講座

• 単元：Day.6「Webサイトのキホン［後編］」

• 内容：アクセシビリティとReplit導入

💡 HTML/CSSと文書作成の違い

• HTMLはWebページの構造を作る言語（見出し、段落などの配置）

• CSSはその構造に「デザイン（色・配置・大きさ）」を与えるもの
  → Wordなどの文書作成とは異なり、「構造」と「見た目」が明確に分かれているのが特徴

♿ アクセシビリティを考えた配慮ポイント

🔸 1. 代替テキスト（altテキスト）

• 画像が見えない人にも、画像の内容を言葉で伝えるための説明文

• 例：

  1. html

• 特に重要な理由：

  1. スクリーンリーダー利用者に画像の情報を伝える

  2. 画像が表示されないときの補完になる

  3. 情報のアクセシビリティ確保につながる

✅ NG例：

• 空欄のalt（意味のある画像にはNG）

• 「画像」とだけ書く（内容が分からない）

• 飾り用画像に長い説明（→alt=""でOK）

🔸 2. 色のコントラスト

• 色覚に違いがある方にも見やすくするには、前景（文字）と背景の色の差をしっかりつけることが重要。

• コントラスト比にも国際的な基準がある（WCAG）

🔸 3. 音声情報のテキスト化

• 聴覚障害者向けの配慮

• ナレーション・効果音を字幕やテキストで表示することで、音が聞こえない人にも内容が伝わる

💻 Replit導入

• Replitとは？
  ブラウザ上でコードを書いて実行できるオンライン開発環境
  → ソフトのインストールが不要で、初心者にとっても手軽！
  → HTML/CSSの実験もその場で即確認できる

✍️ 用語メモ：ホバーエフェクト

• hover（ホバー）エフェクトとは：マウスカーソルを要素に重ねた時に発動する視覚的な変化
  例：

• ボタンの色が変わる

• 下線が出る

• 画像が拡大する

→ 主にPCでの利用を想定した視覚演出

📝まとめ

アクセシビリティという視点を持つことで、「誰にとっても使いやすいWeb」の大切さを実感。デザインと同じくらい、伝えるための配慮がWeb制作には欠かせない。