第55回、CSSの記述方法

学科 HTML/CSS基礎⑥

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

CSSの記述をしましょう

FTPについて

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

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

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

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

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

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

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

パスワードは個人のものを設定します。以下のルールでパスワードを設定してください。
・使えるのは半角英(小文字)、数字
・一文字めはアルファベット
・８〜１０文字
パスワードは忘れないようにきちんと管理しましょう。

Webページ制作実践③-1

マージン、パディング、バックグランド、レイアウト系のそれぞれのプロパティを使い、レイアウトを調整しながらhtmlの親と子（入れ子）の関係を理解しましょう。

①htmlとcssファイルの準備

<!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>

②親子（入れ子）の関係をブラウザで確認する

.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を表示した時にレイアウトが確認しやすいです。

③マージンとパディングを使ってレイアウトの位置を調整してみましょう

.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;
}

Webページ制作実践③-2

横並びのレイアウトを組んでみる

htmlは基本的に縦にレイアウトが積まれていきますが、cssのプロパティを使って横並びにする事ができます。参考元
今回はcssのflexboxを使って、横並びのレイアウトを作ってみましょう

<!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>

.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;
}

横積みのレイアウトを組むことが出来れば、ワイヤーフレームをhtmlとcssで作成する事ができます。

トレーニング-３

実際のWebページを作成しましょう。

トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「を参照してください。

本日の課題

Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）

菊地師匠ありがとうございます！！