第10回 授業ページ

今回の授業の内容
Step1. 文章の位置を指定する。
Step2. 画像の位置を指定する。
Step3. 学生ブログを作成する。

●Step1. 文章の位置を指定する。

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


.moji1 {
 text-align:center;
}

.moji2 {
 text-align:left;
}

.moji3 {
 text-align:right;
}


</style>

</head>
<body>


<p class="moji1">1番目の文章はどこに表示されますか？</p><br>
<p class="moji2">2番目の文章はどこに表示されますか？</p><br>
<p class="moji3">3番目の文章はどこに表示されますか？</p><br>


</body>
</html>


<style type="text/css">～</style>に文章の位置を設定することが出来ます。
※「moji1」～「moji3」には好きな単語を記載してください。
.moji1 {
 text-align:center;　　　　　　文章を中央に表示します。
}

.moji2 {
 text-align:left;　　　　　　　文章を左側に表示します。
}

.moji3 {
 text-align:right;　　　　　　文章を右側に表示します。
}


<body>～</body>には以下のように記載します。
※「moji1」には好きな単語を記載してください。
<p class="moji1">文章</p>


●Step2. 画像の位置を指定する。

文章と同様に画像の位置も自由に指定することが出来ます。
１．「lesson10.html」を右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
２．下の内容の赤文字の部分をテキストにコピーして貼り付ける。
　　※画像の名前は自由に変更してください。
３．テキストを閉じる。
４．「保存する(S)」をクリック
５．作成したテキストをダブルクリックしてブラウザで表示する。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<style type="text/css">

.moji1 {
 text-align:center;
}

.moji2 {
 text-align:left;
}

.moji3 {
 text-align:right;
}

.gazou1 {
 text-align:center;
}

.gazou2 {
 text-align:left;
}

.gazou3 {
 text-align:right;
}

</style>

</head>
<body>


<p class="moji1">1番目の文章はどこに表示されますか？></p><br>
<p class="moji2">2番目の文章はどこに表示されますか？</p><br>
<p class="moji3">3番目の文章はどこに表示されますか？</p><br>

<div class="gazou1"><img src="image01.jpg" width="200"></div><br>
<div class="gazou2"><img src="image02.jpg" width="200"></div><br>
<div class="gazou3"><img src="image03.jpg" width="200"></div><br>


</body>
</html>


<style type="text/css">～</style>に画像の位置を設定することが出来ます。
※「gazou1」～「gazou3」には好きな単語を記載してください。
.gazou1 {
 text-align:center;　　　　　　画像を中央に表示します。
}

.gazou2 {
 text-align:left;　　　　　　　画像を左側に表示します。
}

.gazou3 {
 text-align:right;　　　　　　画像を右側に表示します。
}


<body>～</body>には以下のように記載します。
※「gazou1」には好きな単語を記載してください。
<div class="gazou1"><img src="image01.jpg" width="200"></div>


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

１．前回の授業で作成したテキスト（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
文章の大きさを変更する。 <style type="text/css">

p1 {
font-size: 数字px;
}

</style>


文章を以下のように書くと文字の大きさを変更できます。
<p1>文章</p1>


※「数字」には文字の大きさを表す数字を入力してください（例：10）
文章の色を変更する。 <style type="text/css">

p1 {
color: 色px;
}

</style>


文章を以下のように書くと文字の色を変更できます。
<p1>文章</p1>


※「色」には文字の大きさを表す数字を入力してください（例：10）

※色のスペル一覧
red
blue
green
yellow
pink
purple
brown
black
white
……等々
文字を太くする。 <style type="text/css">

p1 {
font-weight: bold;
}

</style>


文章を以下のように書くと文字を太くできます。
<p1>文章</p1>
文字を細くする。 <style type="text/css">

p1 {
font-style: italic;
}

</style>


文章を以下のように書くと文字を細くできます。
<p1>文章</p1>


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






前のページに戻る