-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑥
FTPについて
2限目
学科 HTML/CSS基礎⑥
CSSの記述方法について
3限目
学科 HTML/CSS基礎⑥
Webページ制作実践
4限目
学科 HTML/CSS基礎⑥
Webページ制作実践
5限目
学科 HTML/CSS基礎⑥
本日の講義のまとめ
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：練習問題提出
【注記】
・FTPの説明を実施してパスワード収集を行ってください。
・実際のFTP訓練は「実技 WEBページ制作実習①」で実施予定です。
・収集したパスワードは、サーバー管理者に連絡してパスワード設定を実施してもらってください。
・学科 HTML/CSS基礎⑤で学んだ内容を実践します。
・トレーニング-3とトレーニング-4がありますが、実践するのは、どちらか一方でも大丈夫です。各自で状況をみながら判断してもらってください。
・本日でPC版のWebページ作成のスキル習得を完了させる予定で進めてください。
本日のテーマ
CSSの記述をしましょう
FTPについて
FTP（File Transfer Protocol）とは、サーバとクライアントの間でファイル転送を行う際に必要となる通信プロトコル(通信する際の手順や規約)の一つです。
WEBサイトを公開するためには、作成したデータ（HTMLファイルやCSSファイル、画像など）をWEBサーバーに転送する必要があります。FTPソフトを使ってFTPサーバに接続することでファイルを転送することができます。
FFFTP でサーバーに FTP 接続を行うためには、以下の情報が必要です。
【サーバー名】
接続するサーバーのドメイン名です。「サーバー名／ホスト名／FTP ホスト名」などと呼ばれています。
【ユーザー名】
接続するサーバーに登録されているユーザー名です。「ユーザー名／アカウント名」などと呼ばれています。
【パスワード】
接続するサーバーに登録されているユーザーのパスワードです。
訓練で使用するサーバーでは、「サーバー名」「ユーザー名」はアジェンダのサイドバーにある「 Serverリスト」に記載されています。
パスワードは個人のものを設定します。以下のルールでパスワードを設定してください。
・使えるのは半角英(小文字)、数字
・一文字めはアルファベット
・８〜１０文字
パスワードは忘れないようにきちんと管理しましょう。
Webページ制作実践③-1
マージン、パディング、バックグランド、レイアウト系のそれぞれのプロパティを使い、レイアウトを調整しながらhtmlの親と子（入れ子）の関係を理解しましょう。
①htmlとcssファイルの準備
<!doctype html>
<html>
<head>
<meta>〜〜〜
<meta>〜〜〜
<title>〜〜〜</title>
<link href="reset.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="oya_a">
<div class="kodomo_a1"></div>
<div class="kodomo_a2"></div>
</div>
<div class="oya_b">
<div class="kodomo_b"></div>
</div>
<div class="oya_c">
<div class="kodomo_c"></div>
</div>
</body>
</html>②親子（入れ子）の関係をブラウザで確認する
.oya_a {
width: 800px;
height: 800px;
background: red;
}
.kodomo_a1 {
width: 300px;
height: 300px;
background: blue;
}
.kodomo_a2 {
width: 400px;
height: 400px;
background: green;
}このようにbackgroundプロパティで背景に仮色を入れると、ブラウザでhtmlを表示した時にレイアウトが確認しやすいです。
③マージンとパディングを使ってレイアウトの位置を調整してみましょう
.oya_a {
width: 800px;
height: 800px;
background: red;
padding: 0 0 0 150px;
}
.kodomo_a1 {
width: 300px;
height: 300px;
background: blue;
margin: 0 auto;
}
.kodomo_a2 {
width: 400px;
height: 400px;
background: green;
margin: 50px 0 0 0;
}Webページ制作実践③-2
横並びのレイアウトを組んでみる
htmlは基本的に縦にレイアウトが積まれていきますが、cssのプロパティを使って横並びにする事ができます。参考元
今回はcssのflexboxを使って、横並びのレイアウトを作ってみましょう
<!doctype html>
<html>
<head>
<meta>〜〜〜
<meta>〜〜〜
<title>〜〜〜</title>
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="oya">
<div class="kodomo_a"></div>
<div class="kodomo_b"></div>
<div class="kodomo_c"></div>
</div>
</body>
</html>.oya {
display: flex;
}
.kodomo_a{
width: 200px;
height: 200px;
background: red;
}
.kodomo_b{
width: 200px;
height: 200px;
background: blue;
}
.kodomo_c{
width: 200px;
height: 200px;
background: green;
}横積みのレイアウトを組むことが出来れば、ワイヤーフレームをhtmlとcssで作成する事ができます。
トレーニング-３
実際のWebページを作成しましょう。
トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。
カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/
下記のファイルをダウンロードしましょう。
「training-3.zip」
トレーニング-４
実際のWebページを作成しましょう。
トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。
カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/
下記のファイルをダウンロードしましょう。
「training-4.zip」
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）