-本日のアジェンダ-
1限目
実技 WEBページ制作実習①
CSSのプロパティについて
2限目
実技 WEBページ制作実習①
CSSのプロパティについて
3限目
実技 WEBページ制作実習①
FTP操作訓練
4限目
実技 WEBページ制作実習①
Webページ制作実践
5限目
実技 WEBページ制作実習①
Webページ制作実践
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：サーバアップさせる
内容1：WEBページ作成①
内容2：WEBページ作成②
内容3：
課題：出来たものをUP
【注記】
・新カリキュラム用に修正（2024/11/7：大浜）
・FTP操作訓練を実施（2024/12/23）
本日のポイント
レイアウト系プロパティを理解しましょう
CSS：レイアウト系プロパティ
- position/top/left/bottom/right プロパティ（要素の配置方法）
- z-index プロパティ（重なりの順序方法）
CSS：ボーダー系プロパティ
- border-style プロパティ（ボーダースタイル）
- border-color プロパティ（ボーダー色）
- border-width プロパティ（ボーダー幅）
- border プロパティ（ボーダー一括指定）
- border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）
CSS：その他のプロパティ
- border-radius プロパティ（ボーダーの丸み）
- box-shadow プロパティ（ボックスの影）
- box-sizing プロパティ（ボックスサイズ計算）
- content プロパティ（挿入コンテンツ）
- object-fit プロパティ（画像トリミング）
- object-position プロパティ（画像の配置位置指定）
CSS：擬似クラス系セレクタ
- link 擬似クラス（未訪問リンクスタイル）
- visited 擬似クラス（訪問済リンクスタイル）
- hover 擬似クラス（オンカーソルスタイル）
- active 擬似クラス（アクティブスタイル）
- first-child/last-child 擬似クラス（先頭・最終の子要素指定）
- nth-child 擬似クラス（n 番目の子要素指定）
- nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
- not 擬似クラス（指定値以外の要素指定）
CSS：擬似要素系セレクタ
- first-letter 擬似要素（要素の 1 文字目を指定）
- first-line 擬似要素（要素の 1 行目を指定）
- before/after 擬似要素（要素の直前・直後にコンテンツの挿入）
FTPソフトの使い方について
FFFTP でサーバーに FTP 接続を行うためには、以下の情報が必要です。
【サーバー名】
接続するサーバーのドメイン名です。「サーバー名／ホスト名／FTP ホスト名」などと呼ばれています。
【ユーザー名】
接続するサーバーに登録されているユーザー名です。「ユーザー名／アカウント名」などと呼ばれています。
【パスワード】
接続するサーバーに登録されているユーザーのパスワードです。
訓練で使用するサーバーでは、「サーバー名」「ユーザー名」はアジェンダのサイドバーにある「 Serverリスト」に記載されています。
ポートフォリオサイトのデータも同じサーバー内にあります。
万が一、データを損傷してしまうと大変なので、バックアップを作成します。
「All-in-One WP Migration」というプラグインを使用します。
バックアップファイルはUSBメモリなどに入れて大切に保管してください。
Webページ制作実践④
実際にサンプルファイルを使用してWebページ制作の手順を確認していきましょう。
- レイアウト系プロパティ
- ボーダー系プロパティ
- その他のプロパティ
- 擬似クラス系セレクタ
- 擬似要素系セレクタ
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「chapter4.zip」
- Webページ完成
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）