2025年6月3日

-本日のアジェンダ- 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 でデザインを整える 画面サイズに合わせた表示部品の導入 テーブルタグについて &lt;table&gt; &lt;caption&gt;キャプション&lt;/caption&gt; &lt;tr&gt;&lt;th&gt;見出し&lt;/th&gt;&lt;th&gt;見出し&lt;/th&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;データ&lt;/td&gt;&lt;td&gt;データ&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;データ&lt;/td&gt;&lt;td&gt;データ&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; table要素（テーブルの範囲） caption要素（表のキャプション） tr要素（1行の範囲） th要素（タグ見出し） td要素（データ項目） 参考サイト HTML tableタグを初心者向けに解説&amp;便利な知識5選 | Udemy … ホームページのレイアウトはテーブルではなくCSSを使う理由 … 【HTML table】表を作成する基本からレイアウトの方法までを解説 ワンポイントアドバイス 楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。 フォームタグについて form 要素（フォーム） label 要素（ラベル） input 要素（インプット） textarea 要素（テキストエリア） select/option 要素（セレクト／オプション） button 要素（ボタン） fieldset/legend 要素（フィールドセット／レジェンド） memo CSS box modelとは？固定値からの解放 横幅の合計値をデバイスの画面幅を超えなければ、横スクロールのバーは出てこない ボックスモデルに関わるセレクタwidthheightpaddingmarginborder ボックスをレイアウトさせるセレクタfloatclearpositionoverflowdisplay 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){

学科 HTML/CSS基礎⑨【オンライン】