Codepenをもっと便利に使うための設定【無料機能】

CodePenで設定しておきたい便利な機能設定についてまとめておきます。無料版での設定ですので、コードの練習に最適ですね。

設定を変えれば、HTML・CSS・JavaScriptの他にいろんな方法で書くことができます。
CSSはSCSSで書くことができ、「Slick(スリックスライダー)」なども使用することもできます。
種類豊富なので学びながら記録も出来る超便利サイト。

Codepenが初めての方は下記の記事から登録方法から解説しています。

Codepenの始め方と使い方-記事内にコード埋め込み【無料便利機能】無料会員で自由にコードが書ける「Codepen」ブラウザ上でHTML・CSS・JSのコーディングがプレビュー付きで利用できるサービスです。...

エディター予測変換機能

コードの頭文字から予測変換をする設定についてです。Visual Studio CodeやAdobe Dreamweaverで予測変換機能が付いているように、CodePenにもその機能が備わっています。

この機能があるだけで飛躍的に早くコードミスも減らせる便利機能ですね。

右上の「アイコンをクリック」→「Settingsをクリック」

Settingsの「Editor Preferencesをクリック」→Editor Optionsの「Auto completeにチェックを入れる」

これで予測変換機能が使用できます。

Editor Optionsの設定内容

コーディング画面変更

コーディングする際に、自身の見やすいようにテキスト色と背景色を変更できます。14種類のパターンがあるので好みの色合いが見つかると思います。

他ユーザーのソースコード

複雑なCSSやJavaScriptなど実装が難しい場合は、他者のソースコードを参考にするのが学習において効率がいいです。

気になるデザインのソースコードをコピーペーストで自身のコード画面に張り付けて、そのコードの一部分を消したり追加してみたりとどこが変わるか、どんな動きになるのか確認しながら学習することができますね。

自身のコードディング一覧

「Save」した自身のコードをプレビュー付きで一覧で管理されています。「Your Work」をクリックして確認。

WEB制作チーム内でコード共有

チームで分かれてパーツ制作する場合に担当したパーツの共有にも最適。

まとめ

CodePenは現在日本語対応されていませんが、触っていくうちに操作を覚えていけると思います。リアルタイムプレビューがあるので練習しつつコーディングスキルアップにとてもよいツールです。