第8回 授業ページ

今回の授業の内容
Step1. 背景色とアンダーラインを設定する。
Step2. 学生ブログを作成する。

●Step1. 背景色とアンダーラインを設定する。

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

body {
 background: linear-gradient(to top right, green, lightgreen);
}

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

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


</style>

</head>
<body>

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

</body>
</html>


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


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

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

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

５．作成したテキストを右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
６．下の内容をテキストにコピーして貼り付ける。
７．学んだHTMLやCSSを使用した学生ブログを作成する。
８．テキストを閉じる。
９．「保存する(S)」をクリック
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<style type="text/css">



</style>
</head>
<body>
<br>
<br>



<br>
<br>
<center>
<button type="button" onclick="window.history.back();" style="width:80%;height:60px;font-size:40px;">前のページに戻る</button>
</center>
<br>
<br>
<br>
<br>
</body>
</html>


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



（オマケ）今まで学んできた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>


※「色①」にはリンクの文字の色のスペルやコードを入力してください
※「色②」にはリンクの背景の色のスペルやコードを入力してください
文章にアンダーラインを引く <style type="text/css">

p1 {
background: linear-gradient(transparent パーセント%, 色);
}

</style>


※「パーセント」にはアンダーラインの濃さを表すパーセントの数字を入力してください（例：10）
※「色」にはアンダーラインの色のスペルやコードを入力してください（例：yellow）
ボタンを作成する <style type="text/css">

.btn1 {
padding: 10px 30px;
text-decoration: none;
width: ボタンの横幅px;
height: ボタンの縦幅px;
color: ボタンの文字の色;
background-color: lボタンの背景の色;
border-radius: ボタンの丸みpx;
}

</style>


リンクを以下のように書くとリンクがボタンに変わります。
<a href="リンク先のアドレス" class="btn1">コメント</a>


※「ボタンの横幅」には横幅の長さを表す数字を入力してください。（例：200）
※「ボタンの縦幅」には縦幅の長さを表す数字を入力してください（例：30）
※「ボタンの文字の色」には文字の色のスペルやコードを入力してください。（例：black）
※「ボタンの背景の色」には背景の色のスペルやコードを入力してください。（例：lightgreen）
※「ボタンの丸み」には丸みを表す数字を入力してください（例：0）

ボタンのデザインは以下のサイトから見つけることもできます。
cssbuttons.app


（オマケ）今まで学んできた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






前のページに戻る