未経験・文系アナログ女のプログラミング挑戦記!

未経験・文系アナログ女が、最小限のお金でプログラミングに挑戦します!

HTMLの学習環境を整える②(Windowsの場合)

こんにちわ。花月夜です。

今日はHTMLの学習環境を整える方法の続き

について書いていきたいと思います。
 

前回のブラウザとテキストエディタはHTMLに

必須なものですが、今日は「設定した方が便利」な

ものをご紹介します。

 

 

HTMLの学習のための推奨設定

  • プログラミング用フォントの設定
  • 拡張子が表示されるように設定

 

プログラミング用フォントの設定

プログラミング用フォントとは、プログラミングをする上で

全角・半角の区別、見間違えしやすい文字を判別しやすくした

文字のことです。(Lの小文字lのとiの大文字のIの違いとか)

ドットインストールは、Ricty Deminishedを推奨しています。

 

設定の仕方は、

①好きなフォントの配布サイトからダウンロードする

②ダウンロードしたファイルをインストールする

テキストエディタのフォントを変更する

の順で、設定します。

 

ちなみにAtomの場合は、以下の手順で設定します。

ファイル(file) 

→ 環境設定(setting) 

→ エディタ設定(editor) 

→ フォント(font family)に好きなフォントを入力

  (ex. Ricty Deminished)

 

人気のプログラミング用フォント

Ricty Deminished

特徴:①ラテン文字には Raph Levien 氏の Inconsolataを適用

   ②それ以外の文字には Circle M+ 1m を適用

    視認性の高い日本語文字 (半濁音など) が使用できる

   ③半角文字と全角文字の横幅の比が 1:2 に調整

   ④全角スペースが可視化されます。

   ⑤いくつかの全角グリフが対応する半角グリフと差別化

   ⑥en ダッシュ、em ダッシュが破断線のようになります

    (LaTeX での入力ミス防止のため)。

 

引用元:Github Inc,  プログラミング用フォントRicty Diminished

https://www.rs.tus.ac.jp/yyusa/ricty_diminished.html

 

Myrica

特徴:①ASCII文字は「Inconsolata」が適用されます。

   ②それ以外の文字には「源真ゴシック」または

    「Mgen+」が適用されます。

   ③半角文字と全角文字の横幅の比が 1:2 に

    調整されています。

   ④視認性の高い日本語文字 (半濁音など) が

    使用できます。

 

引用元:プログラミング用フォントMyrica / Estable

https://myrica.estable.jp

 

拡張子が表示されるように設定

Windows 8 / 8.1、Windows10の場合

エクスプローラーを起動

②「表示」タブをクリック

③ウインドウ上部に表示される「ファイル名拡張子」の

 横のチェックボックスに印を入れる。

 (ボックスをクリックして、☑と表示されればOK)

 

Windows 7 の場合

エクスプローラーを起動

②「ツール」タブをクリック

④「フォルダーオプション」をクリック

⑤「表示」タブをクリック

⑥「詳細設定」のリストの中から、

 「登録されている拡張子は表示しない」のチェックを

   外す(☐にしたらOK)

 

※もう1つの表示方法は、

 「スタート」 →「コントロールパネル」

        →「デスクトップのカスタマイズ」

        → ④~⑥は同じ

まとめ

HTMLの学習環境を整えるには、

①ブラウザと②テキストエディタが必須で、

可能ならプログラミング用フォントを設定し、

拡張子を表示させる設定をしておきましょう。

 

あとがき

プログラミング用フォントで人気の2つのフォントを

紹介しましたが、全角スペースがあることが□と表示されて

分かりやすいので、Ricty Deminishedの方がお勧め。

プログラミングをしていると、全角スペースの有無で

エラーになってしまうこともあるので。

 

あと拡張子は、絶対に表示させた方がいいですよ。

初心者あるあるで、拡張子を表示させなかった時に、

「これはウサギの画像だから、分かりやすいように

『usagi.png』と名前をつけよう!」

とファイル名をつけたら、

「usagi.png.png」が正式な拡張子なのに、混乱してしまった

なんてこともありますよ!(今日私がやったことです……)