-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑥
CSSの記述方法について
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パスワード回収
課題：練習問題提出
【注記】
・新カリキュラム用に修正（2024/11/7：大浜）
・「WEBページ制作実習①」でFTPツールの使用方法を説明しますので生徒からFTPパスワードを聞いて大浜まで連絡してください。
本日のテーマ
CSSの記述をしましょう
セレクタの得点について【復習】
セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。
CSS：レイアウト系プロパティ【復習】
- width プロパティ（内容の幅）
- max-width プロパティ（幅の最大値）
- min-width プロパティ（幅の最小値）
- height プロパティ（内容の高さ）
- max-height プロパティ（高さの最大値）
- min-heightプロパティ（高さの最小値）
- float プロパティ（回り込み）
- clear プロパティ（回り込みを解除）
- display プロパティ（要素の表示方法）
- overflow プロパティ（ボックスからあふれた内容の処理方法）
FTPについて
FTP（File Transfer Protocol）とは、サーバとクライアントの間でファイル転送を行う際に必要となる通信プロトコル(通信する際の手順や規約)の一つです。
WEBサイトを公開するためには、作成したデータ（HTMLファイルやCSSファイル、画像など）をWEBサーバーに転送する必要があります。FTPソフトを使ってFTPサーバに接続することでファイルを転送することができます。
FFFTP でサーバーに FTP 接続を行うためには、以下の情報が必要です。
【サーバー名】
接続するサーバーのドメイン名です。「サーバー名／ホスト名／FTP ホスト名」などと呼ばれています。
【ユーザー名】
接続するサーバーに登録されているユーザー名です。「ユーザー名／アカウント名」などと呼ばれています。
【パスワード】
接続するサーバーに登録されているユーザーのパスワードです。
訓練で使用するサーバーでは、「サーバー名」「ユーザー名」はアジェンダのサイドバーにある「 Serverリスト」に記載されています。
パスワードは個人のものを設定します。以下のルールでパスワードを設定してください。
・使えるのは半角英(小文字)、数字
・一文字めはアルファベット
・８〜１０文字
パスワードは忘れないようにきちんと管理しましょう。
Webページ制作実践③
実際にサンプルファイルを使用してWebページ制作の手順を確認していきましょう。
- バックグランド系プロパティ
- テキスト系プロパティ
- フォント系プロパティ
- リスト系プロパティ
- レイアウト系プロパティ
- パディング系プロパティ
- マージン系プロパティ
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「chapter3.zip」
- CSSファイル（style.css）にセレクタの書出し
- 文字の大きさや色の設定
- header部分のレイアウト作成
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
FTPパスワードについて
コーディングに向けての準備として、FTPパスワードを決めましょう(以下再掲)
パスワードは個人のものを設定します。
以下のルールでパスワードを設定し、講師に申告してください。
・使えるのは半角英(小文字)、数字
・一文字めはアルファベット
・８〜１０文字
パスワードは忘れないようにきちんと管理しましょう。