HTMLやCSSのコードを解説するページでCodePenの埋め込みを見たことがあるかもしれないが、CodePenとはHTML/CSS/Javascriptのコード記述と実行をブラウザ上でリアルタイムに確認することができるサービスである。 また、ユーザ登録をすれば記述したコードの保存や埋め込みという形でシェアすることができる。
基本的な使い方・利用の仕方は
などにあるが、ユーザ登録したらHTML/CSS/JSの部分にそれぞれコードを記述していくと(ブラウザで表示される)結果がリアルタイムで更新されていく。
本ブログのように埋め込みをしてシェアしたい場合は、小さくてわかりにくいが右下のEmbdedをクリックすると、埋め込みのメニューがあらわれる。 よく見かける設定としてはThemeをdark, click-to-loadにチェックを入れると黒背景になり、またクリックすると処理が始まるようになる。 CodePenのコード、実行結果をシェアする場合は、Copy&Paste CodeでHTMLを選択して、HTMLコードをはてなブログなどのページに貼り付ければよい。
CodePenのデモで作成されたコードを貼り付けた結果が下のようになる。
See the Pen YzqoaJm by ATATAT (@atatat) on CodePen.
CSSやjavascriptのコードの実行結果を記事ごと、ページ読み込み(CodePenを読み込む分は遅くなるが）を大幅に遅くすることなくはてなブログ上に表示するのに使える。
