WebDesigner's Memorandumウェブデザイナーの備忘録

手軽にコーディングの勉強ができるCodePenをもっと便利に使うための設定

CodePenの便利な設定

CodePenはHTML・CSS・JavaScriptを使ったコードを、ブラウザ上で作成して公開できるサービスです。

公開したPen(CodePen上では作成したコードを「Pen」と呼びます)はブログに埋め込めたり、他の人のPenを見ていいねしたりSNSとしての要素も兼ね備えています。

コードを書く人にとって非常に勉強になるサービスです。今回はそんなCodePenで設定しておきたい設定・小技についてまとめておきます。

エディタの設定変更

まずはエディタを自分好みのものに設定する方法から。
右上のプロフィールアイコンをクリックして[Settings]をクリックします。ちなみに、メニュー内にある[Settings]はPenの設定のことなので全然別物なので注意しましょう。

CodePenのSetting

[Settings]→[Editor]でエディタの設定ができます。自分が設定した項目は下記の通りです。

  • [Code Font Size]を15pxから16pxに変更
  • [Code Indentation]を「Spaces」2つに変更

「Syntax Hilighting(テーマの設定)」や「Key Bindings」などもいじろうかと思いましたらが、特別困っているわけではありませんでしたし、テーマもデフォルトが一番自分にしっくり来たのでそのままにしています。

プリプロセッサのデフォルト設定

CodePenではHTMLなら「Haml」や「Pug」、CSSなら「SCSS」や「Less」、JavaScriptなら「Babel」や「CoffeeScript」といったプリプロセッサをサポートしています。

それぞれの言語左にある歯車アイコンを押して「Pen Settings」を開くことで、どのプリプロセッサを使用するか選択できます。

しかし、毎回設定をするのは面倒なので、デフォルトの設定をしてしまいます。

さきほど同様に[Settings]→[Editor]の「Preprocessor & Library Defaults」から設定できます。自分の場合設定したのはCSS関連のみです。

  • [CSS Preprocessor]SCSSに変更
  • [Prefixing]Autoprefixerに変更

ちなみに一番したの[Auto Update Preview]は、コードが変更されると自動的にプレビューも変更される機能なのですが、微妙にラグがあるので使いにくければチェックを外しておきましょう。

あとは隣の[Editor Options]でエディタの細かい設定も可能です。それぞれ下記の機能を表しているので必要に応じてチェックを付けたり外したりしましょう

設定項目機能デフォルト
Line Numbers行番号を表示するオン
Line Wrapping行折返しをオンにするオン
Code Foldingコード折りたたみ機能をオンにするオン
Match Brackets対応する括弧をハイライトするオン
Autocompleteオートコンプリート機能をオンにするオフ

テンプレート機能の設定

コードを書く時に毎回同じような設定、記述をしている場合は「テンプレート」機能を使うと便利です。

テンプレートの設定方法は、あらかじめ入力しておきたい内容を設定した後、メニュー内の[Settings]から「Regular Pen | Template」のチェックをオンにするだけです。

Templateへの反映

テンプレートを使用したい場合は[Create]→[Pen]の下にある[from template]からテンプレートとして登録したPenの名前を選択するだけです。

読み込むライブラリなどもテンプレートとして設定しておけるので、ちゃんと設定しておけばすぐにコードが書けるようになります。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね