-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

レスポンシブWebデザインを理解しましょう

レスポンシブWebデザインについて

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「マルチデバイス対応の教科書①.pdf」　

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 要素（フィールドセット／レジェンド）

memo

CSS box modelとは？
固定値からの解放

横幅の合計値をデバイスの画面幅を超えなければ、横スクロールのバーは出てこない

ボックスモデルに関わるセレクタ
width
height
padding
margin
border

ボックスをレイアウトさせるセレクタ
float
clear
position
overflow
display

width　
初期値はauto　デザインの都合が可能な限り「％」使用
max-width min-width は便利

height
初期値はauto
デザインの都合が可能な限り「初期値」
「width」と違って％は使いづらい

padding
上下左右まとめての指定が可能
cssでbackgraundが適用される場所
「box-sizing:border-box;」を使えば大体ok
背景に画像を持たせるときに有効

margin
上下左右まとめての指定が可能
cssでbackgroundが適用されない場所
負の値が指定できる

border
ボーダーのスタイル・太さ・色の指定が可能
上下まとまて指定可能

float
これからはフレックスレイアウトを使用する
指定された要素を左または右に寄せて配置、中央には揃えられない

※レスポンシブデザインにするには？

①幅広デザインでのページを作成
②viewport定義を指定
③横幅変動時のコンテンツ幅を設定
④メディアクエリでデザインを整える
⑤ハンバーガーメニュー等、部品を入れる

viewport定義を指定することでスマホの画素数に合わせた
表示になる

メディアクエリ→ある幅になったら表示を変えてねという指示
@media screen and (max-width: 760px){