素材 | HTML-CSS 入門講座 | 情報デザイン工房濱屋

WebParts-11
素材

P11.1 はじめに

P11.1.1 概要

素材は、あらかじめ用意されている素材です。

アイコン: アイコン（ピクトグラム）素材です。
フォント: フォント素材です。

P11.2 アイコン

P11.2.1 Font Awesome v5

(1) 説明

Font Awesome v5 の使用法を説明します。
本サンプル作成時の最新は「Font Awesome v6」です。「Font Awesome v6」を使用する場合は「Font Awesome v6」の説明を参照してください。

(2) 表示形式

使用法のサンプルを確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

アイコンフォント

アイコン（Font Awesome）
公式サイト：Font Awesome（https://fontawesome.com/）
公式サイト：Font Awesome Search v5 Icons（https://fontawesome.com/v5/search/）
CDN（CSS）：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css
CDN（CSS）：https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css

(4) 実装手順

「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
head タグ内に「all.css」と「font-awesome-animation.css」の link タグ（※1）を記述してください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。表示形態に合わせてスタイル定義を選択してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。表示する形態に合わせて表示定義を選択してください。アイコン表示タグは「Font Awesome Search v5 Icons」サイトでアイコンを検索してタグ情報を取得してください。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

11-material/21-awesome-1
- index.html

