こんにちは。ネットショップコンサルタント「たぶ」(@yusuke_tanaka34)です。
今日は『北欧の文字をWebサイトで表示する方法』をご紹介していこうと思います!
今回の記事は、
- ネットショップで北欧の商品を取り扱っている方
- 北欧の文字を使ったWebサイトを制作している方
- 北欧の文字をWebサイトに使いたい方
におすすめです!

分かります。Webサイトやネットショップに北欧の文字を表示したい時ってありますよね。
僕も取引先が北欧の商品を取り扱っていて、ネットショップに北欧の文字を表示したい時があります。
北欧の文字は「a」に点々がついたり、「a」と「e」が合体していたりと、普通のアルファベットとは違う文字が使われています。
パソコン上で使うだけであれば、パソコンによっては「環境依存文字」として表示できる場合もありますが、Webサイトの場合は話が違ってきます。
ネットショップやWebサイトでは、なかなか北欧の文字を使うことがないので、いざ必要になった時に調べると、時間がかかっちゃうんですよね。
そこで、今回は「北欧の文字をWebサイトで表示する方法」をご紹介したいと思います。
この記事に書いてある『北欧の文字をWebサイトで表示する方法』を読めば、コピペでWebサイトに北欧の文字を表示することができます!
結論から言いますと、北欧の文字は「文字実体参照」もしくは「数値文字参照」を用いて、Webサイトに文字を表示させます。
北欧の文字でよく使われる文字は、
| 表示したい文字 | 文字実体参照 | 数値文字参照 |
|---|---|---|
| á | á | á |
| ä | ä | ä |
| æ | æ | æ |
| é | é | é |
| Ê | Ê | Ê |
| ê | ê | ê |
| è | è | è |
| ë | ë | ë |
などがありますが、表に記載されている「文字実体参照」もしくは「数値文字参照」という特殊な文字列を入力することで、Webサイトに北欧の文字を表示することができます!
代表的なものはここにまとめましたが、他にもいろいろな文字があり、本文にまとめていますので、ぜひ読み進めてみてくださいね!
それでは、『北欧の文字をWebサイトで表示する方法』を詳しくご紹介していきたいと思います。
スポンサーリンク
北欧の文字をWebサイトで表示させるには

北欧の文字をWebサイトで表示させるには、「文字実体参照」もしくは「数値文字参照」という方法を使います。
「文字実体参照」も「数値文字参照」も、あまり聞きなれない言葉ですよね。
「文字実体参照」は「Á」のように、記号と文字を使って表示させる方法です。
「ISO8859-1(Latin-1)」というラテンアルファベットの文字コードに入っている文字を、決められた文字列を入力することで表示します。
「数値文字参照」は「Á」のように、記号と数字を使って特殊な文字を表示させます。
「Unicode」という文字コードに規格に入っている文字を、「Unicode」を入力することで表示します。
直接表示できればいいのですが、英語でも日本語でも「ä」や「ë」のような文字は使わないため、こういった方法で表示させる必要があるんですね。
ちなみに、「文字実体参照」や「数値文字参照」を使えば、北欧の文字以外にも「±」や「®」のような記号も表示することができます。
今回、「北欧の文字」という大きなくくりでお話をしていますが、
- フィンランド
- スウェーデン
- ノルウェー
など、各国でそれぞれに言語があり、微妙に少しずつ違うので、ややこしいんですよね。
日本で有名な「マリメッコ」や「イッタラ」、「キッピス」などはフィンランドのブランドです。
なので、今回はフィンランド語で使用される文字をメインでご紹介していきたいと思います。
スポンサーリンク
Webサイトで表示させる北欧で使われる文字について

