HTMLの特殊文字で表示できる星を現役デザイナーが解説【初心者向け】

初心者向けにHTMLの特殊文字で表示できる星について解説しています。最初にWeb上で特殊文字を扱う方法について説明します。次に星マークの中で文字コードを使ったほうがよいものについて、それぞれの表記と文字コードを見ていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLの特殊文字で表示できる星について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

特殊文字で表示できる星について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLの特殊文字で表示できる「星」を表示してみよう!

今回は、HTMLの特殊文字で表示できる★を表示する方法について解説してみます。

特殊文字とは

通常の半角英数字、ひらがな、カタカナ、漢字、ごく一部の記号を除いた特別な記号のことを指します。単位、郵便番号、数学などで登場する算術記号などが含まれます。全部覚えておく必要はありません。

Googleで、「任意の出したい記号」と「文字コード」と半角スペース区切りで入力し検索しましょう。出た結果をコピー&ペーストすると良いでしょう。特殊文字表一覧のサイトをブックマークしておいても良いでしょう。

★の出し方

ほとんどの記号に関しては、「ほし」と入力し、文字変換して使うとよいでしょう。4つの括弧のみ、コードで入力した方がよいのですが、実際サイト制作で必要になることはない、と考えてよいでしょう。

一般的によく使われるであろう星

では、一般的な星以外の特殊な星のような記号を表示してみます。(一般的な名称を入れてみました)

★/★  ☆/☆
以下は特殊記号
✝/✝/十字架   ✞/✞/十字架   ✟/✟/十字架
✠/✠/マルタ十字
✱/✱/アスタリスク   ✲/✲/花
✿/✿/花   ❀/❀/花
❅/❅/結晶   ❆/❆&#10056
❇/❇/結晶   ❈/❈/結晶
❉/❉/結晶   ❊/❊&#10056
❋/❋/花   ✡/✡/ダビデの星(ヘキサグラム)
✩/✩/星   ✪/✪  ✫/✫/星

結構ありますね!!!

機種依存文字なので、文字コード必須となる星

文字コードでの表示は横に表示しております。

★/★  ☆/☆
以下は特殊記号
✝/✝/十字架   ✞/✞/十字架   ✟/✟/十字架
✠/✠/マルタ十字
✱/✱/アスタリスク   ✲/✲/花
✿/✿/花   ❀/❀/花
❅/❅/結晶   ❆/❆&#10056
❇/❇/結晶   ❈/❈/結晶
❉/❉/結晶   ❊/❊&#10056
❋/❋/花   ✡/✡/ダビデの星(ヘキサグラム)
✩/✩/星   ✪/✪  ✫/✫/星

 

注意:一部の記号表示は文字コードを使うこと!

基本的な全角の★や☆については、そのまま入力でよいでしょう。

一部の特殊な星については、機種依存文字となるので、HTML上では文字コードでの入力がベターです。

クライアントさんからいただいた原稿からコピー&ペーストする際にはこれらの記号は大丈夫かを確認すること(別途文字校正担当さんがいても軽くは見ておきましょう)、特殊文字記号を使った場合は、制作物の納品前にそういった記号が正しく表示されているか?を端末毎にチェックしておきましょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

注意:サイト全体での記号の統一

補足的な注意となりますが、サイト全体での記号の統一も重要です。☆や★や※が混在しているようなサイトは読みにくく、文字校正上でも適切ではありません。一般的な用例、用法に沿った使い方をすること、統一をするように心がけることも必要です。

今回は、HTMLの特殊文字で表示できる星の表示、表示方法について紹介しました。

 

監修してくれたメンター

ゆかちん先生

フリーランスのクリエイティブディレクター。
制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。