第9回 授業ページ

今回の授業の内容
Step1. 文字を装飾する。
Step2. 学生ブログを作成する。

●Step1. 文字を装飾する。

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

moji1 {
 font-size: 10px;
 color: red;
}

moji2 {
 font-size: 15px;
 color: blue;
 font-weight: bold;
}

moji3 {
 font-size: 20px;
 color: green;
 font-style: italic;
}

moji4 {
 font-size: 25px;
 color: purple;
 text-decoration: line-through
}


</style>

</head>
<body>


<moji1>この文章は普通の文章です。</moji1><br>
<moji2>この文章は文字が太いです。</moji2><br>
<moji3>この文章は文字が細いです。</moji3><br>
<moji4>この文章は取り消し線が引かれています。</moji4><br>


</body>
</html>


<style type="text/css">～</style>に文章の装飾を設定することが出来ます。
それぞれの記述がどの装飾に対応しているのか見てみましょう。
※色のスペルやコードは原色大辞典から見つけてください。 
<style type="text/css">
moji1 {　　　　　　　　　　　
 font-size: 10px;　　　　　　　　　　文字の大きさを変更します。
 color: red;　　　　　　　　　　　　文字の色を変更します。
 font-weight: bold;　　　　　　　　　文字を太くします。
 font-style: italic;　　　　　　　　文字を細くします。
 text-decoration: line-through　　　文章に取り消し線を引きます。
}
</style>


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

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

５．こちらをクリックしてアップロード用サイトに移動する。
６．ドメイン名とパスワードを入力して「ログイン」をクリック
ドメイン名「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 {
cursor: カーソルの形;
}

</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>


文章を以下のように書くとアンダーラインが引かれます。
<p1>文章</p1>


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

.btn1 {
padding: 10px 30px;
text-decoration: none;
width: ボタンの横幅px;
height: ボタンの縦幅px;
color: ボタンの文字の色;
background-color: ボタンの背景の色;
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






前のページに戻る