第5回 授業ページ

今回の授業の内容
Step1. カーソルの形を変える。
Step2. 学生ブログを完成する。



●Step1. カーソルの形を変える。

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

body {
 cursor: pointer;
}

</style>
</head>
<body>

<font size="6">このページはカーソルの形が変わります。</font>

</body>
</html>



カーソルの形がからに変わりました。
以下にカーソルの形の一覧を示します。
pointerを変更してみましょう。


default
pointer
crosshair
move
text


●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(画像のファイル名);
}

</style>
背景色をグラデーション表示する <style type="text/css">

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

</style>


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

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

body {
cusrsor: カーソルの形;
}

</style>


※「カーソルの形」には表示させたい形に対応した単語を入力してください。
default:

pointer:

crosshair:

move:

text:

クリックする前のリンクの色を変える <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






前のページに戻る