-本日のアジェンダ-
1限目
実技 WEBページ制作実習①
CSSのプロパティについて
2限目
実技 WEBページ制作実習①
CSSのプロパティについて
3限目
実技 WEBページ制作実習①
FTP操作訓練
4限目
実技 WEBページ制作実習①
Webページ制作実践
5限目
実技 WEBページ制作実習①
Webページ制作実践
本日のポイント
レイアウト系プロパティを理解しましょう
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 ホスト名」などと呼ばれています。
【ユーザー名】
接続するサーバーに登録されているユーザー名です。「ユーザー名／アカウント名」などと呼ばれています。
【パスワード】
接続するサーバーに登録されているユーザーのパスワードです。
Webページ制作実践④
実際にサンプルファイルを使用してWebページ制作の手順を確認していきましょう。
- レイアウト系プロパティ
- ボーダー系プロパティ
- その他のプロパティ
- 擬似クラス系セレクタ
- 擬似要素系セレクタ
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付け
（LP製作を目指しています）
コメント