第1回 授業ページ

●Step0. 授業ページへのアクセス方法


「Microsoft Edge」を起動して、アドレスバーに以下のアドレスを入力してください。
http://chibahakkyo.net/lesson/2022/3/lesson.html



アドレスの入力後、Enterキーを押したら授業ページに移動します。
※今後何回もアクセスするのでブラウザのお気に入りに追加しましょう。

●Step1. HTMLとCSSの違い


ホームページを作成する手段にはHTMLやCSSがあります。
それぞれの違いを学びましょう。

HTMLとは?
Hyper Text Markup Languageの略。
文字、表、リンク、画像といったホームページのパーツを作るための言語です。
皆さんがこれまで学習してきた作成方法がHTMLです。

CSSとは?
Cascading Style Sheetの略。
ホームページのレイアウトを細かく指定して飾るための言語です。
要するに、ホームページをかっこよくすることが出来ます。
今年度はCSSを重点的に学んでいきます。


CSSは装飾に特化した言語です。
例えば文字の大きさを変更するだけでも以下のような差があります。
CSSの方がサイズを細かく指定することが出来ますね。
HTMLでfont sizeを4にするとこのようになります。
HTMLでfont sizeを5にするとこのようになります。

CSSでfont sizeを18pxにするとこのようになります。

CSSでfont sizeを19pxにするとこのようになります。

CSSでfont sizeを20pxにするとこのようになります。

CSSでfont sizeを21pxにするとこのようになります。

CSSでfont sizeを22pxにするとこのようになります。

CSSでfont sizeを23pxにするとこのようになります。

CSSでfont sizeを24pxにするとこのようになります。

CSSでfont sizeを25pxにするとこのようになります。



●Step2. HTMLで背景色を変更する。

1.デスクトップ上で右クリックする。
2.「新規作成(X)」→「フォルダー(F)」をクリックする。
3.「新しいフォルダー」の名前をクリックして「CSS教育_202○」に変更する。
※「202○」には今年度の年の数を入力してください。


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

<font size="6">このページの背景の色はライトグリーンです。</font>

</body>
</html>


HTMLではbodyの中にbgcolorを入れることで背景の色を指定することが出来ます。
例)<body bgcolor="lightgreen">
しかし、HTMLは1つの色しか指定することが出来ません。
CSSで背景の色を指定してみましょう。


●Step3. CSSで背景色を変更する。


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

<style type="text/css">
html {
	min-height: 100%;
}
body {
	background: linear-gradient(to top right, green, lightgreen);
}
</style>

</head>
<body>

<font size="6">このページの背景の色はライトグリーンです。</font>

</body>
</html>



前のページに戻る