学科 HTML/CSS基礎⑨ CSS

Byonose

講義メモ

1限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて

2限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて

3限目
学科 HTML/CSS基礎⑨
テーブルタグについて

4限目
学科 HTML/CSS基礎⑨
フォームタグについて

5限目
学科 HTML/CSS基礎⑨
本日の講義のまとめ

メモ

スマホとPCでは表示できる解像度が違うため、RED対応をしないと、スマホ版が見づらくなる、そこで追加のコーディングを行う。

・RED対応は横幅を考慮する。
横スクロールはUXとして好まれない、widthを固定してしまうと画面が小さい時に縮小されず文字が小さくなってしまう。
max-width プロパティ（width プロパティの取ることができる最大値）を使用すると横幅の調整がしやすくなる。
https://html-css.hamaya2020.com/lesson-11.html#L11.2.4

・画面が〇〇未満のpxになったときにサイズを縮小
Media Queries （メディアクエリ）で行う。
メディアクエリはCSS スタイルに適用できるシンプルなフィルタのこと。
https://html-css.hamaya2020.com/lesson-11.html#L11.2.5

・画面縮小でメニューが崩れる
スマホ版でのみメニューを消して、ハンバーガーメニューを導入

RWD 対応のサイトについて

  • 幅広デザインでの Web ページ作成
  • viewport 定義の指定
  • 横幅変動時のコンテンツ幅を設定
  • Media Querie でデザインを整える
  • 画面サイズに合わせた表示部品の導入

テーブルタグについて

<table>
　　<caption>キャプション</caption>
　　<tr><th>見出し</th><th>見出し</th></tr>
　　<tr><td>データ</td><td>データ</td></tr>
　　<tr><td>データ</td><td>データ</td></tr>
</table>

  • table要素（テーブルの範囲）
  • caption要素（表のキャプション）
  • tr要素（1行の範囲）
  • th要素（タグ見出し）
  • td要素（データ項目）

参考サイト

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

フォームタグについて

  • form 要素（フォーム）
  • label 要素（ラベル）
  • input 要素（インプット）
  • textarea 要素（テキストエリア）
  • select/option 要素（セレクト／オプション）
  • button 要素（ボタン）
  • fieldset/legend 要素（フィールドセット／レジェンド）

類似投稿