画面の幅と利用者に合わせて改善する
- Webの見た目を指定する仕組みを説明できる。
- 画面を縮めるだけの方法とレスポンシブな配置変更を区別できる。
- 利用者を理解し，要求・設計・評価を反復できる。
点線のことばを押すと、意味と使い方を調べられます。
表示・保存
このページの目次 3節・復習と3問
- 1説明を読む
- 2復習する
- 3問題を解く
- 4次へ進む
1見た目の規則を共有する
CSS（Cascading Style Sheets：段階的に適用するスタイルシート）は、Webページの色・文字・余白・配置などの見た目を指定する仕組み。複数ページが同じ規則を使えば、サイトの統一感を保ちやすい。
WebブラウザはWebページを表示するソフト。ブラウザや入力方法の違いで表示・操作が変わることがあるため、複数の利用環境で確認する。見た目をそろえても、読める文字と自然な操作順がなければ使いやすくならない。
2小さい画面では配置を変える
レスポンシブWebデザインは、画面幅などに応じてレイアウトを調整する設計。パソコンでは記事と案内を横並び、スマートフォンでは縦並びにすれば、文字を極端に縮めず読める。モバイルファーストは、小さい画面での必要な内容や操作から先に設計する考え方。
リダイレクトは別のURL（ウェブ上などのリソースの場所を示す文字列）へアクセス先を移す仕組みで、配置変更そのものではない。配信サーバの選択による負荷軽減、センサーを使ったアプリの動作、ホバーでの補足説明も、画面幅による配置変更とは区別する。
ハルとビットで、使い方を確かめよう
スマホでは全体を小さくするの？
文字を保ちながら横並びを縦並びにするなど、配置を変えるんだ。
この説明に出てきた略語の正式名称
- URL
- Uniform Resource Locator
ウェブ上などのリソースの場所を示す文字列
3人間中心設計は繰り返す
人間中心設計は、利用者と利用状況の理解を出発点に、要求を明らかにし、設計案を作り、利用者の視点で評価して改善する考え方。作り手の好みだけで完成としない。
例えば予約の試作品を初めて使う人に操作してもらい、日付を選べない原因を観察する。説明を追加するだけでなく、配置や操作そのものを直し、再び確かめる。年齢や障害、利用端末などが異なる人の状況も含めて評価する。
ハルとビットで、使い方を確かめよう
完成後に一度試せばいい？
早い段階から確かめ、直した案も再評価するよ。
復習
このレッスンを振り返ろう
問題で確かめる
学んだことを問題で確かめよう
過去問を参考にした独自問題1問、入門の確認問題2問で、この範囲の考え方を使います。答えを選んだら、正解の理由とほかの選択肢の違いも確かめましょう。
ヒントを見る
ページの見た目を指定する役割を探します。
オリジナル入門問題 · シラバス 6.5
3問中0問の答えと解説を確認しました。選んだ答えの理由も確かめてから、次へ進みましょう。
出典・参考資料を確認する
学習範囲：IPA シラバス Ver.6.5 ↗ 項目51。身近な例・会話・図解・確認問題は当サイトのオリジナルです。
学習範囲と参考資料
シラバスは学習範囲の根拠です。説明は参考資料を基に当サイトが作成しています。身近な事例・会話・図の数値は学習用の架空例です。2026年9月10日確認。