アジェンダ
1限目
実技 WEBページ制作実習①
FTP操作訓練
2限目
実技 WEBページ制作実習①
CSSのプロパティについて
3限目
実技 WEBページ制作実習①
FTP操作訓練
4限目
実技 WEBページ制作実習①
Webページ制作実践
5限目
実技 WEBページ制作実習①
Webページ制作実践
まとめ
■webサイトアップロードの仕方
https://html-css.hamaya2020.com/appendix-5.html#A5-2-6
◎FFTソフトを使う
【サーバー名】任意で作る
接続するサーバーのドメイン名です。「サーバー名／ホスト名／FTP ホスト名」などと呼ばれています。
【ユーザー名】https://ag184-05.deau-ag.com/
接続するサーバーに登録されているユーザー名です。「ユーザー名／アカウント名」などと呼ばれています。
【パスワード】前回決めたもの
接続するサーバーに登録されているユーザーのパスワードです。
■マルチデバイス対応
ポイントは、BOX model
合計値をデバイスの画面幅100％にする。
横幅は4種類 width padding margin border
レスポンシブWebでデザイン（RWD） 対応のサイトについて
レスポンシブWebデザイン（RWD）を理解して画面サイズの異なる複数のデバイスでも快適に閲覧できるWebサイト（ページ）を作成しましょう。
- レスポンシブWebでデザイン（RWD）の考え方
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入
■スマホ対応の方法
L12.2.2 幅広デザインでの Web ページ作成
L12.2.3 viewport 定義の指定
L12.2.4 横幅変動時のコンテンツ幅を設定
L12.2.5 Media Querie でデザインを整える
viewport は、指定していません。
コンテンツの横幅は、960pxを設定しています。（width: 960px;）
以下の確認を実施してください。
ウィンドウ幅を変化させて横スクロールバーの出現位置を確認してください。
スマホまたはブラウザの検証画面を使用してスマホ画面での表示型式を確認してください。
◎横スクロールバーが出てくる＝横スクロールしなければならない（全体が小さくならない）のはNG
https://html-css.hamaya2020.com/lesson-12.html
ある地点から（ブレイクポイント）写真や文字の配列を変化させる。
→L12.2.5 Media Querie でデザインを整える。
変更や新しい部品を加える。
}
@media screen and (max-width: 760px) { /* ヘッダ上部の隙間を削除 */
header {
margin: 0px auto;
}
}L12.3.2 ブレイクポイントの考え方
PC1025px ～
タブレット600px ～ 1024px（先生は760px）
スマートフォン～ 599px