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

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

関連記事

PWA

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

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

Chrome

Chrome 78 デベロッパーツールの新機能

Chrome 78 のデベロッパーツールにおいて、主な新機能を紹介します。

CSS

overflow:hidden が指定された領域内に、幅の大きい table (表) を記述する

目次1. はじめに2. 対応策3. おわりに 1. はじめに 本ウェブサイトは、スマートフォンのサイズだと 1カラムのレイアウトになるのですが、その際、画面全体を表す HTML要素のスタイルに、「ov …

Web

フォントサイズに関するCSSクラス名にはどんな名前があるのか調べてみました

目次はじめにCSS Fonts Module Level 3FontawesomeBootstrap (v4)まとめ参考 はじめに フォントサイズを表す CSSクラス名として、どんな名前を使うのがよい …

Chrome

Chrome: ツールバー上の拡張機能アイコンをメニューに移動させる方法

Chromeで、ツールバー上の拡張機能アイコンをメニューに移動させる方法について説明します。