-本日のアジェンダ-
1限目
実技 WEBページ制作実習①
FTP操作訓練
2限目
実技 WEBページ制作実習①
CSSのプロパティについて
3限目
実技 WEBページ制作実習①
FTP操作訓練
4限目
実技 WEBページ制作実習①
Webページ制作実践
5限目
実技 WEBページ制作実習①
Webページ制作実践
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：サーバアップさせる
内容1：WEBページ作成①
内容2：WEBページ作成②
内容3：
課題：出来たものをUP
【注記】
・FTP訓練としてサーバーへのアップロード方法を説明してください。
・RWDの実施方法を具体的に説明します。
・わかりにくいので具体的な例を示して説明してください。
本日のポイント
レスポンシブWebデザインを理解しましょう
FTPソフトの使い方について
FFFTP でサーバーに FTP 接続を行うためには、以下の情報が必要です。
【サーバー名】
接続するサーバーのドメイン名です。「サーバー名／ホスト名／FTP ホスト名」などと呼ばれています。
【ユーザー名】
接続するサーバーに登録されているユーザー名です。「ユーザー名／アカウント名」などと呼ばれています。
【パスワード】
接続するサーバーに登録されているユーザーのパスワードです。
訓練で使用するサーバーでは、「サーバー名」「ユーザー名」はアジェンダのサイドバーにある「 Serverリスト」に記載されています。
ポートフォリオサイトのデータも同じサーバー内にあります。
万が一、データを損傷してしまうと大変なので、バックアップを作成します。
「All-in-One WP Migration」というプラグインを使用します。
バックアップファイルはUSBメモリなどに入れて大切に保管してください。
レスポンシブWebデザインについて
【資料】
カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/
下記のファイルをダウンロードしましょう。
「マルチデバイス対応の教科書①.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秒）
レスポンシブWebでデザイン（RWD） 対応のサイトについて
レスポンシブWebデザイン（RWD）を理解して画面サイズの異なる複数のデバイスでも快適に閲覧できるWebサイト（ページ）を作成しましょう。
- レスポンシブWebでデザイン（RWD）の考え方
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入
参考サイト
- RWDレスポンシブウェブサイトとは何ですか？基本的なCSSの書き方、SEOランキングの効果を最適化！
- レスポンシブ ウェブ デザインとは？～基本から作り方まで徹底解説～
- RWDに効くCSSテクニック | 第1回 レスポンシブな設計
本日の課題
本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。