オンラインエディタでサクッとHTML/CSS/JavaScriptを実行して結果を確認

オンラインエディタは、主にWebサイトのコーディングのためのブラウザで動作するエディタで、
HTML/CSS/JavaScriptコードを即時確認したり、共有するのに便利です。
CodePenや、Jsbin、Jsfiddleなど、さまざまなエディタがありますが、ここではjsbinについて取り上げます。

JS Bin – Collaborative JavaScript Debugging

jsbin top

jQueryライブラリを読み込んで使ってみる

上メニュー > Add library から読み込みたいライブラリを選択します。
Add library

Consoleに “hello world” と表示させてみます。Javascriptタブと、Consoleタブをそれぞれ選択します。
hello world


Bootstrapを読み込む

上メニュー > Add library から Bootstrap latest (現時点では 3.3.6 が読み込まれる) を選択します。
↓ 選択後の HTMLペインには、 CDNからboostrapを読み込むためのコードが追記されます。

scriptは、DOM解析後に実行されることが望ましいので、一般的には、 bodyの閉じタグ()の前に記述します。
また、cssの読み込みは、headタグの中に記述します。


コードをブログなどに埋め込む(有料アカウント必要)

上メニュー > Share を選択し、Embedの中のコードをブログなどに貼り付けます。
share

無料で コードをブログなどに埋め込みたい場合は CodePen を使うとよいです。


Zen coding

jsbinではzen codingモードが最初から有効になっています。

↑ この行をZen Codeing機能で展開すると以下のHTMLに変換されます。


Githubアカウントと連携してGistでコードを公開する

自身のgithubアカウントと連携することで、Gistですぐにコードを公開することができます。

Filed under: ツールTagged with:

よく読まれている投稿

No comment yet, add your voice below!


Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.