実技 WEBページ制作実習①

-本日のアジェンダ-

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」　

【動画】

レスポンシブWebでデザイン（RWD） 対応のサイトについて

レスポンシブWebデザイン（RWD）を理解して画面サイズの異なる複数のデバイスでも快適に閲覧できるWebサイト（ページ）を作成しましょう。

  • レスポンシブWebでデザイン（RWD）の考え方
  • 幅広デザインでの Web ページ作成
  • viewport 定義の指定
  • 横幅変動時のコンテンツ幅を設定
  • Media Querie でデザインを整える
  • 画面サイズに合わせた表示部品の導入

参考サイト

本日の課題

本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。