-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて
2限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて
3限目
学科 HTML/CSS基礎⑨
テーブルタグについて
4限目
学科 HTML/CSS基礎⑨
フォームタグについて
5限目
学科 HTML/CSS基礎⑨
本日の講義のまとめ
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：なし
【注記】
・新カリキュラム用に修正（2024/10/25：大浜）
・座学の後は、Webページ（Flower Days）制作の時間にあててください。
本日のテーマ
レスポンシブWebデザインを理解しましょう
レスポンシブWebデザインについて
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「マルチデバイス対応の教科書①.pdf」
【動画】
- Box Model
https://youtu.be/K1PcxtiiObc（12分19秒） - ボックスの幅（width）と高さ（height）の制御
https://youtu.be/UiOlkIahkT8（8分46秒） - ボックスの余白（padding/margin）の制御
https://youtu.be/kVjUE1xI9tY（9分41秒） - ボーダー（border）と横並び（float）の制御
https://youtu.be/uwNyg_GLYWM（7分37秒） - ボックスの配置と表示形式の制御
https://youtu.be/7_Ez0F5WKd8（9分13秒）
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要素（データ項目）
参考サイト
- HTML tableタグを初心者向けに解説&便利な知識5選 | Udemy …
- ホームページのレイアウトはテーブルではなくCSSを使う理由 …
- 【HTML table】表を作成する基本からレイアウトの方法までを解説
ワンポイントアドバイス
楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。
フォームタグについて
- form 要素（フォーム）
- label 要素（ラベル）
- input 要素（インプット）
- textarea 要素（テキストエリア）
- select/option 要素（セレクト／オプション）
- button 要素（ボタン）
- fieldset/legend 要素（フィールドセット／レジェンド）
本日の課題
本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。