JSFiddle というサービスを使って、ウェブページに HTML/CSS/JavaScript を埋め込んでみましょう。
目次
1. JSFiddle とは?
JSFiddle とは、
- HTML
- CSS
- JavaScript
を ウェブページ上で書いて試すことができるサービスです。
アカウントを登録するとより多くの機能が使えますが、登録してなくても便利に使えます。
JSFiddle で作成した作品は、自分のウェブページに埋め込むこともできます。本記事では、この埋め込み方について説明します。
2. ウェブページに埋め込む手順
(1) アカウントを作成します
作品を埋め込むには、アカウント登録が必要です。なければアカウントを登録します。
(2) HTML/CSS/JavaScript を記述します。
例えば、以下のように記述します。
HTML
<div id="app"></div>
CSS
#app {
color: blue;
font-size: 1.5em;
font-weight: bold;
}
JavaScript
document.querySelector('#app').textContent = "Hello, JSFiddle!";
画面左上にある Run を押すと、書いた内容が実行され、「結果」のエリアに HTML が表示されます。
(3) 保存します
現在の内容を保存するため、画面左上にある Save を押します。
(4) 埋め込みコードを取得します
保存すると画面上部に Embed が現れますので押します。
埋め込む部分の見た目に関する項目を変更することができます。
左下の Embed snippet に表示されているコードをコピーします。
(5) 任意のウェブページに、このコードを貼り付けます
例えば、こんなコードをウェブページにHTMLとして貼り付けます。
<script async src="//jsfiddle.net/laboradian/phjmkqft/3/embed/js,html,css,result/dark/"></script>
以上です。
3. デモ
実際に先程の埋込コードを以下に貼り付けておきます。
4. おわりに
1つ不満を言うと、埋め込んだ部分が平面的(フラット)なデザインであるため、「何かが埋め込まれていて、操作もできそう」というのが伝わらないような気がします。
とはいえ、ウェブページ上で HTML/CSS/JavaScript のコードを使って何か説明したい場合に、とても便利だと思います。