Web

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

投稿日:2019年2月8日 更新日:

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

1. JSFiddle とは?

JSFiddle とは、

  • HTML
  • CSS
  • JavaScript

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

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

JSFiddle
JSFiddle

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

2. ウェブページに埋め込む手順

(1) アカウントを作成します

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

画面右上の「Sign in」をクリックします
画面右上の「Sign in」をクリックします
「Sign up」をクリックします
「Sign up」をクリックします
アカウントを作成します
アカウントを作成します

(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 を押します。

Save を押して保存します
Save を押して保存します

(4) 埋め込みコードを取得します

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

Embed を押します
Embed を押します

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

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

Embed snippet
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 のコードを使って何か説明したい場合に、とても便利だと思います。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

cron-job.org を利用して特定のURLに定期的にアクセスさせる

cron-job.org というサービスの利用手順について説明します。

Google

Google マップの便利な機能

目次1. はじめに2. Googleマップの便利な機能3. 経路検索(ルート検索)経路をホーム画面に追加4. 運転モード5. マイプレイス6. 印刷 1. はじめに Googleマップ はとても便利な …

Web

画面上に日付のないWebページの日付を調べる

画面上に日付のないのWebページの日付を調べる。

Web

Intersection Observer API を使った画像の遅延読み込み

目次1. 画像の遅延読み込み(遅延ローディング)2. Intersection Observer API3. Intersection Observer API を使って画像を遅延読み込みする例1. …

インターネット上での検索方法

Google 画像検索を表すURL http://images.google.com/search?tbm=isch&q=検索キーワード 執筆中