Private Fantasticのホームページへ

[初めてのｗｅｂサイト作成レッスン９]
ＣＳＳをＨＴＭＬに組み込む方法とフォント他

メニュー

🌹レッスン９🌹

ＣＳＳをＨＴＭＬに組み込む方法、基本的な色、フォント他

目次

1.　ＣＳＳをＨＴＭＬに組み込む方法
2.　ＲＧＢ１６進数表記
3.　コアフォント

　🌻パソコンのブラウザはGoogle Chromeを使用しています。

1.　ＣＳＳをＨＴＭＬに組み込む方法には３つあります。

★1⃣ｓｔｙｌｅ要素を使用し、ｈｅａｄ内に指定する方法

【HTML】

<html>
<head>

<style>
　　h1 {
	color: blue;
	}
</style>

</head>
</html>

★2⃣ｓｔｙｌｅ属性を使用し、要素に直接指定する方法

【HTML】

<body>

<h1 style="color: blue;">スタイルシート</h1>

</body>

★3⃣ｌｉｎｋ要素を使用し、外部ＣＳＳファイルをリンクさせる方法

イメージ図

外部CSS

ＨＴＭＬにリンクを設定すると、1つのＣＳＳファイルで複数のＨＴＭＬファイルに対してデザインの統一や管理がしやすくなります。当サイトもこの方法で行っています。

よろしければ、一緒にやって確認してみましょう！

①エディタを立ち上げ新規でファイルを作成します。
レッスン1の「ＨＴＭＬの基本コード」をコピペ
名前を付けて保存（ファイル名は自由ですが私は「ｆｏｎｔ.ｈｔｍｌ」で保存しました。

＜ｈｅａｄ＞～＜/ｈｅａｄ＞の間に以下の桃色のコードを入力します。

【HTML】

<html>
<head>

<link rel="stylesheet" href="style.css" >

</head>
</html>

上書き保存します。これで「ｓｔｙｌｅ.ｃｓｓ」というファイルにリンクする設定ができました。

★ＣＳＳファイルを作成

１.メモ帳を開きます。➡文字コードはｕｔｆ－８なので、以下を入力します。

【CSS】


@charset "utf-8"

２.ファイル➡名前を付けて保存します。

ファイル名を入力➡文字コードを選ぶ➡保存

外部CSS

３.　すぐに必要となるであろうことから、設定します。

①ページ全体の文字の色を指定します。

②見出しの色を指定します。

③＜ｐ＞の色を指定します。
（＜ｐ＞の色を指定しない場合はｂｏｄｙのｂｌａｃｋで表示されます。）

【CSS】

@charset "utf-8"

body {
	color: black;
	}
h1{
	color: navy;
	}
p{
	color: black;
	}


２.　ＣＳＳで使用できる基本的な色と、ＲＧＢ１６進数表記

（ご使用のデバイスにより若干色味が違って見えることがあります。）

外部CSS

例えば、黒色を指定する場合

「ｂｌａｃｋ」でもいいし、「＃００００００」でもいいし、「r000 g000 b000」でもいいです！

ｗｅｂセーフカラー

256色の8ビットカラーのうちWindowsでもMacintoshでも共通した216色で、どちらのOS環境でもほぼ同じように表示されます。

また、インターネットでも紹介しているサイトがありますので、良かったら検索してみてください。

④フォントを指定します。

３.　コアフォント

WindowsでもMacintoshでも共通して使えるフォント

外部CSS

【HTML】

<body>

<h1>コアフォント</h1>
<p id="ariai">Ariai</p>
<p id="ariaiblack">Ariai Black</p>
<p id="comicsans">Comic Sans MS</p>
<p id="courier">Courier New</p>
<p id="times">Times New Roman</p>
<p id="georgia">Georgia</p>
<p id="impact">Impact</p>
<p id="trebuchet">Trebuchet MS</p>
<p id="verdana">Verdana</p>

</body>

【CSS】

@charset "utf-8"
body {
	color: black;
	}

#ariai{
	font-family: "Ariai","Meiryo",游明朝;
	}
#ariaiblack{
	font-family: "Ariai Black","Meiryo",游明朝;
	}
#comicsans{
	font-family: "Comic Sans MS","Meiryo",游明朝;
	}
#courier{
	font-family: "Courier New","Meiryo",游明朝;
	}
#times{
	font-family: "Times New Roman","Meiryo",游明朝;
	}
#georgia{
	font-family: "Georgia","Meiryo",游明朝;
	}
#impact{
	font-family: "Impact","Meiryo",游明朝;
	}
#trebuchet{
	font-family: "Trebuchet MS","Meiryo",游明朝;
	}
#verdana{
	font-family: "Verdana","Meiryo",游明朝;
	}

異なったＯＳのユーザーに対応できるように、ゴシック系、明朝系の複数フォントを指定します。

最初に指定したフォントから優先的に表示されます。

⑤フォントサイズの指定をします。（ｐｘやｐｔで指定します。）

既に色の指定をしたＣＳＳに追加で記述します。

フォントサイズの指定しない場合は、自動で＜ｈ＞の数値が小さい方がフォントサイズは大きくなります。

※文章は＜ｐ＞で入力しますが、ちなみにＷｏｒｄの初期設定値は10.5pt、Ｅｘｃｅｌは11ptとなっています！これより小さいと見づらくなります。

【CSS】

@charset "utf-8"
body {
	color: black;
	}
h1{
	color: navy;
	fontsize: 30px;
	}
p{
	color: blak;
	fontsize: 20px;
	}

「HTML」「CSS」をそれぞれ、ここまで入力して上書き保存します。

ブラウザで確認します。④の画像のように、コアフォントは表示されたかな？



★まとめ

デバイスによってフォントを指定しても、効かない時があるので、複数指定する必要があります。

フォントの指定には優先順位があります。

同じフォントを使用す場合は、タグをまとめて指定するといいかもしれませんね！

次回レッスン10は、「文字の装飾のやり方」をアップロードする予定です！

See you again Take care
(^.^/)))~~~bye!!


TOP