第14回 授業ページ

今回の授業の内容
Step1. ページ全体の背景色を変更する。
Step2. 特定の場所の背景色を変更する。

●Step1. ページ全体の背景色を変更する。

１．「CSS教育_202○」フォルダーの中で右クリックする
２．「新規作成（X)」→「テキスト ドキュメント」をクリック
３．テキストのファイル名（新しいテキスト ドキュメント.txt）をクリック
４．下のファイル名を入力して「Enter」キーを押す。

ファイル名：3nen出席番号の数字ban4.html
→出席番号1番の場合は「3nen1ban4.html」を入力してください。

５．作成したテキストを右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
６．下の内容をテキストにコピーして貼り付ける。
７．テキストを閉じる。
８．「保存する(S)」をクリック
９．作成したテキストをダブルクリックしてブラウザで表示する。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">

<style type="text/css">
body {
 background: lightgreen;
}
</style>

</head>
<body>

<font size="6">このページの背景の色はライトグリーンです。</font>

</body>
</html>


●Step2. 特定の場所の背景色を変更する。

１．作成したテキストを右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
２．赤文字の箇所をコピーして貼り付ける。
３．テキストを閉じる。
４．「保存する(S)」をクリック
５．作成したテキストをダブルクリックしてブラウザで表示する。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">

<style type="text/css">
body {
 background: lightgreen;
}

.back1 {
 background-color: lightblue;
}

.back2 {
 background-color: yellow;
}

</style>

</head>
<body>

<font size="6">このページの背景の色はライトグリーンです。</font>

<br>
<div class="back1">
<font size="6">この場所の背景の色はライトブルーです。</font><br>
</div>

<br>
<div class="back2">
<font size="6">この場所の<br>
背景の色は<br>
イエローです。</font><br>
<div>


</body>
</html>


６．こちらをクリックしてアップロード用サイトに移動する。
７．ドメイン名とパスワードを入力して「ログイン」をクリック
ドメイン名「chibahakkyo.sakura.ne.jp」、パスワード「CE758DaGt/Wn」
８．「ファイルマネージャー」をクリック
９．「lesson_2022_3nen」をダブルクリック
１０．「アップロード」をクリック
１１．「ファイルを追加」をクリック
１２．作成したページ（3nen〇ban4.html）を選択して「開く(O)」をクリック
１３．「アップロード開始」をクリック
１４．「同名のファイルを上書きしてアップロードしますか？」と表示されたら「はい」をクリック


前のページに戻る