北欧の文字によく出てくる「¨」や「´」。このような記号を総称して「ウムラウト」もしくは「ウムラウト記号」と呼びます。
「ウムラウト」とは、ゲルマン語から派生した言語に見られる「母音交替現象」のことを言います。
いきなり難しい言葉が出てきましたが、「母音交替現象」とは言語の中で母音が変化することにより、1つの単語が
- 別の単語に変化する
- 文法が変化する
- 母音自体が変化する
などの現象が起きることを言います。
と言ってもなかなか難しいので、日本語にたとえてみますね。
まず、ご存じのとおり「母音」とは日本語で言うところの「あいうえお」を指します。
それが、時代や地域が移り変わることによって少しずつ変化していき、「あうぇ」とか「いうぉ」とか訛りが出てくるようなイメージです。
日本語では、どれだけ訛っていても文字に表す時には「あいうえお」と表記しますが、北欧(海外)ではその訛りに文字を作っちゃったというような感じですね。
英語を勉強する時に出てくる発音記号を、そのまま文章を書く時にも使っちゃうようなイメージですかね。
「ウムラウト」はフィンランドやスウェーデン以外にも、
- ドイツ
- アイスランド
- トルコ
- ハンガリー
などでも使われています。
ちなみに、「¨」や「´」の記号単体のことを「ダイアクリティカルマーク(発音区別符号)」と言います。
「ダイアクリティカルマーク」には、
【ダイアクリティカルマーク参照コード一覧】
| ウムラウト記号 | 読み方 | 文字実体参照 | 数値文字参照 |
|---|---|---|---|
| ´ | アキュート | ´ | ´ |
| ˝ | ダブルアキュート | ˝ | |
| ` | グレイヴ | ` | ` |
| ̏ | ダブルグレイヴ | ̏ | |
| ˘ | ブレーヴェ | ˘ | ˘ |
| ̑ | 倒置ブレーヴェ | ̑ | |
| ˇ | ハーチェク(キャロン) | ˇ | ˇ |
| ¸ | セディーユ | ¸ | ¸ |
| ˆ | サーカムフレックス | ˆ | ˆ |
| ¨ | ウムラウト | ¨ | ¨ |
| ˜ | チルダ | ˜ | ˜ |
| ˙ | ドット符号 | ˙ | ˙ |
| ̡ | フック | ̡ | |
| ̉ | フック符号 | ̉ | |
| ̛ | ホーン符号 | ̛ | |
| ¯ | マクロン | ¯ | ¯ |
| ˛ | オゴネク | ˛ | |
| ˚ | リング符号 | ˚ | ˚ |
| ̵ | ストローク符号 | ̵ | |
| ʻ | コンマアバブ | ʻ | |
| ̦ | コンマビロー | ̦ |
があります。
ドット以外はまったく耳馴染みのない記号ばっかりですが、北欧の文字には必ずと言っていいほど出てくるので、頭の片隅に入れておいてもいいかもしれません。
スポンサーリンク
Webサイトで表示させたい北欧で使われる文字のコード一覧

次に、Webサイトで表示させたい北欧で使われる文字のコードを一覧にしてご紹介したいと思います。
一番左が表示させたい文字、右側に対応する「文字実体参照」と「数値文字参照」を掲載しましたので、コピペして使ってください。
【ウムラウト参照コード一覧】
| 文字 | 文字実体参照 | 数値文字参照 |
|---|---|---|
| Á | Á | Á |
| á | á | á |
| Â | Â | Â |
| â | â | â |
| Æ | Æ | Æ |
| æ | æ | æ |
| À | À | À |
| à | à | à |
| Å | Å | Å |
| å | å | å |
| Ã | Ã | Ã |
| ã | ã | ã |
| Ä | Ä | Ä |
| ä | ä | ä |
| Ç | Ç | Ç |
| ç | ç | ç |
| ¢ | ¢ | ¢ |
| É | É | É |
| é | é | é |
| Ê | é | Ê |
| ê | é | ê |
| È | È | È |
| è | è | è |
| Ð | Ð | Ð |
| ð | ð | ð |
| Ë | Ë | Ë |
| ë | ë | ë |
| Í | Í | Í |
| í | í | í |
| Î | Î | Î |
| î | î | î |
| ¡ | ¡ | ¡ |
| Ì | Ì | Ì |
| ì | ì | ì |
| ¿ | ¿ | ¿ |
| Ï | Ï | Ï |
| ï | ï | ï |
| Ñ | Ñ | Ñ |
| ñ | ñ | ñ |
| Ó | Ó | Ó |
| ó | ó | ó |
| Ô | Ô | Ô |
| ô | ô | ô |
| Ò | Ò | Ò |
| ò | ò | ò |
| ª | ª | ª |
| º | º | º |
| Ø | Ø | Ø |
| ø | ø | ø |
| Õ | Õ | Õ |
| õ | õ | õ |
| Ö | Ö | Ö |
| ö | ö | ö |
| Ú | Ú | Ú |
| ú | ú | ú |
| Û | Û | Û |
| û | û | û |
| Ù | Ù | Ù |
| ù | ù | ù |
| Ü | Ü | Ü |
| ü | ü | ü |
| Ý | Ý | Ý |
| ý | ý | ý |
| ÿ | ÿ | ÿ |
出典:日本語のWebページで、ウムラウト付きの文字を表示させる方法
けっこう色々な文字がありますよね。
僕はこの中の5文字くらいしか見たことがなかったので、文字の多さにびっくりしました。
スポンサーリンク
北欧の文字以外のコード一覧
少し話は逸れますが、北欧の文字以外にも「文字実体参照」もしくは「数値文字参照」を使って、Webサイトに特殊な記号を表示させることができます。
たとえば、「&」や「©」などが代表的な例ですね。
Webサイトの一番下にあるコピーライトなんかは、ここに書いてある「文字実体参照」もしくは「数値文字参照」を使って文字を表示することが多いです。
【特殊記号参照コード一覧】
| 文字 | 文字実体参照 | 数値文字参照 |
|---|---|---|
| & | & | & |
| ¦ | ¦ | ¦ |
| © | © | © |
| ¤ | ¤ | ¤ |
| ° | ° | ° |
| ÷ | ÷ | ÷ |
| ½ | ½ | ½ |
| ¼ | ¼ | ¼ |
| ¾ | ¾ | ¾ |
| « | « | « |
| ¯ | ¯ | ¯ |
| µ | µ | µ |
| · | · | · |
| (半角スペース) | |   |
| ¬ | ¬ | ¬ |
| ¶ | ¶ | ¶ |
| ± | ± | ± |
| £ | £ | £ |
| » | » | » |
| ® | ® | ® |
| § | § | § |
| (ソフトハイフン) | ­ | ­ |
| ¹ | ¹ | ¹ |
| ² | ² | ² |
| ³ | ³ | ³ |
| ß | ß | ß |
| Þ | Þ | Þ |
| þ | þ | þ |
| × | × | × |
| ¨ | ¨ | ¨ |
| ¥ | ¥ | ¥ |
出典:日本語のWebページで、ウムラウト付きの文字を表示させる方法
「&」や「©」、「 」などは、Webサイトを制作する上でちょくちょく出てくるので、覚えておいて損はないかもしれません。
ちなみに「ソフトハイフン」とは、改行するために単語内に挿入するハイフンのことを言います。
紙の書籍などで単語が長い時に、ソフトハイフンを入れて改行させているのを見たことはありませんか?あれです。
以上、「Webサイトで表示させたい北欧で使われる文字のコード一覧」でした。
スポンサーリンク
【まとめ】北欧の文字をWebサイトで表示する方法
今回は『北欧の文字をWebサイトで表示する方法』というテーマでお送りしてきました。
今回の記事をまとめると、北欧の文字は「文字実体参照」もしくは「数値文字参照」という特殊な文字列を入力することで、Webサイトに文字を表示させることができます。
北欧の文字には、
| 表示したい文字 | 文字実体参照 | 数値文字参照 |
|---|---|---|
| á | á | á |
| ä | ä | ä |
| æ | æ | æ |
| é | é | é |
| Ê | Ê | Ê |
| ê | ê | ê |
| è | è | è |
| ë | ë | ë |
などがあり、表示したい文字に対応した文字コードを入力します。
北欧の文字に出てくる「¨」や「´」などの記号は、「ウムラウト」もしくは「ウムラウト記号」と言い、ゲルマン語から派生した言語に見られる「母音交替現象」のことを言います。
日本の方言をそのまま文字にしたようなイメージです。
これからWebサイトに北欧の文字を表示させたい方は、本文中の一覧をぜひ活用してWebサイト制作の時短を行ってくださいね。
以上、「北欧の文字をWebサイトで表示する方法」でした。
ネットショップやホームページなど、Webサイトの制作に関して気になることがありましたら、お問い合わせまでご連絡ください。
ネットショップコンサルタントの「たぶ」でした。
こちらの記事もおすすめです。
Webサイトを制作していると、グローバルナビが段々にずれることがあります。その解消法をまとめました。
スムーススクロールがうまく効かない時ってありませんか?スムーススクロールの動作がおかしい時は、こちらの方法を試してみてください。
WordPressでWebサイトを作っていて、2つの固定ページの子ページ一覧を表示させたい時があったので、記事にしました!
WordPressのサムネイル画像がぼやけることがあったので、なぜそうなるのかを解明しました!解決策もまとめています。


















