#06:フォントデザイン

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>自己紹介</title>

	<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru|Noto+Serif+JP" rel="stylesheet">

	<style>
	h1{
		font-family: 'Kosugi Maru', sans-serif;
	}
	p{
		font-family: 'Noto Serif JP', serif;
	}
	</style>
</head>

<body>
	<h1>六村リオ</h1>
	<p>趣味はプログラミングと食べることで、絵が壊滅的に下手。Pythonをこよなく愛する、明るい普通の女子高生。</p>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>自己紹介</title>

	<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru|Noto+Serif+JP" rel="stylesheet">

	<style>
	h1{
		font-family: 'Kosugi Maru', sans-serif;
	}
	p{
		font-family: 'Noto Serif JP', serif;
	}
	</style>
</head>

<body>
	<h1>六村リオ</h1>
	<p>趣味はプログラミングと食べることで、絵が壊滅的に下手。Pythonをこよなく愛する、明るい普通の女子高生。</p>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Project Nyaan</title>

	<style>
	h1{
		font-family: 'Ubuntu', sans-serif;
	}
	p{
		font-family: 'Pacifico', cursive;
	}
	</style>
</head>

<body>
	<h1>hello world</h1>
	<p>Project Nyaan web page</p>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Project Nyaan</title>

	<style>
	h1{
		font-family: 'Ubuntu', sans-serif;
	}
	p{
		font-family: 'Pacifico', cursive;
	}
	</style>
</head>

<body>
	<h1>hello world</h1>
	<p>Project Nyaan web page</p>
</body>

</html>

この動画を見るにはpaiza会員登録のうえ
有料会員登録が必要です

無料会員登録して始める

★ 実技1

実技課題「WEBフォントを使おう」

右側のコードエリアに表示されているhtmlを修正して、「hello world」は "Ubuntu" フォント、pタグで囲まれた文字は "Pacifico"フォントで表示されるようにしてください。

Google Fonts
https://fonts.google.com/

コードの実行をして、エラーが出なければ、演習課題クリアです！

期待する出力値

hello world

Project Nyaan web page

コンセプト・ターゲットに合わせたフォント選びができるようになりましょう。

欧文フォント

セリフ
セリフのある書体です。
小説のように長くよませる文章や、高級感をだすときはセリフ体をよくつかいます。

サンセリフ
セリフがない文字です。読みやすく視認性が高いフォントになります。

ハンドライト
手書きでかいたようなフォントです。
やわらかい、ルーズなイメージを作ることができます。

スクリプト
筆記体です。格調高いイメージをだすときなどに使います。

ディスプレイ
いろいろとデザインされたフォントで、その他多数という感じです。