2025.12.17 学習記録 ～HTML/CSS⑥～
Kumiko Okawara本日の実習作品
HTML/CSS編集後のサイト
HTML/CSS編集前のサイト
HTML/CSS編集後のサイト
HTML/CSS編集前のサイト
FTPについて
FTP（File Transfer Protocol）は、サーバとクライアントの間でファイル転送を行う際に必要となる通信プロトコル(通信する際の手順や規約)の一つ。
WEBサイトを公開するためには、作成したデータ（HTMLファイルやCSSファイル、画像など）をWEBサーバーに転送する必要がある。
FTPソフトを使ってFTPサーバに接続することでファイルを転送することが可能。
FFFTP でサーバーに FTP 接続を行うために必要なもの
- サーバー名
接続するサーバーのドメイン名。
「サーバー名／ホスト名／FTP ホスト名」などと呼ばれる。 - ユーザー名
接続するサーバーに登録されているユーザー名。
「ユーザー名／アカウント名」などと呼ばれる。 - パスワード
接続するサーバーに登録されているユーザーのパスワード。
CSS設定例（マージン・パディング）
①htmlとcssファイルを用意する
HTML
<!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>
親子（入れ子）の関係に注意して記載すること。
＜〇〇＞で始まり＜/〇〇＞で閉じる。
CSS
.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を表示した時にレイアウトが確認しやすい。
CSSの基本型↓
セレクタ{
プロパティ:値;
}
セレクタ内でのスペースは「子孫セレクタ」を表すので注意。
（div p{ → div内のp要素）
②CSSでマージン・パディングを設定する
.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;
}
パディング・マージンは、複数指定でき指定した個数により対象位置が異なる。
一括で指定する場合は下記のルールに沿って数値を入れること。
- 1つ…「上下左右」一括指定
- 2つ…「上下」と「左右」の順で指定
- 3つ…「上」と「左右」と「下」の順で指定
- 4つ…「上」と「右」と「下」と「左」の順で指定
※値の中でのスペースは「区切り」を表すので注意。
CSS設定例（横並びレイアウト）
htmlは基本的に縦にレイアウトが積まれていく。
cssのプロパティを使うと横並びにする事が可能。
①htmlとcssファイルを用意する
HTML
<!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>
CSS
.kodomo_a{
width: 200px;
height: 200px;
background: red;
}
.kodomo_b{
width: 200px;
height: 200px;
background: blue;
}
.kodomo_c{
width: 200px;
height: 200px;
background: green;
}
②CSSで「oya」に flexbox（横並びレイアウト）を設定する
.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;
}
