学科 CSS基礎①

前回の復習

  • CSSの基本構造
  • 検証ツールの活用

本日の訓練内容

CSSの読み込み方

  • 外部ファイル（スタイルシート）を作成し、htmlから読み込む。
  • styleタグ<style>~</style>を使用し、 CSSを書き込む。
  • style属性を使用し、htmlに直接書き込む。

FTPサーバーの利用

  • 作成したHTMLをサーバーにアップロードすることで外部からHTMLをWebページとして見ることができる。
  • Mac, iOS, AndroidはLinuxを基礎として構築されている（Windowsは独自）。
  • Windows はファイル名中の大文字・小文字を区別しないが、Macなどは区別する
  • FFFTP
  • MacはCyberduck for Macなどを利用（for Windowsもある）する。
  • FTPの使用（Webページのアップロード）には以下の情報が必要
    • ホスト名
    • アカウント名
    • パスワード
  • FFFTPの立ち上げ
  • アップロード用フォルダの作成
  • 作成したファイルのアップロード
FTPにアップロードしたファイルの属性（アクセス権）
  • ファイルの属性は３種のアクセス者（オーナー、グループ、その他）と３種のアクセス権（呼出、書込、実行）の組み合わせが設定されている。
  • アクセス権にはそれぞれ数字で表現することができ、（呼出：４、下書込：２、実行：１）それぞれを足し算した３桁の数字で属性を表現することができる。
属性変更
アクセス権（read, write, execute）は３桁の数字で表現される。
  • 【現在の属性】欄に３桁の数字を入れることでチェックボックスの状態を一斉に変更することもできる。

HTML、CSSのアップロード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="SumiyaCoffee">
        <meta name="discription" content="手紙喫茶墨谷珈琲店は「手紙を書く場所」を提供する喫茶店です。">
        <meta name="keywords" content="手紙,喫茶,カフェ,郵便,墨谷,墨谷珈琲店">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>手紙喫茶墨谷珈琲店とは</title>
        <link href="style2.css" rel="stylesheet" type="text/css">
        <link href="images/favicon2.ico" rel="icon">
    </head>
    <body>
        <header>
            <h1>手紙喫茶　墨谷珈琲店とは</h1><!--heading1-->
			<p><small>What's SUMIYA COFFEE?</small></p>
        </header>
        <main>
            <div><img src="images/logo.png" alt="墨谷珈琲店ロゴ"></div>
            <h2>コンセプト</h2>
            <p>手紙喫茶　墨谷珈琲店は「手紙を書く場所」を提供する喫茶店です。</p><!--paragraph-->
            <h2>アクセス</h2>
            <table>
                <caption></caption>
                <tr>
                    <td rowspan="2"><img src="images/sitemap.png" alt="アクセスマップ"></td><td>〒000-0000<br>東京都○○区○○00-00</td>
                </tr>
                <tr>
                    <td>大江戸線蔵前駅より〇分<br>浅草線蔵前駅より〇分</td>
                </tr>
            </table>
            <h2>営業時間</h2>
			<dl><!--discription list / 説明リスト-->
				<dt>月・火・木・金</dt><!--discription term/ term: 期間、用語-->
				<dd><!--definition discription / definition: 定義-->
					<p>11:00～18:00</p>
				</dd>
				<dt>土・日</dt>
				<dd>
					<p>10:00～18:30</p>
				</dd>
				<dt>定休日</dt>
				<dd>
					<p>水・祝</p>
				</dd>
			</dl>
        </main>
        <footer>
            <p><small>©2022 SumiyaCoffee </small></p>
        </footer>
    </body>
</html>
#54810dt "utf-8";

body,header,main,footer,div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	background-color: #81320d;
	background-color: #ddd;
}

header {
	width: 800px;
	margin: 0 auto;
	padding: 20px;
	border-left: 15px solid  rgb(129, 50, 13);
	border-right: 15px solid  rgb(129, 50, 13);
	background-color: #81320d;
}

