Webエディタ「CodePen」が、完全無料のクロスブラウザチェックに神対応したので使ってみた！

　

　

　どうも、まさとらん（@0310lan）です！
　
　ブラウザ上で、すぐにWebプログラミングを楽しめる「CodePen」をご存知でしょうか。
　
　サンプルコードの実験をしてみたり、Webサイト・アプリを作って共有したり、自分のブログに貼り付けて紹介したり…などが出来るようになっています。
　さらに、「PC・スマホ」のあらゆるブラウザチェックにも無料で対応できるようになったので、概要をピックアップしてご紹介しようと思います！
　
　
　

まずは、コードを書いてみる！「CodePen」を使って「クロスブラウザチェック」をする前に、簡単な使い方を紹介しておきます。
　
　まず、無料のアカウントを取得してからサイトにアクセスし、「New Pen」ボタンをクリックします。
　(登録しなくても利用はできますが、クロスブラウザ機能はアカウントが必要…)
　
　
　次に表示される「コードエディタ」を使って、自分の好きなようにプログラミングをしていきます。
　
　
　今回は、簡単なWebサイトを作ってみました…。そして、上部メニューにある「Save」ボタンをクリックします。
　
　
　すると、メニュー表示が少し変化したのが分かります。
　これで、自分のアカウントにコードが登録されて、クロスブラウザチェックを使う準備が整ったことになります。
　
　
　クロスブラウザチェックを使ってみる！それでは、先ほど作ったWebサイトで「クロスブラウザチェック機能」を使ってみましょう。
　
　まず、上部メニューに表示されている「Editor」から、「Open on CrossBrowserTesting」を選択します！
　
　
　すると、専用のテストページへアクセスすることが出来ます。(初回のみ、無料のユーザー登録が必要)
　これは、「crossbrowsertesting.com」という別のWebサービスと連携することで実現しています。
　
　
　実は、「crossbrowsertesting.com」は基本的に有料サービスで、無料プランでも1週間しか利用できない制限が付いています。
　
　ところが、驚くことに「CodePenユーザー」であれば「制限」を解除し、無料で利用出来るようになっているのです！
　
　
　そのため、PC環境設定も「Mac・Ubuntu・Windows」などのOSや、「Chrome・Firefox・IE・Opera・Safari」といったブラウザもすべて利用できます。
　
　
　さらに、スマホ環境設定も「Android・iOS・Windows Phone」から選択でき、ブラウザも「Chrome・Mobile Safari・Opera・Dolphin・Sleipnir」など多彩な選択肢が用意されています。…