WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

フォント

googlefonts.github.io

デモ
http://efu.sakura.ne.jp/web/font-family/

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>font-family</title>
	<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<section class="section section--01">
		<h1>ポラーノの広場</h1>
		<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
		<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
		<p class="font_detail">Noto Sans CJK JP</p>
	</section>
	<section class="section section--03">
		<h1>ポラーノの広場</h1>
		<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
		<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
		<p class="font_detail">Rounded M+ 1c</p>
	</section>
	<section class="section section--04">
		<h1>ポラーノの広場</h1>
		<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
		<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
		<p class="font_detail">はんなり明朝</p>
	</section>
	<section class="section section--05">
		<h1>ポラーノの広場</h1>
		<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
		<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
		<p class="font_detail">さわらび明朝</p>
	</section>
	<section class="section section--06">
		<h1>ポラーノの広場</h1>
		<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
		<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
		<p class="font_detail">さわらびゴシック</p>
	</section>
	<section class="section section--07">
		<h1>ポラーノの広場</h1>
		<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
		<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
		<p class="font_detail">こころ明朝</p>
	</section>
	<section class="section section--08">
		<h1>ポラーノの広場</h1>
		<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
		<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
		<p class="font_detail">M+ 1p</p>
	</section>
	<div class=" rl">
	<section class="section section--01">
			<h1>ポラーノの広場</h1>
			<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
			<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
			<p class="font_detail">Noto Sans CJK JP</p>
		</section>
		<section class="section section--03">
			<h1>ポラーノの広場</h1>
			<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
			<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
			<p class="font_detail">Rounded M+ 1c</p>
		</section>
		<section class="section section--04">
			<h1>ポラーノの広場</h1>
			<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
			<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
			<p class="font_detail">はんなり明朝</p>
		</section>
		<section class="section section--07">
			<h1>ポラーノの広場</h1>
			<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
			<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
			<p class="font_detail">こころ明朝</p>
		</section>
		<section class="section section--08">
			<h1>ポラーノの広場</h1>
			<p class="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
			<p class="text">またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
			<p class="font_detail">M+ 1p</p>
		</section>
	</div>
</body>
</html>
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);


html, body, section, h1, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}

body {
  margin: 50px 0;
}

.section {
  width: 600px;
  margin: 0 auto 70px;
}

.section--01 {
  font-family: "Noto Sans Japanese", sans-serif;
}
.section--02 {
  font-family: "Noto Sans Japanese", serif;
}
.section--03 {
  font-family: "Rounded Mplus 1c", sans-serif;
}
.section--04 {
  font-family: "Hannari", serif;
}
.section--05 {
  font-family: "Sawarabi Mincho", serif;
}
.section--06 {
  font-family: "Sawarabi Gothic", sans-serif;
}
.section--07 {
  font-family: "Kokoro", serif;
}
.section--08 {
  font-family: "Mplus 1p", sans-serif;
}

h1 {
  font-size: 30px;
  margin-bottom: 26px;
  font-weight: 500;
}

.text {
  line-height: 1.4;
  margin-bottom: 1em;
  font-size: 14px;
}

.font_detail {
  font-size: 12px;
}

.rl {
  width: 600px;
  margin: 0 auto;
  font-size: 0;
}

.rl section {
  width: 300px;
  display: inline-block;
  -webkit-writing-mode: vertical-rl;
  ms-writing-mode: tb-rl;
}

.rl h1 {
  margin-left: 25px;
}

.rl .text {
  margin-left: 1em;
  line-height: 1.6;
}