1限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて
PC用のwebサイトを幅を小さくしても対応できるようにする。
Responsive WEB Design
様々なデバイスの画面サイズに反応するWEBデザインという意味
ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで
マルチスクリーンに対応したWEBサイトを制作できる。

Box model
「 マルチデバイス対応」のサイトの特徴は固定値からの解放。

合計値をデバイスの画面幅（100％）
width　　　 初期値はauto
　　　　　 数値と%の指定が可能
　　　　　 負の値は指定できない
　　　　　 HTMLのテキスト、画像（img）の適用される箇所
　　　　　・デザインの都合が可能な限り「％」を使用しましょう。
　　　　　・「max-width」「min-width」は便利
height　　　初期値はauto
　　　　　・デザインの都合が可能な限り「初期値」にしましょう。
　　　　　・「width」と違い、「％」は使い難い。
padding　　上下左右まとめての指定が可能　　　　　　　＊見えるので使いやすい
　　　　　　数値と%の指定が可能　　　　　　　　　　　＊内側の余白
　　　　　　負の値は指定できない
　　　　　　CSSでbackgroudが適用される箇所
　　　　　・「box-sizing: border-box;」を使えばだいたい解決するかも
　　　　　・数値を入れれば絶対に余白を持ちます。（逆に効かない場合は別の何かが間違っています。）
　　　　　・背景「backgroud 」に画像を持たせる時に有効
　　　　　・余白の取り方に悩んだらpaddingで指定すると良いかも？！
margin　　　上下左右まとめての指定が可能　　　　　　　＊marginをぶつけない
　　　　　　数値と%の指定が可能　　　　　　　　　　　　相殺させない
　　　　　　負の値が指定できる　　　　　　　　　　　　＊数字で理解する
　　　　　　CSSでbackgroudが適用されない箇所　　　　　見た目ではなく内容で理解することが大切
　　　　 ・「marginの相殺」がややこしい　　　　　　　　
　　　　　・「ネガティブマージン」がややこしい
　　　　　・「他のセレクタとの関係性」がややこしい
　　　　 ・CSSが嫌わる原因はこれ…だが、理解すると自由自在のレイアウトが可能
border　　　ボーダーのスタイル・太さ・色の指定が可能　　　　＊箱と箱の距離
　　　　　　上下左右まとめての指定が可能　　　　　　　　　　＊見た目・装飾
　　　　　　数値と%の指定が可能
　　　　　　負の値は指定できない
　　　　　　初期値で「backgroud」を含む箇所だが、「box-sizing」で調整可能　
　　　　　・「box-sizing: border-box;」を使えばだいたい解決するかも
　　　　　・後で、横スクロールの原因探しで最後まで見つからない事が多いのがコレ
float　　　　初期値はnone
　　　　　　floatプロパティは、指定された要素を左「left」または右「right」に寄せて配置
　　　　　　ただし、左か右にしか配置出来なくなり中央に揃わなくなる
　　　　　　その他、特殊な仕様が多々ある
　　　　　・使わない時は「none」にする。（これはよく使います。）
　　　　　・コーディングで一番悩ましい存在、極力使わないというのがコツかも？！
　　　　　・ 「float」したら「 clear 」を徹底する
　　　　　・横並びになれば、横並びの合計値になるので、ボックスの数値をしっかり把握してみましょう。
　　　　　・ややこしいが「 float 」が自在に使えればどんなレイアウトも自由自在
　　　　　・「ネガティブマージン」と合わせたら更に強力！
clear　　　　初期値はnone
　　　　　　「float」プロパティの回り込みを解除する。
　　　　　　「float」 と「 clear 」はセットで考えると良いかも　　　　＊止める役割
　　　　　・値に「left」「right」あるが一緒なので使うなら「both」
　　　　　・使わない時は「none」にする。（これはよく使います。）

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

position　　 positionプロパティは、ボックスの配置方法（基準位置）が、相対位置「relative」絶対位置「absolute」
　　　　　　を指定出来る。表示位置の指定には「top」「bottom」「left」「right」を併用して、基準位置からの距離
　　　　　　を設定する。
　　　　　　数値と「％」の値、負の値が使用可能 初期値は「 static 」
　　　　　　絶対位置への配置でスクロールしても位置が固定の「fixed」
　　　　　・ヘッダーの固定や、ページトップへのボタンの固定に便利 　＊使う場所を決めて使えばよい
　　　　　・2つのセレクタを併用しなければならないのでややこしい　　　　　ピンポイント使用
　　　　　・負の値や、親子関係のがややこしい
　　　　　・ややこしいが「 position 」が自在に使えればどんなレイアウトも自由自在
　　　　　・「float」「ネガティブマージン」と合わせたら更に超強力！
overflow
display　　　displayプロパティは、ブロックレベル・インライン等の、要素の表示形式を指定する際に使用
　　　　　　inlineは（横幅の絶対値を持てない）
　　　　　　blockとinline-blockは（横幅の絶対値を持てる）　　　　＊重要　インライン
　　　　　　noneは要素が表示を隠す事が出来てしまう。　　　　　　　　　 インラインブロック
　　　　　・要素の横並びの箇所（グローバルナビ等）には必須　　　　　　 ブロック
　　　　　・非表示「 display :none;」の扱いには要注意　　　　　　　　　　
　　　　　・表組「table」の解体に必要

テーブルタグについて（表作成）
L7.2.1 テーブルの構成　　　　＊主流はこちら　L2.10.1 table 要素（テーブル作成）
<table>　　
　　　<caption>キャプション</caption>　　
　　　<tr><th>見出し</th><th>見出し</th></tr>　　
　　　<tr><td>データ</td><td>データ</td></tr>　　
　　　<tr><td>データ</td><td>データ</td></tr>
</table>
L7.4.2 display プロパティ

フォームタグについて
L2.11.1 form 要素（フォーム作成）
<form action=”#” method=”post”>
ここに内容
</form>
L2.11.3 input 要素（フォーム構成部品）
L2.12.2 summary 要素（折りたたみ領域の概要）

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

RWD 対応のサイトについて
PCサイト→スマホサイト　　この流れで作ることが多い（逆の場合もある）
L11.2.1 レスポンシブ Web デザインの実施手順
　　　1.幅広デザインでの Web ページを作成します。
　　　2.viewport 定義を指定します。
　　　3.横幅変動時のコンテンツ幅を設定します。
　　　4.Media Querie を使用してデザインを整えます。
L11.2.3 viewport 定義の指定
　　　 viewport 定義を head 要素内に指定
　　　・スマホの時のみ作用する
L11.2.4 横幅変動時のコンテンツ幅を設定
　　　  width プロパティから max-width プロパティに変更
L11.2.5 Media Querie でデザインを整える
　　　　header　直下に記すのがおすすめ
　　　　数字は大きい→小さいの順に記す
　　　　iPhoneSE　で表示できればOK
L11.2.6 画面サイズに合わせた表示部品の導入
　　　　ハンバーガーメニューなど
L11.3.2 ブレイクポイントの考え方
　　　　2024年度最新　レスポンシブWEBデザインのブレイクポイントなど検索すると出てくる
　　　　＊最もシェア率が高いものを調べてくれている
　　　　　大体　760px 　先生の経験値から
　　　　　　PC1025px ～
　　　　　　タブレット600px ～ 1024px
　　　　　　スマートフォン～ 599px

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

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