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

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

関連記事

Glitch

Glitch で PHP を使う方法

Glitch は正式にPHPをサポートしていませんが、ほんの少しの設定変更により、PHPが使えるようになります。

Web

ブラウザをキーボードで操作するための拡張機能 Vimium

ブラウザをキーボードで操作するための拡張機能 Vimium について説明します。

DokuWiki

DokuWiki のアクセス設定チェックが面白い

目次1. It seems your data directory is not properly secured.2. 対応方法3. 珍しいアクセスチェックの仕組み4. おわりに 1. It see …

HTML

HTML の基礎

HTML の各タグに関する情報を提供します。主に HTML5 の情報を扱います。 (HTML5の仕様書である HTML Standard を翻訳している部分も多くあります) 後半では、タグ毎に使い方な …

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。