iPentec.com  /  Doc  /  CSS  /  フォント

目次

Webページのテキストのフォントに 游ゴシック 游明朝 を利用する - CSS

ページのテキストのフォントに 游ゴシック 游明朝 を利用するコードを紹介します。

游ゴシック、游明朝とは

Windows 8.1で新たにデフォルトでインストールされるフォントです。字の大きさがやや小さめで、字間が広めになる特徴があります。

補足：Windows 8.1以前の場合

Windows 8.1より以前のWindowsを利用している場合は、Microsoftから游ゴシック 游明朝フォントパック(https://www.microsoft.com/ja-jp/download/details.aspx?id=49116)をダウンロードすると、游ゴシック、游明朝をインストールできます。

游ゴシックでWebページの文字を表示する

コード

以下のコードを記述します。
YuFont.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="CssYuFont.css" />
</head>
<body>
  <div class="YuGothic">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(游ゴシック)</div>
  <hr />
  <div class="YuMincho">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(游明朝)</div>
</body>
</html>
YuFont.css
.YuGothic {
  font-family:"Yu Gothic";
  font-size:18px;
}

.YuMincho {
  font-family:"Yu Mincho";
  font-size:18px;
}

表示結果

上記のHTMLファイルをWindows10のWebブラウザで表示します。下図の画面が表示されます。

フォントウェイトの違いを確認する

フォントウェイトごとの文字の違いを確認します。

游ゴシック

コード

下記のコードを記述します。
YuGothicFont.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="CssYuGothicFont.css" />
</head>
<body>
  <div class="YuGothic100">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:100)</div>
  <hr />
  <div class="YuGothic200">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:200)</div>
  <hr />
  <div class="YuGothic300">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:300)</div>
  <hr />
  <div class="YuGothic400">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:400)</div>
  <hr />
  <div class="YuGothic500">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:500)</div>
  <hr />
  <div class="YuGothic600">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:600)</div>
  <hr />
  <div class="YuGothic700">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:700)</div>
  <hr />
  <div class="YuGothic800">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:800)</div>
  <hr />
  <div class="YuGothic900">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:900)</div>
  <hr />
</body>
</html>
YuGothicFont.css
.YuGothic100 {
  font-family:"Yu Gothic";
  font-size:18px;
  font-weight:100;
}

.YuGothic200 {
  font-family:"Yu Gothic";
  font-size:18px;
  font-weight:200;
}

.YuGothic300 {
  font-family:"Yu Gothic";
  font-size:18px;
  font-weight:300;
}

.YuGothic400 {
  font-family:"Yu Gothic";
  font-size:18px;
  font-weight:400;
}

.YuGothic500 {
  font-family:"Yu Gothic";
  font-size:18px;
  font-weight:500;
}

.YuGothic600 {
  font-family:"Yu Gothic";
  font-size:18px;
  font-weight:600;
}

.YuGothic700 {
  font-family:"Yu Gothic";
  font-size:18px;
  font-weight:700;
}

.YuGothic800 {
  font-family:"Yu Gothic";
  font-size:18px;
  font-weight:800;
}

.YuGothic900 {
  font-family:"Yu Gothic";
  font-size:18px;
  font-weight:900;
}

表示結果

上記のHTMLファイルをWindows10のWebブラウザで表示します。下図の画面が表示されます。
Windows 10では游ゴシックのL(細字),R(標準), M(中), B(太字) の4種類がインストールされており、weight 300まではL、400がR、500がM、600以上はBが表示されます。

游明朝

コード

下記のコードを記述します。
YuMinchoFont.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="CssYuMinchoFont.css" />
</head>
<body>
  <div class="YuMincho100">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:100)</div>
  <hr />
  <div class="YuMincho200">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:200)</div>
  <hr />
  <div class="YuMincho300">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:300)</div>
  <hr />
  <div class="YuMincho400">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:400)</div>
  <hr />
  <div class="YuMincho500">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:500)</div>
  <hr />
  <div class="YuMincho600">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:600)</div>
  <hr />
  <div class="YuMincho700">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:700)</div>
  <hr />
  <div class="YuMincho800">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:800)</div>
  <hr />
  <div class="YuMincho900">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(font-weight:900)</div>
  <hr />
</body>
</html>
YuMinchoFont.css
.YuMincho100 {
  font-family:"Yu Mincho";
  font-size:18px;
  font-weight:100;
}

.YuMincho200 {
  font-family:"Yu Mincho";
  font-size:18px;
  font-weight:200;
}

.YuMincho300 {
  font-family:"Yu Mincho";
  font-size:18px;
  font-weight:300;
}

.YuMincho400 {
  font-family:"Yu Mincho";
  font-size:18px;
  font-weight:400;
}

.YuMincho500 {
  font-family:"Yu Mincho";
  font-size:18px;
  font-weight:500;
}

.YuMincho600 {
  font-family:"Yu Mincho";
  font-size:18px;
  font-weight:600;
}

.YuMincho700 {
  font-family:"Yu Mincho";
  font-size:18px;
  font-weight:700;
}

.YuMincho800 {
  font-family:"Yu Mincho";
  font-size:18px;
  font-weight:800;
}

.YuMincho900 {
  font-family:"Yu Mincho";
  font-size:18px;
  font-weight:900;
}

表示結果

上記のHTMLファイルをWindows10のWebブラウザで表示します。下図の画面が表示されます。
Windows 10では游明朝のL(細字),R(標準), D(中太)の3種類がインストールされており、weight 300まではL、400、500がR、600以上はDが表示されます。

Webサイトで指定する場合

Windows 8.1 以前の機種ではメイリオを表示する場合やMacのフォントを指定する場合の記述例は下記になります。

例

body {
  font-family: "游ゴシック", "Yu Gothic", "メイリオ", "Meirio", "MS PGothic", "Hiragino Kaku Gothic ProN", "Osaka", "sans-serif";
}

補足:游ゴシック、游明朝の文字間隔が開きすぎる

游ゴシック、游明朝の文字間隔が開きすぎる場合は、文字の間隔を詰めることができます。文字の間隔を詰めるスタイル設定についてはこちらの記事を参照してください。
著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

掲載日: 2016-02-25
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.