HTML/CSS Ricty Diminished プログラミング用フォント

【プログラミング】プログラミング用フォントを導入してみよう【フォント】

投稿日:2020年3月26日 更新日:

プログラミング用フォントなるものが存在していることを知りました。まだ知らないという方の為にブログに残しておこうと思います。

参考までに私の使用目的はHTML/CSSです。ですが、どのプログラミングでも使えるものだと思いますので一度使ってみてください。

<< プログラミング用フォントとは

「プログラミング用フォント」といきなり言われてもよくわからないと思います、私も最初は普通のフォントと何が違うんだろう?と思っていました。

プログラミングを書く上で都合の良いフォントということのようで、一文字でも間違えると想定とまったく違った結果になってしまうのがプログラミングというものです。

例えば「全角スぺースが混ざってしまっていた」これは見つけるのが大変ですよね。しかし、プログラミング用フォントを使用していれば全角スぺースがわかりやすく□のように可視化されるのです。

他にも見分けがつきにくい「1(いち)」「l(小文字のエル)」「I(大文字のアイ」「0(数字のゼロ)」「O(大文字のオー」などもわかりやすく可視化してくれるフォントのようです。

<< Ricty Diminished

ご紹介させていただきたいのが” Ricty Diminished “というフォントです。 他にもいくつかあるようですが、これしか知らないからです(汗)

こちらからダウンロードできます。 (英語のサイト)
https://github.com/edihbrandon/RictyDiminished

ダウンロードできるファイルがいくつもありますが” RictyDiminished-Regular.ttf “でいいと思います。

クリックすれば次のページに進み、Downloadのボタンが出てくるのでクリックしてダウンロードしましょう。

ダウンロードしたファイルを開くと下の画像が表示されるので、左上にあるインストールをクリックしてください。そうすればインストールされます。

>> Visual Studio Code に設定する

フォントをインストールできたら、Visual Studio Codeの使用フォントに指定してあげましょう。

Visual Studio Codeの導入方法はこちらで紹介しています。
>> http://icewine1794.com/archives/150

Visual Studio Codeを起動したら、ファイル >> 基本設定 >> 設定 で設定画面を開きます。

>>テキストエディターをクリックして隠れているメニューを開きます。その中にある「フォント」をクリックします。

右側に” font-family “が表示されるのでそこへ” Ricty Diminished “と入力してフォントを指定してあげましょう。(スペースも必要)

これでフォントが反映されるはずです。即時反映されない場合はVisual Studio Codeを再起動すれば反映されます。

画像小さいですが、上記の画像のように全角スペースがわかりやすく□のような表示になり、ゼロは真ん中に” / “が入ってわかりやすくなっていますね。このように表示されていれば問題なく導入されているかと思います。

ぜひ導入してみてくださいね。ではまた。

データ容量無制限【ポケットモバイルCloud】

1年間契約!月額3,280円(税抜)でデータ容量無制限!どこよりもWiFi

業界最安級!クラウド型ポケットWi-Fi【ギガWi-Fi】

国内外どこでも簡単に使える!めっちゃWiFi

国内も海外もこれ1台!【GMOとくとくBB】ギガゴリWiFiワールド

世界で使えるクラウドWi-Fiを月額3,380円でレンタル!

「BIGLOBEモバイル」でスマホ通信費を節約!?

国内最高峰の SEO 最適化 WP テーマ 【ザ・トール】



ランディングページ機能付きWordPressテーマ Emanon

日本語対応高品質WordPressテーマ

WordPressテーマ 「STREETIST」

月額実質割引キャンペーン実施中!月額実質1,700円/集合住宅/2年契約〈自動更新〉【ソフトバンク光】

「TEPCO」の電気・ガスの契約で、今ならAmazonプライムが永年無料でご利用可能!

工事不要!インターネット使い放題【SoftBank Air】

国内最大級の釣り動画サービスはこちら









-HTML/CSS, Ricty Diminished, プログラミング用フォント
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【超簡単】便利ツールを使ってプログラミング/コーディングをカンタンにしよう【クイックスマイリー】

HTML/CSSを勉強しているとある程度決まったお約束のタグやコードが存在するのがわかります。 それの組み合わせになってくるので、何度も同じタグやコードを入力するのって面倒。。。 微妙に間違えると反映 …

【無料】CSS Flexbox学習をゲームでやってみよう【1時間】

HTML/CSSの学習をしている初心者のみなさん、復習や腕試しをしてみたいみなさんにオススメの無料ゲームがあります。 比較的初心者向けのゲームになっていますが、視覚的に楽しめて1時間程度でクリアできる …

【HTML】Visual Studio Code ダウンロード~日本語化まで(無料)【CSS】

ブログを再開してからHTMLとCSSの勉強もスタートしました。 今までWindows標準搭載の「メモ帳」でコードを書いていましたが、” Visual Studio Code “ …

【上達の近道】プログラミング学習が効率が驚くほどよくなる方法【初心者向け】

プログラミング学習の効率が驚くほどよくなる方法をお伝えします。 わたし自身、現在勉強の身なので偉そうなことは言えませんが、現在進行形で勉強しているからこそお伝えできることもあると思っています。 まだ勉 …