第6回 授業ページ

今回の授業の内容
Step1. カーソルの形を変える。
Step2. 文章にアンダーラインを引く。

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

１．「CSS教育_202○」フォルダーの中で右クリックする
２．「新規作成（X)」→「テキスト ドキュメント」をクリック
３．テキストのファイル名（新しいテキスト ドキュメント.txt）をクリック
４．「lesson06.html」を入力して「Enter」キーを押す。
５．作成したテキストを右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
６．下の内容をテキストにコピーして貼り付ける。
７．テキストを閉じる。
８．「保存する(S)」をクリック
９．作成したテキストをダブルクリックしてブラウザで表示する。
<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. 文章にアンダーラインを引く。

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

body {
 background-color: #c0c0c0;
}

p1 {
 background: linear-gradient(transparent 10%, yellow);
}

p2 {
 background: linear-gradient(transparent 10%, pink);
}

p3 {
 background: linear-gradient(transparent 10%, lightgreen);
}

</style>

</head>
<body>

<p1><font size="6">この文章には黄色のアンダーラインが引かれます。</font></p1><br>
<p2><font size="6">この文章にはピンク色のアンダーラインが引かれます。</font></p2><br>
<p3><font size="6">この文章には黄緑色のアンダーラインが引かれます。</font></p3>

</body>
</html>


それぞれの文章にアンダーラインが引かれました。
headの中のp1の設定を変更すると、p1で囲まれた文章のアンダーラインが変わります。
同じように、
headの中のp2の設定を変更すると、p2で囲まれた文章のアンダーラインが変わります。

パーセント（アンダーラインの太さ）や色の名前を変更してみましょう。
※色のスペルやコードは原色大辞典から見つけてください。


前のページに戻る