北欧の文字をWebサイトで表示する方法

北欧の文字をWebサイトで表示する方法

こんにちは。ネットショップコンサルタント「たぶ」(@yusuke_tanaka34)です。

今日は『北欧の文字をWebサイトで表示する方法』をご紹介していこうと思います!

今回の記事は、

  • ネットショップで北欧の商品を取り扱っている方
  • 北欧の文字を使ったWebサイトを制作している方
  • 北欧の文字をWebサイトに使いたい方

におすすめです!

Webサイト制作者
北欧の商品を仕入れたのですが、ホームページに載せるのに北欧の文字が表示できません。どうすればいいでしょうか?

分かります。Webサイトやネットショップに北欧の文字を表示したい時ってありますよね。

僕も取引先が北欧の商品を取り扱っていて、ネットショップに北欧の文字を表示したい時があります。

北欧の文字は「a」に点々がついたり、「a」と「e」が合体していたりと、普通のアルファベットとは違う文字が使われています。

パソコン上で使うだけであれば、パソコンによっては「環境依存文字」として表示できる場合もありますが、Webサイトの場合は話が違ってきます。

ネットショップやWebサイトでは、なかなか北欧の文字を使うことがないので、いざ必要になった時に調べると、時間がかかっちゃうんですよね。

そこで、今回は「北欧の文字をWebサイトで表示する方法」をご紹介したいと思います。

この記事に書いてある『北欧の文字をWebサイトで表示する方法』を読めば、コピペでWebサイトに北欧の文字を表示することができます!

結論から言いますと、北欧の文字は「文字実体参照」もしくは「数値文字参照」を用いて、Webサイトに文字を表示させます。

北欧の文字でよく使われる文字は、

表示したい文字文字実体参照数値文字参照
ááá
äää
æææ
ééé
ÊÊÊ
êêê
èèè
ëëë

などがありますが、表に記載されている「文字実体参照」もしくは「数値文字参照」という特殊な文字列を入力することで、Webサイトに北欧の文字を表示することができます!

代表的なものはここにまとめましたが、他にもいろいろな文字があり、本文にまとめていますので、ぜひ読み進めてみてくださいね!

それでは、『北欧の文字をWebサイトで表示する方法』を詳しくご紹介していきたいと思います。




北欧の文字をWebサイトで表示させるには

北欧の文字をWebサイトで表示させるには

北欧の文字をWebサイトで表示させるには、「文字実体参照」もしくは「数値文字参照」という方法を使います。

「文字実体参照」も「数値文字参照」も、あまり聞きなれない言葉ですよね。

「文字実体参照」は「Á」のように、記号と文字を使って表示させる方法です。

「ISO8859-1(Latin-1)」というラテンアルファベットの文字コードに入っている文字を、決められた文字列を入力することで表示します。

「数値文字参照」は「Á」のように、記号と数字を使って特殊な文字を表示させます。

「Unicode」という文字コードに規格に入っている文字を、「Unicode」を入力することで表示します。

直接表示できればいいのですが、英語でも日本語でも「ä」「ë」のような文字は使わないため、こういった方法で表示させる必要があるんですね。

ちなみに、「文字実体参照」や「数値文字参照」を使えば、北欧の文字以外にも「±」「®」のような記号も表示することができます。

今回、「北欧の文字」という大きなくくりでお話をしていますが、

  • フィンランド
  • スウェーデン
  • ノルウェー

など、各国でそれぞれに言語があり、微妙に少しずつ違うので、ややこしいんですよね。

日本で有名な「マリメッコ」や「イッタラ」、「キッピス」などはフィンランドのブランドです。

なので、今回はフィンランド語で使用される文字をメインでご紹介していきたいと思います。




Webサイトで表示させる北欧で使われる文字について

Webサイトで表示させる北欧で使われる文字について

北欧の文字によく出てくる「¨」「´」。このような記号を総称して「ウムラウト」もしくは「ウムラウト記号」と呼びます。

「ウムラウト」とは、ゲルマン語から派生した言語に見られる「母音交替現象」のことを言います。

