2025.12.25 学習記録 ～HTML/CSS⑦～

メディアクエリについて学習し、実際にHTMLとCSSのコードを編集してレスポンシブウェブデザインの表示を整えた。

本日の実習作品

用語

• RWD(レスポンシブウェブデザイン）
  デバイスの画面サイズに応じて Web サイトのレイアウトを自動的に最適化するデザイン手法。
  PC・タブレット・スマホなど、どんな画面幅でも見やすく使いやすいように、1つのHTMLを基盤に CSS を切り替えて表示を調整する。
• メディアクエリ
  画面サイズやデバイスの特性に応じて CSS のスタイルを切り替えるための機能。
  例）スマートフォンのレスポンシブ対応

body{
　　　　background:#ccc;
}
@media only screen and (max-width: 1280px){
　　　　body {
　　　　　　　　background:#999;
　　　　}
}
@media only screen and (max-width: 960px){
　　　　body {
　　　　　　　　background:#666;
　　　　}
}

@media only screen and (max-width: 640px){
　　　　body {
　　　　　　　　background:#333;
　　　　}
}

• viewport 定義
  HTML の タグを使って、「ブラウザに対して、どのように表示領域を扱うか」を指示すること。
  スマホ表示では、viewport を正しく設定しないとレイアウトが崩れたり、文字が極端に小さく表示されたりする。
  <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
  

備考・メモ

hedタグにviewport定義の指定を忘れずに入れること！

横並びレイアウトのCSS…float、flexbox、CSSグリッドレイアウト

インデントを揃える際、範囲選択でまとめて移動できる。

RWDおススメの手順「まずは横スクロールを無しに」

1. ブレイクポイントを決める
2. 横のスクロールバーは20px程度で計算しておく
3. widthを「%」に切り替える
4. marginを再調整する「解らなくなったらとりえず margin:0;」
5. box-sizing:border-box;で「padding」と「border」は内側にする

RWDのポイント

• 横スクロール出さない
• 文字が小さすぎない
• ボタンが押しやすい

デバイスの代表的な画面幅

• 1280px…PC
• 960px…タブレット
• 640px…スマートフォン

HTMLファイルとCSSファイルの紐づけが正しいか確認する方法

1. 検証ツールを開く
2. HTML内でパスを通したファイル名を右クリック
3. 「Open in new tab」をクリック
4. エラー出ずに正しく表示されて入ればOK