無料で使える音楽素材「opus 006」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 006」概要

• 素材種別： BGM（ループ）
• 再生時間： 1:07
• BPM： 132
• 制作年月日： 2001/08/21
• ファイル形式： MP3 / WAVE / OGG / MIDI

無料で使える音楽素材「opus 002」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 002」概要

• 素材種別： BGM（ループ）
• 再生時間： 0:19
• BPM： 96
• 制作年月日： 1999/08/24
• ファイル形式： MP3 / WAVE / OGG / MIDI

無料で使える音楽素材「opus 003」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 003」概要

• 素材種別： BGM（ループ）
• 再生時間： 0:48
• BPM： 80
• 制作年月日： 1999/10/17
• ファイル形式： MP3 / WAVE / OGG / MIDI

無料で使える音楽素材「opus 004」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 004」概要

• 素材種別： BGM（ループ）
• 再生時間： 1:14
• BPM： 84
• 制作年月日： 2001/03/23
• ファイル形式： MP3 / WAVE / OGG / MIDI

無料で使える音楽素材「opus 005」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 005」概要

• 素材種別： BGM（ループ）
• 再生時間： 0:53
• BPM： 108
• 制作年月日： 2001/04/12
• ファイル形式： MP3 / WAVE / OGG / MIDI

Noto Sans JPは、Googleが開発した日本語フォントの一つで、多くのウェブサイトやアプリケーションで使用されています。

記事のタイトルそのままですが、最近このNoto Sans JPでfont-feature-settingsプロパティが問題なく機能するようになり、font-feature-settings: “palt”なども効くようになったことがわかりました。

font-feature-settingsとは？

font-feature-settingsは、OpenTypeフォントの高度な機能を制御するためのCSSプロパティです。このプロパティを使用することで、約物半角、プロポーショナルメトリクス、リガチャ、スモールキャップ、旧字体など、フォントに組み込まれた様々な機能をカスタマイズできます。

Noto Sans JPでの変更点

従来、Noto Sans JPではfont-feature-settingsの多くの機能が利用できませんでした。
私の環境でも、フォントがリリースされてからしばらくはfont-feature-settings：”palt”が効いていた → しかし、あるときを境に効かなくなった → 最近再びfont-feature-settings：”palt”が効くようになった、といった形です。

おそらく、Noto Sans JPを採用するサイトが増えたためにトラフィックを減らす等の理由で、フォントファイルからfont-feature-settingsを含むフォント情報を削除したのかなと推測しています。

とにかく、最新のアップデートによってfont-feature-settings：”palt”が効くようになったのは嬉しいニュースです。Webデザインでの日本語フォントの文字組みで、より細かな調整が可能となりました。

主な機能と使用

約物半角とプロポーショナルメトリクス

• 例：font-feature-settings: "palt";
• 効果：記号や括弧類などの約物を半角するなど、全体の文字間のレイアウトを整える

プロポーショナル数字

• 例：font-feature-settings: "pnum";
• 効果：文章中の数字の幅が均一でなくなり、より自然な印象に

スモールキャップ（アルファベット）

• 例：font-feature-settings: "smcp";
• 効果：小文字を小さな大文字に変換

実装方法

たとえばfont-feature-settings: “palt”の場合、HTMLとCSSで以下のように指定します。

<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=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

.custom-text { font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt";
}

注意点

• ブラウザやデバイスによってサポート状況が異なる場合があります。
• パフォーマンスへの影響を考慮し、必要な箇所でのみ使用することをお勧めします。

まとめ

Noto Sans JPでfont-feature-settingsが効くようになったことで、より簡単に日本語テキストレイアウトの調整が可能となりました。

Googleの仕様変更により再度変更となる可能性もありますが、font-feature-settings: “palt”は効かなくなった場合でも特に不具合等は発生せず影響がほとんどないCSSプロパティのため、今まで諦めていた方はぜひお試しいただけると幸いです。

参考リンク

• Google Fonts – Noto Sans Japanese
• MDN Web Docs – font-feature-settings

無料で使える音楽素材「opus 007」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 007」概要

• 素材種別： BGM（ループ）
• 再生時間： 1:06
• BPM： 116
• 制作年月日： 2001/12/09
• ファイル形式： MP3 / WAVE / OGG / MIDI

無料で使える音楽素材「opus 001」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 001」概要

• 素材種別： BGM（ループ）
• 再生時間： 0:55
• BPM： 130
• 制作年月日： 1999/02/17
• ファイル形式： MP3 / WAVE / OGG / MIDI

※試聴用BGM：「opus 001」

