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

メールアドレスが公開されることはありません。

関連記事

Amazon からのメールは、アカウントのページから見ることができる

Amazon からのメールは、アカウントのページから見ることができます。

Web

<pre><code>タグが引き起こす モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」

<pre><code>タグが、モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」を引き起こしていました。

WordPress

WordPress の推奨環境

WordPress を動作させるための推奨環境については、以下のページに載っています。 About » Requirements — WordPress 最初に、 To run WordPress w …

Web

未ログイン状態で Facebook を開いた時に表示されるログインウィンドウを消す

目次1. Facebook の仕様変更?2. ブックマークレットの使い方3. 仕組み4. 注意点5. おわりに 1. Facebook の仕様変更? 未ログイン状態で Facebook のページを開く …

Google

Google マップの便利な機能

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