header h1 {
	color: #fff;
	font-size: 200%;
	text-align: center;
}

header p {
	text-align: center;
	color: #fff;
}

header small {
	font-size: 60%;
}

main {
	padding: 20px;
	width: 800px;
	margin: 0 auto;
	border-left: 15px #81320d solid;
	border-right: 15px #81320d solid;
	background-color: #eff9d5;
}

main h2 {
	font-size: 150%;
	color: #54810d;
	padding: 10px 10px 10px 20px;
	margin: 20px 0;
	border-left: 20px #81320d solid;
	border-top: 2px #81320d solid;
	border-bottom: 2px #81320d solid;
}

main div {
	text-align: center;
}

main p {
	font-size: 100%;
	padding-left: 30px;
}

main p span {
	font-size: 120%;
}

main ul {
	font-size: 160%;
	padding-left: 60px;
}

main ol {
	font-size: 160%;
	padding-left: 60px;
}

footer {
	width: 800px;
	margin: 0 auto;
	padding: 20px;
	border-left: 15px solid  rgb(129, 50, 13);
	border-right: 15px solid  rgb(129, 50, 13);
	background-color: #81320d;
	line-height: 3;
	text-align: center;
}

footer p small {
	font-size: 80%;
	color: #fff;
}
手紙喫茶墨谷珈琲店とはのWebページ

メモ

  • padding, border, margin の幅がずれてしまい、調整に苦労した。
  • 今回はHTMLでテーブルを使用したが、今後CSSでのレイアウトに切り替える。
学科 CSS基礎① | DEAUアカデミー WEBデザイナー養成科（短時間）A教室
samplesdl.me

-本日のアジェンダ-

1限目
学科 CSS基礎①
CSSの読み込み方について

2限目
学科 CSS基礎①
FTPサーバーについて

3限目
学科 CSS基礎①
FTPサーバーの取り扱いについて

4限目
学科 CSS基礎①
HTMLのまとめ

5限目
学科 CSS基礎①
過去の訓練の復習

本日のテーマ

サーバーへのアップロード方法を確認しましょう

CSSの読み込み方について

CSSを書く方法（場所）は3パターンあります。それぞれメリット・デメリットがあるため、この3パターンを組み合わせてCSSを書いていくのが良いでしょう。

パターン①「 外部ファイル 」

1つめの方法は、外部ファイルのCSSから読み込む方法です。つまり、CSSファイルを別に作り、HTMLファイルから読み込むということです。この作成したCSSファイルは外部スタイルシート（外部CSS）と呼ばれます。ウェブサイトを作る時にはこれが最も一般的な方法です。

パターン②「 styleタグ」

2つめの方法はHTMLファイルのheadタグ内に<style>〜</style>を書き、その中にCSSを書く方法です。

パターン③「 style属性を使う 」

3つめは、HTMLのタグにstyle属性を書く方法です。文字にサクッと色をつけたり、線を引いたりするときには便利ですが、タグにいちいち書き込む必要がありやや手間がかかります。また、後からまとめてデザインを変更することもできません。

ワンポイントアドバイス

基本的には外部ファイルで作成しましょう。また外部ファイルは1ファイルにまとめるのがベストですが、管理や運営方法を考えて使い分けましょう。

参考サイト

FTPサーバーについて

FTPサーバとは、FTPを使用してファイルの送受信を行うサーバのことである。 ファイルのアップロード・ダウンロードにはFTPクライアントソフトウェアが必要だが、最近のウェブブラウザにはこれが組み込まれている場合が多い。 

ワンポイントアドバイス

サーバーについては、案件ごとにどのサーバーを利用しているかしっかりと確認を取ってから制作依頼を受けましょう。サーバーによって基本的な設定が異なったり細かい違いがありますので、確認作業をしっかりと行いましょう。

参考サイト

本日の課題①

FTP（ffftp）を用いてサンプルファイルをサーバーにアップロードしてください。
アップロード先は、サブフォルダを設定してください。

本日の課題②

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

本日の課題②

過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。