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 development

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する方法を紹介します。

HTML

HTMLの雛形 (CSS, JavaScriptも)

HTMLの雛形 (CSS, JavaScriptも) を載せています。コピーして使えます。

Web

YouTube でコメントが表示されないときの対処法

YouTube でコメントが表示されないときの対処法を紹介します。

Web Vitals

ファーストビューに配置したLCP対象画像に loading=lazyはいらない?

ファーストビューに配置したLCP対象画像と loading属性について説明します。

PWA

Webブラウザと PWA は切り離して欲しい

マイクロソフトはWeb技術を用いてネイティブアプリケーションのように動作するProgressive Web Apps(PWA)を、WebブラウザのEdgeにとどまらず、Windows10のデスクトップ …