いきなり難しい言葉が出てきましたが、「母音交替現象」とは言語の中で母音が変化することにより、1つの単語が

  • 別の単語に変化する
  • 文法が変化する
  • 母音自体が変化する

などの現象が起きることを言います。

と言ってもなかなか難しいので、日本語にたとえてみますね。

まず、ご存じのとおり「母音」とは日本語で言うところの「あいうえお」を指します。

それが、時代や地域が移り変わることによって少しずつ変化していき、「あうぇ」とか「いうぉ」とか訛りが出てくるようなイメージです。

日本語では、どれだけ訛っていても文字に表す時には「あいうえお」と表記しますが、北欧(海外)ではその訛りに文字を作っちゃったというような感じですね。

英語を勉強する時に出てくる発音記号を、そのまま文章を書く時にも使っちゃうようなイメージですかね。

「ウムラウト」はフィンランドやスウェーデン以外にも、

  • ドイツ
  • アイスランド
  • トルコ
  • ハンガリー

などでも使われています。

ちなみに、「¨」「´」の記号単体のことを「ダイアクリティカルマーク(発音区別符号)」と言います。

「ダイアクリティカルマーク」には、

【ダイアクリティカルマーク参照コード一覧】

ウムラウト記号読み方文字実体参照数値文字参照
´アキュート´´
˝ダブルアキュート˝
`グレイヴ``
̏ダブルグレイヴ̏
˘ブレーヴェ˘˘
̑倒置ブレーヴェ̑
ˇハーチェク(キャロン)ˇˇ
¸セディーユ¸¸
ˆサーカムフレックスˆˆ
¨ウムラウト¨¨
˜チルダ˜˜
˙ドット符号˙˙
̡フック̡
̉フック符号̉
̛ホーン符号̛
¯マクロン¯¯
˛オゴネク˛
˚リング符号˚˚
̵ストローク符号̵
ʻコンマアバブʻ
̦コンマビロー̦

出典:ウムラウト|Wikipedia

があります。

ドット以外はまったく耳馴染みのない記号ばっかりですが、北欧の文字には必ずと言っていいほど出てくるので、頭の片隅に入れておいてもいいかもしれません。




Webサイトで表示させたい北欧で使われる文字のコード一覧

Webサイトで表示させたい北欧で使われる文字のコード一覧

次に、Webサイトで表示させたい北欧で使われる文字のコードを一覧にしてご紹介したいと思います。

一番左が表示させたい文字、右側に対応する「文字実体参照」と「数値文字参照」を掲載しましたので、コピペして使ってください。

【ウムラウト参照コード一覧】

文字文字実体参照数値文字参照
ÁÁÁ
ááá
ÂÂÂ
âââ
ÆÆÆ
æææ
ÀÀÀ
ààà
ÅÅÅ
ååå
ÃÃÃ
ããã
ÄÄÄ
äää
ÇÇÇ
ççç
¢¢¢
ÉÉÉ
ééé
ÊéÊ
êéê
ÈÈÈ
èèè
ÐÐÐ
ððð
ËËË
ëëë
ÍÍÍ
ííí
ÎÎÎ
îîî
¡¡¡
ÌÌÌ
ììì
¿¿¿
ÏÏÏ
ïïï
ÑÑÑ
ñññ
ÓÓÓ
óóó
ÔÔÔ
ôôô
ÒÒÒ
òòò
ªªª
ººº
ØØØ
øøø
ÕÕÕ
õõõ
ÖÖÖ
ööö
ÚÚÚ
úúú
ÛÛÛ
ûûû
ÙÙÙ
ùùù
ÜÜÜ
üüü
ÝÝÝ
ýýý
ÿÿÿ

出典:日本語のWebページで、ウムラウト付きの文字を表示させる方法

けっこう色々な文字がありますよね。

僕はこの中の5文字くらいしか見たことがなかったので、文字の多さにびっくりしました。




北欧の文字以外のコード一覧

少し話は逸れますが、北欧の文字以外にも「文字実体参照」もしくは「数値文字参照」を使って、Webサイトに特殊な記号を表示させることができます。

たとえば、「&」「©」などが代表的な例ですね。

Webサイトの一番下にあるコピーライトなんかは、ここに書いてある「文字実体参照」もしくは「数値文字参照」を使って文字を表示することが多いです。

【特殊記号参照コード一覧】

文字文字実体参照数値文字参照
&&&
¦¦¦
©©©
¤¤¤
°°°
÷÷÷
½½½
¼¼¼
¾¾¾
«««
¯¯¯
µµµ
···
 (半角スペース)  
¬¬¬
¶¶
±±±
£££
»»»
®®®
§§§
­(ソフトハイフン)­­
¹¹¹
²²²
³³³
ßßß
ÞÞÞ
þþþ
×××
¨¨¨
¥¥¥

出典:日本語のWebページで、ウムラウト付きの文字を表示させる方法

「&」「©」「 」などは、Webサイトを制作する上でちょくちょく出てくるので、覚えておいて損はないかもしれません。

ちなみに「ソフトハイフン」とは、改行するために単語内に挿入するハイフンのことを言います。

紙の書籍などで単語が長い時に、ソフトハイフンを入れて改行させているのを見たことはありませんか?あれです。

以上、「Webサイトで表示させたい北欧で使われる文字のコード一覧」でした。




【まとめ】北欧の文字をWebサイトで表示する方法

今回は『北欧の文字をWebサイトで表示する方法』というテーマでお送りしてきました。

今回の記事をまとめると、北欧の文字は「文字実体参照」もしくは「数値文字参照」という特殊な文字列を入力することで、Webサイトに文字を表示させることができます。

北欧の文字には、

表示したい文字文字実体参照数値文字参照
ááá
äää
æææ
ééé
ÊÊÊ
êêê
èèè
ëëë

などがあり、表示したい文字に対応した文字コードを入力します。

北欧の文字に出てくる「¨」「´」などの記号は、「ウムラウト」もしくは「ウムラウト記号」と言い、ゲルマン語から派生した言語に見られる「母音交替現象」のことを言います。

日本の方言をそのまま文字にしたようなイメージです。

これからWebサイトに北欧の文字を表示させたい方は、本文中の一覧をぜひ活用してWebサイト制作の時短を行ってくださいね。

以上、「北欧の文字をWebサイトで表示する方法」でした。

ネットショップやホームページなど、Webサイトの制作に関して気になることがありましたら、お問い合わせまでご連絡ください。

ネットショップコンサルタントの「たぶ」でした。

こちらの記事もおすすめです。

Webサイトを制作していると、グローバルナビが段々にずれることがあります。その解消法をまとめました。

グローバルナビなど横並びにしたリスト要素が段々にずれる現象を直す方法【CSS】

グローバルナビなど横並びにしたリスト要素が段々にずれる現象を直す方法【CSS】

2018年10月17日

スムーススクロールがうまく効かない時ってありませんか?スムーススクロールの動作がおかしい時は、こちらの方法を試してみてください。

スムーススクロールが「トップへ戻る」だけ効かない時の修正方法

スムーススクロールが「トップへ戻る」だけ効かない時の修正方法

2018年10月20日

WordPressでWebサイトを作っていて、2つの固定ページの子ページ一覧を表示させたい時があったので、記事にしました!

初めての米国株投資におすすめの証券会社2選

初めての米国株投資におすすめの証券会社2選

2020年5月18日

WordPressのサムネイル画像がぼやけることがあったので、なぜそうなるのかを解明しました!解決策もまとめています。

子供へのお金の教育について考える【30代男性が考える金融教育】

子供へのお金の教育について考える【30代男性が考える金融教育】

2020年6月25日

【おすすめのレンタルサーバー】

【安定感で選ぶならXserver】

ABOUTこの記事をかいた人

通称:たぶ
30代中頃、東京都在住。
ネットショップコンサルタント。
EC-CUBE、ASP、ショッピングモールなど各種ネットショップでの売上UPが得意。
アパレル系のネットショップの売上を4倍に増やし、月商900万円、年商1億円を達成。
ネットショップ運営の数なら誰にも負けません。
最近、ポメラニアンが気になる。
炊きたての白米が何もよりも好き。