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

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

※有料会員になるとこの動画をご利用いただけます

詳しい説明を読む

＃06:フォントデザイン

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

欧文フォント

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

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

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

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

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

日本語フォント

明朝
筆でかいたような書体です。
やわらかい、少し高級感のあるイメージをだすことができます。

ゴシック
角ばった、直線で構成されたフォントです。サンセリフ体に近いものになります。

丸ゴシック
ゴシック体を角丸にしたものです。やわらかい、やさしいイメージ作りをすることができます。

WEBフォント

ブラウザで表示できるフォント
現在、Googleが提供しているGoogleFontsをはじめ、無料から有料まで、多くのWEBフォントが提供されている

参考になるWebサイト

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

プログラミング学習 > Webデザイン入門編 > Webデザイン入門編1: 基本的なデザインルールを知ろう > フォントデザイン

ログインすると採点できます

コードの実行

有料会員になるとエンジニアに質問ができます

出力タイプ：