カスタマイズをもっと簡単に・CodePenでコードを簡単に確認する方法

スポンサーリンク
便利情報

こんにちわ、近頃ちょうど案件の谷間なので、ちょっと真面目にお勉強中のみなみさんです。

先日はついにGoogle Chromeの最新バージョンからFlashの機能が削除されましたし、Web業界は日々変化していますので、定期的に頑張らないとすぐに追い付けなくなっちゃうので……。

さて、そのような状況ですので、近頃は改めてCSSの再勉強をしています。
CSSも日々進化していますし、基本独学で進んできたみなみさんは何となくで理解している部分もありますので、細々としたプロパティなども改めて確認しておこうと思ったのです。

CSSの動作確認方法

CSSのコードを確認する場合、動作確認方法としては主にローカルテスト環境での確認になると思います。
実際、みなみさんもXAMPPやLocal by Flywheelなどのローカル環境を用いて作業したり確認したりしています。CSSのみであればXAMPPで確認することが多いですね。

がっつり作業して確認を繰り返す際には勿論そちらで構わないのですが、ちょこっとふと「これどうなるんだろう?」といった場合には、いちいちローカルテスト環境を起動するのが面倒なこともあります。
WordPressのカスタマイズをしていて、ちょこっとスタイルを変更したい場合、実環境で変更するのは当然ながら遠慮したいところですが、いちいちテスト環境を起動してスタイルを変更して……とするのが面倒というか手間というか。

そういう場合に便利なのが、CodePenです。

CodePenとは

CodePenとは、ブラウザ上で主にHTMLやCSSやJavaScriptなどのコーディングが出来るサービスです。

また、コードをSNSで共有したり、ブログに埋め込んだりすることも出来ます。
良く見かけるのが、技術系ブロガーさんたちがコードなどをブログに埋め込んでいる状態ではないでしょうか。

See the Pen
VwKOrqg
by みなみ (@minami_27)
on CodePen.

こんな感じで埋め込めます。

CodePenの使い方

CodePenは多くの技術系ブロガーさんたちが利用していますが、決して技術系の人だけにオススメという訳ではありません。

ちょっとしたCSSでのカスタマイズなどをしている人にも、充分便利なサービスだったりします。
英語版のみなのでちょっとハードルが高く感じられるかもしれませんが、解説してくださっている日本語記事はたくさんありますので、そちらを参考に挑戦してみてはいかがでしょうか。

ちなみにわたしは、ちょっとしたパーツのカスタマイズはほとんどCodePenでやってます。
がっつりテーマ自体をどうこうという感じであれば、ローカル環境で行ないます。

CodePenに登録する方法

CodePenはユーザー登録しなくても利用は出来ます。
コーディング自体はユーザー登録不要でトップページにある「Start Coding」という虹色のボタンから可能です。ユーザー登録をしておけば、後から保存したコードを編集したり出来ますし、基本的に無料版で充分な機能がありますので、無料ユーザー登録はしておいても損はないんじゃないかな、と思います。

CodePenに登録する方法は簡単です。

  1. CodePenのトップページにアクセスする。
  2. SNSアカウントで登録、もしくはメールアドレスでの登録をする。

これだけです。

出典元:CodePen(https://codepen.io/)

右上の[Sign Up]のボタンか、中央下部の[Sign Up for Free]のボタンからユーザー登録画面に移動できます。

コーディングする方法

実際にコーディングする際は、メニューから[Pen]を選択し、該当する欄にコードを書き込んでいきます。

出典元:CodePen(https://codepen.io/)

こちらは先ほど埋め込んだコードの画面ですが、HTMLとCSSにコードを書き込んだので、下にプレビューが表示されています。

今回はCSSでコードを書いていますが、ライブラリを読み込んでSCSSなどを利用することも出来ます。

出典元:CodePen(https://codepen.io/)

他にもHTMLであれば、HamlやMarkdownなどを読み込むことも出来ますし、JavaScriptもjQueryやVueなどを読み込むことが出来ます。
これらを各種設定せずにワンタッチで簡単に読み込めるのは、とても便利です。

コードをシェアする方法

作成したコードをシェアしたい場合は、画面右下にある[Embed]というメニューをクリックします。

出典元:CodePen(https://codepen.io/)

確認画面が表示されますので、内容を確認して下部にある「Copy & Paste Code」の中身をブログに貼り付けます。

出典元:CodePen(https://codepen.io/)

まとめ

今回は、ちょっとしたコーディングに便利なCodePenのご紹介でした。

いろいろとコードを共有する手法はありますが、リアルタイムで確認出来て、各種ライブラリを簡単に読み込めるCodePenは便利だと思っています。

CodePen以外にも似たようなサービスはあり、使い勝手や好みでいろいろ試して選んでみても良いと思います。

CodePenと似た感じで、コードが見やすいCSS Deckなんかもオススメです。

JavaScriptなら、JS Binも使いやすいのではないでしょうか。

いろんなサービスがあるので、有効的に活用して、効率的に学んでいきたいものです。
じゃないと時間が足りない。圧倒的に足りない。1日48時間ぐらい欲しい。でも体力が足りない。←

タイトルとURLをコピーしました