僕の世界観を変えてみる

比較的簡単なHTMLでWebサイトを作ってみるのでその過程を綴っていいたいと思っています。

サイト上でHTMLやCSSをプレビュー表示させる、CODEPEN!

f:id:htmllifehack:20151228215451j:plain

 CodePenとはHTMLやCSS、JavaScriptもプレビュー表示できるサイトです。ブログ改造系だったりweb系だったりとブログを回ってたらたまたま見つけたところで、コードとその結果こうなるよというのを紹介するときは便利です。

今回はこのCodePenについて書いていこうかと思います。 

codepen.io

 

codepenの登録方法

記事一番上のリンクからcodepenのサイトへ飛んで右上のSign Upをクリックしユーザー登録します。

 

f:id:htmllifehack:20151228223429j:plain

 

一見月額制のように思えますが下に行くとFree Pranという項目があるのでこのSign Upをクリックします。

 

f:id:htmllifehack:20151228223442j:plain

 

あとは名前、ユーザーネーム、アドレス、パスワード、を入力し終わりです。

 

f:id:htmllifehack:20151228221928j:plain

 

確か名前はあとで変更できたかと思います。

では次に使い方を軽くご紹介します。

 

CodePenの使い方

まずはトップページ右上にあるNew Penをクリックします。

 

f:id:htmllifehack:20151228225522j:plain

 

あとは好き勝手にコードを書いていきましょう。

 

f:id:htmllifehack:20151228230025j:plain

 

サイトへの貼り付け

web上でコードを書いてリアルタイムにプレビュー表示してくれるサイトは多数ありますが、それをブログなどに張り付けられるのはあまり見かけません。CodePenでは貼り付けができることが強みですね。

 

f:id:htmllifehack:20151228232645j:plain

 

コードを書いたらSaveをクリックします。そうすることでCodePenトップページからいつでも呼び出すことができます。

Saveすると画面下にメニューバーが表示されますのでそこの右下、Exportをクリックします。そうすると3つ、メニューが表示されるのでその中のEmbed Penをクリック。

 

f:id:htmllifehack:20151228233246j:plain

 

これで下のコードをコピペしてブログに貼り付けるだけで完成です。

コードの下にWordPress ShortcodeとiframeとHTMLとありますが、僕の場合はiframeで貼り付けしています。HTMLでも大丈夫なのですがはてブロの編集画面で表示されないこともあるので。

上のUse Click-to-Play Preview Before Lodingにチェックを入れると、クリックするとプレビュー表示されるようになります。

 

 

 上がチェックなしバージョンです。

 下がチェックありバージョンです。 

 

 Run Penというボタンが表示されクリックすることでプレビューが表示されるようになりました。

僕は前回の記事でグローバルメニューの作り方を紹介し、そこで初めてCodePenを使いました。

htmllifehack.hatenablog.com

記事を読んでもらえばわかるように、本当はHTMLだけ書いた状態のメニューバー、次にCSSで横並びにしたメニューバー、最後にボタンのように表示させたメニューバーとしたかったのですがすべてのプレビューで完成形が表示されるようになってしまいました笑

ブログなどで紹介する際はこの辺気を付けましょう。