1限目
学科 HTML/CSS基礎⑥
FTPについて

2限目
学科 HTML/CSS基礎⑥
CSSの記述方法について

3限目
学科 HTML/CSS基礎⑥
Webページ制作実践

4限目
学科 HTML/CSS基礎⑥
Webページ制作実践

5限目
学科 HTML/CSS基礎⑥
本日の講義のまとめ

FTPについて(セキュリティがしっかりしている)

FTP(File Transfer Protocol)とは、サーバとクライアントの間でファイル転送を行う際に必要となる通信プロトコル(通信する際の手順や規約)の一つです。

WEBサイトを公開するためには、作成したデータ(HTMLファイルやCSSファイル、画像など)をWEBサーバーに転送する必要があります。FTPソフトを使ってFTPサーバに接続することでファイルを転送することができます。

FFFTP でサーバーに FTP 接続を行うためには、以下の情報が必要です。

【サーバー名】
接続するサーバーのドメイン名です。「サーバー名/ホスト名/FTP ホスト名」などと呼ばれています。

【ユーザー名】
接続するサーバーに登録されているユーザー名です。「ユーザー名/アカウント名」などと呼ばれています。

【パスワード】
接続するサーバーに登録されているユーザーのパスワードです。

訓練で使用するサーバーでは、「サーバー名」「ユーザー名」はアジェンダのサイドバーにある「 Serverリスト」に記載されています。

このツールを使う

口頭問題

HTML/CSS連動させる
文字コードの指定
サイトの説明文テスト
リンク
ボディ空っぽ

初めの準備

Pタグ追加

CSSが反映されているか確認

style.css右クリック

→open in new tab

確認できた。

2個目をバックグラウンド赤へ

3.口頭問題

divタグクラス付与
test03
300pxの□

4.子供付与

divの場所を最後まで閉じないと縦並びの配置になってしまうので注意!

5.真ん中配置

03を真ん中配置

margin: 0 auto 0 auto;

でも表示されるけど、数biteの負荷がかかるから表示が遅くなる。(若干)
なので、なるべく簡素化して記述する。

コードはシンプルにすることが大切。

6.flex

W3C: HTMLのコードを決めている団体
→Googleなどに主導が変わってきている
living standardに移行している

border

css  グラデーション ジェネレーター

https://front-end-tools.com/generateGradient

テーブルにもジェネレーターがある

https://tabletag.net/ja

■テーブル 個別にデータを更新できる

CSSのコメントアウト→黒いボックスをコメントアウト

コメントアウトして、ファイルを紐づけて表示してみると

空だけが出る。

検証ツールで以下を設定

cover→ 300の大きさにいい感じに収める
centerm→いい感じのを真ん中に配置

→画面を全画面や縮小しても真ん中にいてくれる→googleの評価的にはあまり良くない

→imgだと可変になってしまう

お姉さん全体が表示

こっちでもOK

relative →相対値

absolute→親から見て

fixed→絶対値