CodePenでフォント・文字サイズを変更する方法

プログラミング初心者がHTML、CSS、JavaScriptを勉強するためのおすすめのWEBサービスCodePen（コードペン）。

オンライン上のプログラミングエディタで、コードを記述すると同時にほぼリアルタイムでその結果を隣に表示してくれ、しかも文法やエラーのチェックもしてくれます。なんといっても、プログラミングをするための環境を全く揃えなくてもいいのが良い点です。ブラウザ上で動きます。

そんな便利なCodePenですが、フォントの種類や文字サイズを変更したくなることがあると思います。

そこで今回はその方法を説明します。簡単にできます。

まず、画面右上にある自分のプロフィールアイコンをクリックして、「Settings」という項目を表示させましょう。次の画像を見て下さい。

そしてその「Settings」項目をクリックすると、次の画面に移ります。

「Settings」という項目の下に、ProfileやAccountといった項目があって･･･

Editor Preferencesという項目があります。それをクリックしましょう。

そうすると、画面上部に「HTML」「CSS」「JS」というタブのあるスペースがあって、その下に各種設定のためのスペースが登場します。

そして「Fonts」という項目を見つけてください。そこに次の2つの項目があります。

・Code Font Family（フォントの種類の設定）
・Code Font Size（文字サイズ設定）

あとは各自お好きに設定しましょう。

なお、変更した設定についてはなにか特別な「保存ボタン」などのボタンを押す必要はありません。変更したと同時にそれが反映されますので、そのままプログラミングエディタに戻り、F5でも押してブラウザのページを更新しましょう。設定して情報が反映されるはずです。

以上です。ではみなさん、CodePenで楽しいプログラミングライフを。