(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Font Awesomeのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet">
<!-- Font Awesomeでアニメーションを使用する時に追加します -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" rel="stylesheet">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* Font Awesomeの設定 */
h1 {
	padding: 10px;
	margin-bottom: 20px;
	font-size: 1.6rem;
	background: steelblue;
	color: #fff;
	text-align: center;
}
@media screen and (max-width: 760px) {
	h1 {
		font-size: 1.0rem;
	}
}
h2 {
	font-size: 1.4rem;
	padding: 10px;
	color: steelblue;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.0rem;
	}
}
.list p {
	display: inline-block;
	line-height: 3;
}
@media screen and (max-width: 760px) {
	.list p {
		font-size: 0.8rem;
	}
}
/* ▼▼▼ CSS（ここから／使用するCSSを選択してコピーしてください）（※2） ▼▼▼ */
/* 重ねる指定 */
.awesome-01 {
	position: relative;
	font-size: 3rem;
	vertical-align: baseline;
}
.awesome-01-parent {
	width: auto;
	position: static;
	font-size: 3rem;
}
.awesome-01-child {
	position: absolute;
	top: 0;
	left: -30px;
	font-size: 1.5rem;
	color: #fff;
}
/* 疑似要素での指定（爆弾） */
.awesome-02 {
	font-size: 2rem;
}
@media screen and (max-width: 760px) {
	.awesome-02 {
		font-size: 1rem;
	}
}
.awesome-02 .bomb:before {
	display: inline-block;
	padding: 0 5px;
	font-family: "Font Awesome 5 Free";
	content: '\f1e2';
	font-size: 3rem;
	font-weight: 900;
}
/* 疑似要素での指定（Twitter） */
.awesome-03 {
	font-size: 2rem;
}
@media screen and (max-width: 760px) {
	.awesome-03 {
		font-size: 1rem;
	}
}
.awesome-03 .twitter:before {
	display: inline-block;
	padding: 0 5px;
	font-family: "Font Awesome 5 Brands";
	content: '\f099';
	font-size: 3rem;
	font-weight: 900;
}
/* 見出しでの指定（01） */
.heading-01 {
	position: relative;
	font-size: 2rem;
	padding: 10px 10px 10px 80px;
	margin-bottom: 20px;
	border: #ccc 1px solid;
}
@media screen and (max-width: 760px) {
	.heading-01 {
		font-size: 1rem;
	}
}
.heading-01::before {
	position: absolute;
	left: 20px;
	top: -6px;
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-weight: 900;
	font-size: 3rem;
	color: pink;
	font-weight: 900;
}
/* 見出しでの指定（02） */
.heading-02 {
	position: relative;
	font-size: 2rem;
	padding: 10px 10px 10px 80px;
	margin-bottom: 20px;
	border: #ccc 1px solid;
}
@media screen and (max-width: 760px) {
	.heading-02 {
		font-size: 1rem;
	}
}
.heading-02::before {
	position: absolute;
	left: 20px;
	top: -6px;
	font-family: "Font Awesome 5 Free";
	content: "\f075";
	font-weight: 900;
	font-size: 3rem;
	color: steelblue;
	font-weight: 900;
}
/* リストでの指定 */
.list-01 li {
	list-style-type: none;
}
.list-01 li {
	position: relative;
	font-size: 2rem;
	padding: 0 10px 0 80px;
}
@media screen and (max-width: 760px) {
	.list-01 li {
		font-size: 1rem;
	}
}
.list-01 li::before {
	position: absolute;
	left: 20px;
	top: -16px;
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-weight: 900;
	font-size: 3rem;
	color: steelblue;
	font-weight: 900;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- Font Awesomeの定義 -->
	<div class="wrapper">
<!-- ▼▼▼ HTML（ここから／使用するHTMLを選択してコピーしてください）（※3） ▼▼▼ -->
		<!-- アイコンの例 -->
		<h2>アイコンの例</h2>
		<div class="list">
			<p><span>01（fas fa-arrow-circle-up）</span><i class="fas fa-arrow-circle-up fa-3x fa-fw"></i></p>
			<p><span>02（fas fa-arrow-circle-down）</span><i class="fas fa-arrow-circle-down fa-3x fa-fw"></i></p>
			<p><span>03（fas fa-arrow-circle-left）</span><i class="fas fa-arrow-circle-left fa-3x fa-fw"></i></p>
			<p><span>04（fas fa-arrow-circle-right）</span><i class="fas fa-arrow-circle-right fa-3x fa-fw"></i></p>
			<p><span>05（fas fa-arrows-alt）</span><i class="fas fa-arrows-alt fa-3x fa-fw"></i></p>
			<p><span>06（fas fa-arrow-up）</span><i class="fas fa-arrow-up fa-3x fa-fw"></i></p>
			<p><span>07（fas fa-arrow-down）</span><i class="fas fa-arrow-down fa-3x fa-fw"></i></p>
			<p><span>08（fas fa-arrow-left）</span><i class="fas fa-arrow-left fa-3x fa-fw"></i></p>
			<p><span>09（fas fa-arrow-right）</span><i class="fas fa-arrow-right fa-3x fa-fw"></i></p>
			<p><span>10（fas fa-bell）</span><i class="fas fa-bell fa-3x fa-fw" style="color: #ebc50d;"></i></p>
			<p><span>11（fas fa-biking）</span><i class="fas fa-biking fa-3x fa-fw" style="color: #36933d;"></i></p>
			<p><span>12（fas fa-bomb）</span><i class="fas fa-bomb fa-3x fa-fw"></i></p>
			<p><span>13（fas fa-bus-alt）</span><i class="fas fa-bus-alt fa-3x fa-fw" style="color: #ffc800;"></i></p>
			<p><span>14（fas fa-camera）</span><i class="fas fa-camera fa-3x fa-fw" style="color: #888;"></i></p>
			<p><span>15（fas fa-cannabis）</span><i class="fas fa-cannabis fa-3x fa-fw" style="color: #f00;"></i></p>
			<p><span>16（fas fa-ambulance）</span><i class="fas fa-ambulance fa-3x fa-fw" style="color: #c14343;"></i></p>
			<p><span>17（fab fa-apple）</span><i class="fab fa-apple fa-3x fa-fw"></i></p>
			<p><span>18（fas fa-cart-arrow-down）</span><i class="fas fa-cart-arrow-down fa-3x fa-fw" style="color: #e3a61c;"></i></p>
			<p><span>19（fas fa-cloud-download-alt）</span><i class="fas fa-cloud-download-alt fa-3x fa-fw" style="color: #38c9b5;"></i></p>
			<p><span>20（fab fa-facebook）</span><i class="fab fa-facebook fa-3x fa-fw" style="color: #2a6fb4;"></i></p>
			<p><span>21（fab fa-twitter）</span><i class="fab fa-twitter fa-3x fa-fw" style="color: #1c96e8;"></i></p>
			<p><span>22（fab fa-instagram）</span><i class="fab fa-instagram fa-3x fa-fw" style="color: #b32e9f;"></i></p>
			<p><span>23（fab fa-line）</span><i class="fab fa-line fa-3x fa-fw" style="color: #06c152;"></i></p>
			<p><span>24（fab fa-youtube）</span><i class="fab fa-youtube fa-3x fa-fw" style="color: #f70000;"></i></p>
		</div>
		<!-- サイズの指定 -->
		<h2>サイズの指定</h2>
		<div class="list">
			<p><span>01（fa-lg）</span><i class="fas fa-arrow-circle-up fa-lg fa-fw"></i></p>
			<p><span>02（fa-1x）</span><i class="fas fa-arrow-circle-up fa-1x fa-fw"></i></p>
			<p><span>03（fa-2x）</span><i class="fas fa-arrow-circle-up fa-2x fa-fw"></i></p>
			<p><span>04（fa-3x）</span><i class="fas fa-arrow-circle-up fa-3x fa-fw"></i></p>
			<p><span>05（fa-4x）</span><i class="fas fa-arrow-circle-up fa-4x fa-fw"></i></p>
			<p><span>06（fa-5x）</span><i class="fas fa-arrow-circle-up fa-5x fa-fw"></i></p>
		</div>
		<!-- 色の指定 -->
		<h2>色の指定</h2>
		<div class="list">
			<p><span>01（style="color: red;"）</span><i class="fas fa-arrow-circle-up fa-3x fa-fw" style="color: red;"></i></p>
			<p><span>02（style="color: lime;"）</span><i class="fas fa-arrow-circle-up fa-3x fa-fw" style="color: lime;"></i></p>
			<p><span>03（style="color: blue;"）</span><i class="fas fa-arrow-circle-up fa-3x fa-fw" style="color: blue;"></i></p>
			<p><span>04（style="color: skyblue;"）</span><i class="fas fa-arrow-circle-up fa-3x fa-fw" style="color: skyblue;"></i></p>
			<p><span>05（style="color: pink;"）</span><i class="fas fa-arrow-circle-up fa-3x fa-fw" style="color: pink;"></i></p>
		</div>
		<!-- 表示角度・反転の指定 -->
		<h2>表示角度・反転の指定</h2>
		<div class="list">
			<p><span>01（fa-rotate-90）</span><i class="fas fa-ambulance fa-3x fa-rotate-90 fa-fw"></i></p>
			<p><span>02（fa-rotate-180）</span><i class="fas fa-ambulance fa-3x fa-rotate-180 fa-fw"></i></p>
			<p><span>03（fa-rotate-270）</span><i class="fas fa-ambulance fa-3x fa-rotate-270 fa-fw"></i></p>
			<p><span>04（fa-flip-horizontal）</span><i class="fas fa-ambulance fa-3x fa-flip-horizontal fa-fw"></i></p>
			<p><span>05（fa-flip-vertical）</span><i class="fas fa-ambulance fa-3x fa-flip-vertical fa-fw"></i></p>
		</div>
		<!-- 飾りの指定 -->
		<h2>飾りの指定</h2>
		<div class="list">
			<p><span>01（fa-border）</span><i class="fas fa-arrows-alt fa-3x fa-border fa-fw"></i></p>
			<p><span>02（fa-stack）</span></p>
			<p><span class="awesome-01 fa-stack">
				<i class="awesome-01-parent fas fa-cloud fa-stack-2x"></i>
				<i class="awesome-01-child fab fa-twitter fa-stack-1x"></i>
			</span></p>
		</div>
		<!-- アニメーションの指定 -->
		<h2>アニメーションの指定</h2>
		<div class="list">
			<p><span>01（fa-spin）</span><i class="fas fa-arrows-alt fa-spin fa-3x fa-fw"></i></p>
			<p><span>03（faa-wrench animated）</span><i class="fab fa-twitter faa-wrench animated fa-3x fa-fw"></i></p>
			<p><span>04（faa-ring animated）</span><i class="fas fa-bus faa-ring animated fa-3x fa-fw" ></i></p>
			<p><span>05（faa-horizontal animated）</span><i class="fas fa-male faa-horizontal animated fa-3x fa-fw"></i></p>
			<p><span>06（faa-vertical animated）</span><i class="fas fa-arrow-up faa-vertical animated fa-3x fa-fw"></i></p>
			<p><span>07（faa-flash animated）</span><i class="fas fa-star faa-flash animated fa-3x fa-fw"></i></p>
			<p><span>08（faa-bounce animated）</span><i class="fas fa-music faa-bounce animated fa-3x fa-fw"></i></p>
			<p><span>09（faa-spin animated）</span><i class="fas fa-cog faa-spin animated fa-3x fa-fw"></i></p>
			<p><span>10（faa-float animated）</span><i class="fas fa-ship faa-float animated fa-3x fa-fw"></i></p>
			<p><span>11（faa-pulse animated）</span><i class="fas fa-heart faa-pulse animated fa-3x fa-fw"></i></p>
			<p><span>12（faa-shake animated）</span><i class="fas fa-cog faa-shake animated fa-3x fa-fw"></i></p>
			<p><span>13（faa-tada animated）</span><i class="fas fa-plane faa-tada animated fa-3x fa-fw"></i></p>
			<p><span>14（faa-passing-reverse animated）</span><i class="fas fa-bicycle faa-passing-reverse animated fa-3x fa-fw"></i></p>
			<p><span>15（faa-passing animated）</span><i class="fas fa-bicycle faa-passing animated fa-3x fa-fw"></i></p>
			<p><span>16（faa-burst animated）</span><i class="fas fa-bomb faa-burst animated fa-3x fa-fw"></i></p>
		</div>
		<!-- 疑似要素での指定 -->
		<h2>疑似要素での指定</h2>
		<p class="awesome-02">01 これは<span class="bomb">爆弾</span>です。</p>
		<p class="awesome-03">02 詳細は<span class="twitter">Twitter</span>で！</p>
		<!-- 見出しでの指定 -->
		<h2>見出しでの指定</h2>
		<h3 class="heading-01">01 見出しサンプル</h3>
		<h3 class="heading-02">02 見出しサンプル</h3>
		<!-- リストでの指定 -->
		<h2>リストでの指定</h2>
		<ul class="list-01">
			<li>リストサンプル-01</li>
			<li>リストサンプル-02</li>
			<li>リストサンプル-03</li>
		</ul>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	</div>
</div>

</body>
</html>

P11.2.2 Font Awesome v6

(1) 説明

Font Awesome v6 の使用法を説明します。

(2) 表示形式

使用法のサンプルを確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

アイコンフォント

アイコン（Font Awesome）
公式サイト：Font Awesome（https://fontawesome.com/）
CDN（CSS）：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css
CDN（CSS）：https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css

(4) 実装手順

「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
head タグ内に「all.min.css」と「font-awesome-animation.css」の link タグ（※1）を記述してください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。表示形態に合わせてスタイル定義を選択してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。表示する形態に合わせて表示定義を選択してください。アイコン表示タグは「Font Awesome」サイトでアイコンを検索してタグ情報を取得してください。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

11-material/22-awesome-2
- index.html

(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Font Awesomeのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel ="stylesheet">
<!-- Font Awesomeでアニメーションを使用する時に追加します -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" rel="stylesheet">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* Font Awesomeの設定 */
h1 {
	padding: 10px;
	margin-bottom: 20px;
	font-size: 1.6rem;
	background: steelblue;
	color: #fff;
	text-align: center;
}
@media screen and (max-width: 760px) {
	h1 {
		font-size: 1.0rem;
	}
}
h2 {
	font-size: 1.4rem;
	padding: 10px;
	color: steelblue;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.0rem;
	}
}
.list p {
	display: inline-block;
	line-height: 3;
}
@media screen and (max-width: 760px) {
	.list p {
		font-size: 0.8rem;
	}
}
/* ▼▼▼ CSS（ここから／使用するCSSを選択してコピーしてください）（※2） ▼▼▼ */
/* 重ねる指定 */
.awesome-01 {
	position: relative;
	font-size: 3rem;
	vertical-align: baseline;
}
.awesome-01-parent {
	width: auto;
	position: static;
	font-size: 3rem;
}
.awesome-01-child {
	position: absolute;
	top: 0;
	left: -30px;
	font-size: 1.5rem;
	color: #fff;
}
/* 疑似要素での指定（爆弾） */
.awesome-02 {
	font-size: 2rem;
}
@media screen and (max-width: 760px) {
	.awesome-02 {
		font-size: 1rem;
	}
}
.awesome-02 .bomb:before {
	display: inline-block;
	padding: 0 5px;
	font-family: "Font Awesome 5 Free";
	content: '\f1e2';
	font-size: 3rem;
	font-weight: 900;
}
/* 疑似要素での指定（Twitter） */
.awesome-03 {
	font-size: 2rem;
}
@media screen and (max-width: 760px) {
	.awesome-03 {
		font-size: 1rem;
	}
}
.awesome-03 .twitter:before {
	display: inline-block;
	padding: 0 5px;
	font-family: "Font Awesome 5 Brands";
	content: '\f099';
	font-size: 3rem;
	font-weight: 900;
}
/* 見出しでの指定（01） */
.heading-01 {
	position: relative;
	font-size: 2rem;
	padding: 10px 10px 10px 80px;
	margin-bottom: 20px;
	border: #ccc 1px solid;
}
@media screen and (max-width: 760px) {
	.heading-01 {
		font-size: 1rem;
	}
}
.heading-01::before {
	position: absolute;
	left: 20px;
	top: -6px;
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-weight: 900;
	font-size: 3rem;
	color: pink;
	font-weight: 900;
}
/* 見出しでの指定（02） */
.heading-02 {
	position: relative;
	font-size: 2rem;
	padding: 10px 10px 10px 80px;
	margin-bottom: 20px;
	border: #ccc 1px solid;
}
@media screen and (max-width: 760px) {
	.heading-02 {
		font-size: 1rem;
	}
}
.heading-02::before {
	position: absolute;
	left: 20px;
	top: -6px;
	font-family: "Font Awesome 5 Free";
	content: "\f075";
	font-weight: 900;
	font-size: 3rem;
	color: steelblue;
	font-weight: 900;
}
/* リストでの指定 */
.list-01 li {
	list-style-type: none;
}
.list-01 li {
	position: relative;
	font-size: 2rem;
	padding: 0 10px 0 80px;
}
@media screen and (max-width: 760px) {
	.list-01 li {
		font-size: 1rem;
	}
}
.list-01 li::before {
	position: absolute;
	left: 20px;
	top: -16px;
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-weight: 900;
	font-size: 3rem;
	color: steelblue;
	font-weight: 900;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- Font Awesomeの定義 -->
	<div class="wrapper">
<!-- ▼▼▼ HTML（ここから／使用するHTMLを選択してコピーしてください）（※3） ▼▼▼ -->
		<!-- アイコンの例 -->
		<h2>アイコンの例</h2>
		<div class="list">
			<p><span>01（fa-solid fa-circle-arrow-up）</span><i class="fa-solid fa-circle-arrow-up fa-3x fa-fw"></i></p>
			<p><span>02（fa-solid fa-circle-arrow-down）</span><i class="fa-solid fa-circle-arrow-down fa-3x fa-fw"></i></p>
			<p><span>03（fa-solid fa-circle-arrow-left）</span><i class="fa-solid fa-circle-arrow-left fa-3x fa-fw"></i></p>
			<p><span>04（fa-solid fa-circle-arrow-right）</span><i class="fa-solid fa-circle-arrow-right fa-3x fa-fw"></i></p>
			<p><span>05（fa-solid fa-up-down-left-right）</span><i class="fa-solid fa-up-down-left-right fa-3x fa-fw"></i></p>
			<p><span>06（fa-solid fa-arrow-up）</span><i class="fa-solid fa-arrow-up fa-3x fa-fw"></i></p>
			<p><span>07（fa-solid fa-arrow-down）</span><i class="fa-solid fa-arrow-down fa-3x fa-fw"></i></p>
			<p><span>08（fa-solid fa-arrow-left）</span><i class="fa-solid fa-arrow-left fa-3x fa-fw"></i></p>
			<p><span>09（fa-solid fa-arrow-right）</span><i class="fa-solid fa-arrow-right fa-3x fa-fw"></i></p>
			<p><span>10（fa-solid fa-bell）</span><i class="fa-solid fa-bell fa-3x fa-fw" style="color: #ebc50d;"></i></p>
			<p><span>11（fa-solid fa-biking）</span><i class="fa-solid fa-biking fa-3x fa-fw" style="color: #36933d;"></i></p>
			<p><span>12（fa-solid fa-bomb）</span><i class="fa-solid fa-bomb fa-3x fa-fw"></i></p>
			<p><span>13（fa-solid fa-bus-alt）</span><i class="fa-solid fa-bus-alt fa-3x fa-fw" style="color: #ffc800;"></i></p>
			<p><span>14（fa-solid fa-camera）</span><i class="fa-solid fa-camera fa-3x fa-fw" style="color: #888;"></i></p>
			<p><span>15（fa-solid fa-cannabis）</span><i class="fa-solid fa-cannabis fa-3x fa-fw" style="color: #f00;"></i></p>
			<p><span>16（fa-solid fa-ambulance）</span><i class="fa-solid fa-ambulance fa-3x fa-fw" style="color: #c14343;"></i></p>
			<p><span>17（fa-brands fa-apple）</span><i class="fa-brands fa-apple fa-3x fa-fw"></i></p>
			<p><span>18（fa-solid fa-cart-arrow-down）</span><i class="fa-solid fa-cart-arrow-down fa-3x fa-fw" style="color: #e3a61c;"></i></p>
			<p><span>19（fa-solid fa-cloud-download-alt）</span><i class="fa-solid fa-cloud-download-alt fa-3x fa-fw" style="color: #38c9b5;"></i></p>
			<p><span>20（fa-brands fa-facebook）</span></i><i class="fa-brands fa-facebook fa-3x fa-fw" style="color: #2a6fb4;"></i></p>
			<p><span>21（fa-brands fa-twitter）</span><i class="fa-brands fa-twitter fa-3x fa-fw" style="color: #1c96e8;"></i></p>
			<p><span>22（fa-brands fa-instagram）</span><i class="fa-brands fa-instagram fa-3x fa-fw" style="color: #b32e9f;"></i></p>
			<p><span>23（fa-brands fa-line）</span><i class="fa-brands fa-line fa-3x fa-fw" style="color: #06c152;"></i></p>
			<p><span>24（fa-brands fa-youtube）</span><i class="fa-brands fa-youtube fa-3x fa-fw" style="color: #f70000;"></i></p>
		</div>
		<!-- サイズの指定 -->
		<h2>サイズの指定</h2>
		<div class="list">
			<p><span>01（fa-lg）</span><i class="fa-solid fa-circle-arrow-up fa-lg fa-fw"></i></p>
			<p><span>02（fa-1x）</span><i class="fa-solid fa-circle-arrow-up fa-1x fa-fw"></i></p>
			<p><span>03（fa-2x）</span><i class="fa-solid fa-circle-arrow-up fa-2x fa-fw"></i></p>
			<p><span>04（fa-3x）</span><i class="fa-solid fa-circle-arrow-up fa-3x fa-fw"></i></p>
			<p><span>05（fa-4x）</span><i class="fa-solid fa-circle-arrow-up fa-4x fa-fw"></i></p>
			<p><span>06（fa-5x）</span><i class="fa-solid fa-circle-arrow-up fa-5x fa-fw"></i></p>
		</div>
		<!-- 色の指定 -->
		<h2>色の指定</h2>
		<div class="list">
			<p><span>01（style="color: red;"）</span><i class="fa-solid fa-circle-arrow-up fa-3x fa-fw" style="color: red;"></i></p>
			<p><span>02（style="color: lime;"）</span><i class="fa-solid fa-circle-arrow-up fa-3x fa-fw" style="color: lime;"></i></p>
			<p><span>03（style="color: blue;"）</span><i class="fa-solid fa-circle-arrow-up fa-3x fa-fw" style="color: blue;"></i></p>
			<p><span>04（style="color: skyblue;"）</span><i class="fa-solid fa-circle-arrow-up fa-3x fa-fw" style="color: skyblue;"></i></p>
			<p><span>05（style="color: pink;"）</span><i class="fa-solid fa-circle-arrow-up fa-3x fa-fw" style="color: pink;"></i></p>
		</div>
		<!-- 表示角度・反転の指定 -->
		<h2>表示角度・反転の指定</h2>
		<div class="list">
			<p><span>01（fa-rotate-90）</span><i class="fa-solid fa-truck-medical fa-3x fa-rotate-90 fa-fw"></i></p>
			<p><span>02（fa-rotate-180）</span><i class="fa-solid fa-truck-medical fa-3x fa-rotate-180 fa-fw"></i></p>
			<p><span>03（fa-rotate-270）</span><i class="fa-solid fa-truck-medical fa-3x fa-rotate-270 fa-fw"></i></p>
			<p><span>04（fa-flip-horizontal）</span><i class="fa-solid fa-truck-medical fa-3x fa-flip-horizontal fa-fw"></i></p>
			<p><span>05（fa-flip-vertical）</span><i class="fa-solid fa-truck-medical fa-3x fa-flip-vertical fa-fw"></i></p>
		</div>
		<!-- 飾りの指定 -->
		<h2>飾りの指定</h2>
		<div class="list">
			<p><span>01（fa-border）</span><i class="fa-solid fa-up-down-left-right fa-3x fa-border fa-fw"></i></p>
			<p><span>02（fa-stack）</span></p>
			<p><span class="awesome-01 fa-stack">
				<i class="awesome-01-parent fa-solid fa-cloud fa-stack-2x"></i>
				<i class="awesome-01-child fa-brands fa-twitter fa-stack-1x"></i>
			</span></p>
		</div>
		<!-- アニメーションの指定 -->
		<h2>アニメーションの指定</h2>
		<div class="list">
			<p><span>01（fa-spin）</span><i class="fa-solid fa-up-down-left-right fa-spin fa-3x fa-fw"></i></p>
			<p><span>03（faa-wrench animated）</span><i class="fa-brands fa-twitter faa-wrench animated fa-3x fa-fw"></i></p>
			<p><span>04（faa-ring animated）</span><i class="fa-solid fa-bus faa-ring animated fa-3x fa-fw" ></i></p>
			<p><span>05（faa-horizontal animated）</span><i class="fa-solid fa-male faa-horizontal animated fa-3x fa-fw"></i></p>
			<p><span>06（faa-vertical animated）</span><i class="fa-solid fa-arrow-up faa-vertical animated fa-3x fa-fw"></i></p>
			<p><span>07（faa-flash animated）</span><i class="fa-solid fa-star faa-flash animated fa-3x fa-fw"></i></p>
			<p><span>08（faa-bounce animated）</span><i class="fa-solid fa-music faa-bounce animated fa-3x fa-fw"></i></p>
			<p><span>09（faa-spin animated）</span><i class="fa-solid fa-cog faa-spin animated fa-3x fa-fw"></i></p>
			<p><span>10（faa-float animated）</span><i class="fa-solid fa-ship faa-float animated fa-3x fa-fw"></i></p>
			<p><span>11（faa-pulse animated）</span><i class="fa-solid fa-heart faa-pulse animated fa-3x fa-fw"></i></p>
			<p><span>12（faa-shake animated）</span><i class="fa-solid fa-cog faa-shake animated fa-3x fa-fw"></i></p>
			<p><span>13（faa-tada animated）</span><i class="fa-solid fa-plane faa-tada animated fa-3x fa-fw"></i></p>
			<p><span>14（faa-passing-reverse animated）</span><i class="fa-solid fa-bicycle faa-passing-reverse animated fa-3x fa-fw"></i></p>
			<p><span>15（faa-passing animated）</span><i class="fa-solid fa-bicycle faa-passing animated fa-3x fa-fw"></i></p>
			<p><span>16（faa-burst animated）</span><i class="fa-solid fa-bomb faa-burst animated fa-3x fa-fw"></i></p>
		</div>
		<!-- 疑似要素での指定 -->
		<h2>疑似要素での指定</h2>
		<p class="awesome-02">01 これは<span class="bomb">爆弾</span>です。</p>
		<p class="awesome-03">02 詳細は<span class="twitter">Twitter</span>で！</p>
		<!-- 見出しでの指定 -->
		<h2>見出しでの指定</h2>
		<h3 class="heading-01">01 見出しサンプル</h3>
		<h3 class="heading-02">02 見出しサンプル</h3>
		<!-- リストでの指定 -->
		<h2>リストでの指定</h2>
		<ul class="list-01">
			<li>リストサンプル-01</li>
			<li>リストサンプル-02</li>
			<li>リストサンプル-03</li>
		</ul>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	</div>
</div>

</body>
</html>

P11.3 フォント

P11.3.1 Google Fonts

(1) 説明

Google Fonts の使用法を説明します。
Google Fonts は、Web フォントと呼ばれるものであり表示する機器の環境に依存することなく指定のフォントが表示可能になります。

(2) 表示形式

使用法のサンプルを確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

Web フォント

Web フォント（Google Fonts）
公式サイト：Google Fonts（https://fonts.google.com/）

(4) 実装手順

「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
Google Fonts の公式サイトで使用するフォントを選択してください。選択したフォントの情報は、右部の「Selected families」欄に表示されます。複数のフォントが選択可能ですので使用しないフォントは、選択解除（削除）を行ってください。
head タグ内に FONT 定義の link タグ（※1）を記述してください。ここでの FONT 定義は、Google Fonts の公式サイトの右部の「Selected families」欄に表示されている <link> をチェックして表示される link タグをコピーしてください。FONT 定義を HTML ファイルではなくスタイルシート（CSS）ファイルで行う場合は、@import をチェックして表示される @inport 文をスタイルシートにコピーしてください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。スタイル定義で使用する font-family プロパティは、Google Fonts の公式サイトの右部の「Selected families」欄に表示されている「CSS rules to specify families」からコピーしてください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。表示定義で使用するタグや class 名は、適時変更してください。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

11-material/31-googlefonts-1
- index.html

(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Font Awesomeのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ FONT（ここから）（※1） ▼▼▼ -->
<!-- ここに記述するlinkタグは、Google Fonesサイトで生成してください -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Hachi+Maru+Pop&family=Orbitron:wght@500&family=Train+One&display=swap" rel="stylesheet">
<!-- ▲▲▲ FONT（ここまで） ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ここに記述するfont-familyプロパティは、Google Fontsサイトで生成してください */
h1.HachiMaruPop {
	line-height: 5rem;
	font-size: 2rem;
}
.GreatVibes {
	font-family: 'Great Vibes', cursive;
	font-size: 1.3rem;
}
.HachiMaruPop {
	font-family: 'Hachi Maru Pop', cursive;
	font-size: 1.3rem;
}
.Orbitron {
	font-family: 'Orbitron', sans-serif;
	font-size: 1.3rem;
}
.TrainOne {
	font-family: 'Train One', cursive;
	font-size: 1.3rem;
}
@media screen and (max-width: 760px) {
	h1.HachiMaruPop {
		line-height: 4rem;
		font-size: 1.5rem;
	}
	.GreatVibes {
		font-size: 1rem;
	}
	.HachiMaruPop {
		font-size: 1rem;
	}
	.Orbitron {
		font-size: 1rem;
	}
	.TrainOne {
		font-size: 1rem;
	}
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- Google Fontsの定義 -->
	<div class="wrapper">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
		<!-- テキスト記述の例 -->
		<h1 class="HachiMaruPop">HTML-CSS入門講座</h1>
		<p class="GreatVibes">0123456789ABCDEFabcdefあいうえお亜井宇絵尾</p>
		<p class="HachiMaruPop">0123456789ABCDEFabcdefあいうえお亜井宇絵尾</p>
		<p class="Orbitron">0123456789 ABCDEFGHIJKLMNOPQ abcdefghijklmnopq</p>
		<p class="TrainOne">0123456789 ABCDEFGHIJKLMNOPQ abcdefghijklmnopq</p>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	</div>
</div>

</body>
</html>

WebParts-11 素材

目次

P11.1 はじめに

P11.1.1 概要

P11.2 アイコン

P11.2.1 Font Awesome v5

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P11.2.2 Font Awesome v6

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P11.3 フォント

P11.3.1 Google Fonts

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

WebParts-11
素材