過去に配布していたMIDIファイル形式のフリーBGM素材一覧です。
｢opus 001」から「opus 015」までのMIDIファイルをまとめてダウンロードいただけます。

CSSのfont-feature-settingsプロパティは、フォントレイアウトを細かく制御することができるため、日本語Webサイトデザインでは特に欠かせない機能です。

しかし、すべてのフォントでこのプロパティが効果を発揮できるわけではありません。
この記事では、font-feature-settingsが効く日本語フォントと効かないフォントについて詳しく解説します。

font-feature-settingsとは

font-feature-settingsは、OpenTypeフォントの高度なタイポグラフィ機能を制御するためのCSSプロパティです。このプロパティを使用することで、合字（リガチャ）、スタイル代替、数字の表示形式など、さまざまなフォントの機能を細かく調整できます。

CSSでの基本的な使用方法は以下の通りです。

.text { font-feature-settings: "liga" 1, "calt" 1;
}

この例では、合字（liga）と文脈代替（calt）を有効にしています。

font-feature-settingsが効く日本語フォント

font-feature-settingsが効果を発揮するのは、主にOpenTypeフォントです。OpenTypeフォントは、高度なタイポグラフィ機能をサポートする柔軟なフォント形式で、以下のような特徴があります。

• 多様な文字セットをサポート
• 高度なレイアウト機能
• クロスプラットフォーム互換性

日本語フォントの場合、具体例では以下のフォントがfont-feature-settingsに対応しています。

源ノ角ゴシック（Source Han Sans）/ Noto Sans CJK / Noto Sans JP

• AdobeとGoogleが共同開発した多言語対応フォント
• 豊富なウェイトとOpenType機能をサポート

游ゴシック（Yu Gothic）

• Microsoft とType Projectが共同開発
• Windows 8.1以降に標準搭載されている

ヒラギノ角ゴシック / ヒラギノ明朝

• MacOSに搭載されている標準フォント
• 古いOSのバージョンではOpenType機能がサポートされていない場合があるため注意

これらのフォントは、font-feature-settingsを使用することで、プロポーショナル数字、スタイリスティック代替、JIS78/83/90字形など、さまざまな機能を制御できます。

font-feature-settingsが効かない日本語フォント

一方で、font-feature-settingsが効果を発揮しないフォントも存在します。主に以下のような特徴を持つフォントが該当します。

• 古い形式のフォント（TrueType, Type 1 など）
• OpenType機能が実装されていないフォント
• 限られた文字セットしか持たないフォント

日本語フォントの中で、font-feature-settingsが効かない代表的な非対応フォントは以下になります。

MS明朝 / MS ゴシック

• 古くからあるWindowsのシステムフォントで、OpenType機能のサポートが限定的

メイリオ

• Windows Vistaから搭載されているフォントで、一部のOpenType機能はサポートしているがfont-feature-settingsでの制御ができない

M PLUS 1 / M PLUS 2

• Google Fonts及びAdobe Fontsでも提供されている日本語フォントだが、font-feature-settingsでの制御はできない

IPA明朝 / IPAゴシック

• 情報処理推進機構（IPA）が公開している無償フォント
• 基本的なOpenType機能は搭載しているが、font-feature-settingsでの制御はできない

一部のWebフォントサービスで提供されている軽量化フォント

• ファイルサイズ削減のためfont-feature-settings機能を制限している場合がある

これらのフォントでは、font-feature-settingsを指定しても効果が現れません。

font-feature-settingsの効果を確認する方法

フォントがfont-feature-settingsに対応しているかどうかを確認するには、次の方法が有効です。

1. ブラウザの開発者ツールを使用する
   CSSパネルでfont-feature-settingsプロパティを編集し、表示の変化を確認する
2. オンラインツールを利用する
   Wakamai Fondueなどのツールを使用して、フォントの機能を詳細に分析する

font-feature-settingsを使用する際の注意点

font-feature-settingsを使用する際は、以下の点に注意が必要です。

1. ブラウザの互換性
   一部の古いブラウザでは、このプロパティがサポートされていない場合がある
2. パフォーマンスへの影響
   多数の機能を有効にすると、ページの読み込み速度に影響を与える可能性がある

まとめ

font-feature-settingsは、Webデザインにおけるタイポグラフィの可能性を大きく広げるプロパティです。OpenTypeフォントを使用することで、より細やかなデザイン調整が可能になります。一方で、すべてのフォントでこの機能が使えるわけではないため、プロジェクトに適したフォントを選択することが重要です。

適切なフォント選択とfont-feature-settingsの活用により、より読みやすくわかりやすい日本語フォントのレイアウトが可能になりますので、ぜひお試しいただければ幸いです。