第4回 授業ページ

今回の授業の内容
Step1. 背景に画像を表示する
Step2. 学生ブログを作成する



●Step1. 背景に画像を表示する

1.「CSS教育_202○」フォルダーの中で右クリックする
2.「新規作成(X)」→「テキスト ドキュメント」をクリック
3.テキストのファイル名(新しいテキスト ドキュメント.txt)をクリック
4.「lesson04.html」を入力して「Enter」キーを押す。
5.作成したテキストを右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
6.下の内容をテキストにコピーして貼り付ける。
  ※画像ファイル名を実際のファイル名(gazou.jpg等)に置き換えてください。
7.テキストを閉じる。
8.「保存する(S)」をクリック
9.作成したテキストをダブルクリックしてブラウザで表示する。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">

<style type="text/css">

body {
 background-image: url(画像ファイル名);
}

</style>

</head>
<body>

<font size="6">このページの背景には画像が表示されています。</font>

</body>
</html>


背景に画像を指定することが出来ましたが、背景の色が濃いため文字が見難くなりました。
背景の画像の色を薄くしましょう。


10.作成したテキストを右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
11.下の内容の赤い文字の2行を追記する。
12.テキストを閉じる。
13.「保存する(S)」をクリック
14.作成したテキストをダブルクリックしてブラウザで表示する。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<style type="text/css">

body {
 background-image: url(画像ファイル名);
 background-color:rgba(255,255,255,0.5);
 background-blend-mode:lighten;
}

</style>

</head>
<body>

<font size="6">このページの背景には画像が表示されています。</font>

</body>
</html>


背景が薄くなって文字が見やすくなりました。
以下の赤い数字を変更すると背景の色の濃さを変更することが出来ます。
数字が0に近づくと濃くなり、1に近づくと薄くなります。
background-color:rgba(255,255,255,0.5);

●Step2. 学生ブログを作成する

1.前回の授業で作成したテキスト(3nen出席番号の数字ban1.html)を開く。
2.学んだHTMLやCSSを使用した学生ブログを作成する。
3.テキストを閉じる。
4.「保存する(S)」をクリック

5.こちらをクリックしてアップロード用サイトに移動する。
6.ドメイン名とパスワードを入力して「ログイン」をクリック
ドメイン名chibahakkyo.sakura.ne.jp、パスワードCE758DaGt/Wn
7.「ファイルマネージャー」をクリック
8.「lesson_2022_3nen」をダブルクリック
9.「アップロード」をクリック
10.「ファイルを追加」をクリック
11.作成したページ(3nen〇ban1.html)を選択して「開く(O)」をクリック
12.「アップロード開始」をクリック
13.「同名のファイルを上書きしてアップロードしますか?」と表示されたら「はい」をクリック
※画像も同じようにアップロードしてください。



(オマケ)今まで学んできたCSS一覧

※色のスペルやコードは原色大辞典から見つけてください。

背景色を変える <style type="text/css">

body {
background: 色のスペルやコード;
}

</style>
背景に画像を表示する。 <style type="text/css">

body {
background-image: url(画像のファイル名);
background-color:rgba(255,255,255,画像の濃さ);
background-blend-mode:lighten;
}

</style>

※「画像の濃さ」には0から1までの数字を入力してください。
例)0.1:濃い
例)0.9:薄い
背景色をグラデーション表示する <style type="text/css">

body {
background: linear-gradient(方向, 色①, 色②);
}

</style>

※「方向」にはグラデーションさせる向きのスペルを入力してください
to bottom:上から下
to top:下から上
to right:左から右
to left:右から左

※「色①」「色②」には表示したい色のスペルやコードを入力してください
クリックする前のリンクの色を変える <style type="text/css">

a:link {
color: 色①;
background-color: 色②;
}

</style>

※「色①」にはリンクの文字の色のスペルやコードを入力してください
※「色②」にはリンクの背景の色のスペルやコードを入力してください
クリック済みのリンクの色を変える <style type="text/css">

a:visited {
color: 色①;
background-color: 色②;
}

</style>

※「色①」にはリンクの文字の色のスペルやコードを入力してください
※「色②」にはリンクの背景の色のスペルやコードを入力してください
マウスカーソルを乗せた時のリンクの色を変える <style type="text/css">

a:hover {
color: 色①;
background-color: 色②;
}

</style>

※「色①」にはリンクの文字の色のスペルやコードを入力してください
※「色②」にはリンクの背景の色のスペルやコードを入力してください


(オマケ)今まで学んできたHTML一覧

文字を大きくする <font size="6">文字の大きさ</font>
文字の色を変える <font color="red">文字の色</font>

※色のスペル一覧
red
blue
green
yellow
pink
purple
brown
black
white
……等々
画像を貼りつける <img src="gazou.jpg">

※横幅を変更したい場合
<img src="gazou.jpg" width="100">

※高さを変更したい場合
<img src="gazou.jpg" height="100">
リンクを貼りつける <a href="lesson.html">リンク</a>
文字を中央に寄せる <center>中央寄せ</center>
改行する 改行
<br>
改行
表を作成する <table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>



1 2
3 4


セルを結合する (水平方向) <table border="1">
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>



1
3 4


セルを結合する (垂直方向) <table border="1">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>


1 2
4






前のページに戻る