JSFiddle を使って HTML/CSS/JavaScript をウェブページに埋め込む

投稿日：2019年2月8日更新日：2021年2月2日

JSFiddle というサービスを使って、ウェブページに HTML/CSS/JavaScript を埋め込んでみましょう。

1. JSFiddle とは？

JSFiddle とは、

をウェブページ上で書いて試すことができるサービスです。

アカウントを登録するとより多くの機能が使えますが、登録してなくても便利に使えます。

JSFiddle で作成した作品は、自分のウェブページに埋め込むこともできます。本記事では、この埋め込み方について説明します。

作品を埋め込むには、アカウント登録が必要です。なければアカウントを登録します。

例えば、以下のように記述します。

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 が表示されます。

現在の内容を保存するため、画面左上にある Save を押します。

保存すると画面上部に Embed が現れますので押します。

埋め込む部分の見た目に関する項目を変更することができます。

左下の Embed snippet に表示されているコードをコピーします。

例えば、こんなコードをウェブページにHTMLとして貼り付けます。

<script async src="//jsfiddle.net/laboradian/phjmkqft/3/embed/js,html,css,result/dark/"></script>

以上です。

実際に先程の埋込コードを以下に貼り付けておきます。

1つ不満を言うと、埋め込んだ部分が平面的（フラット）なデザインであるため、「何かが埋め込まれていて、操作もできそう」というのが伝わらないような気がします。

とはいえ、ウェブページ上で HTML/CSS/JavaScript のコードを使って何か説明したい場合に、とても便利だと思います。

📂-Web

執筆者：labo