[Tips]すぐに試せる！html・cssのオンラインコードエディタ「JSFiddle」

Published on: 2022年10月19日
Category: tips
Tags: css,html,オンライン,コードエディタ
Author: SAKUWEB by Liruu Design

初心者のかたでも、すぐに試せるオンラインエディタをご紹介します。

ユーザー登録などの必要もなく、ページを開いたらすぐ利用できますよ！

こんな方におススメ

HTML初心者で、コードエディタを持っていない

手軽にコーディングを始めたい

勉強のために使ってみたい

「JSFiddle」の使い方を知りたい

「html」「css」「javascript」と「結果」のエリアが、1画面上で表示されるので、使い勝手もGood！

ただし、今後本気でやりたい方は「Visual Studio」など、ちゃんとしたやつをインストールしておきましょう！

オンラインコードエディタ「JSFiddle」

JSFiddle

今回紹介するのは「JSFiddle」という海外サイトで、4つのエリアに分かれていて見やすいなと思います！

一応データの保存もできそうですが、URLが発行されるみたいですね。

URLなので、共有も可能ということです。

JSFiddleを使ってみよー！

1+　htmlエリアにコードをコピペ

それではまず、htmlのエリアにコードをコピペ。

コピペしたら、ページ上部にあるRunボタンをクリックします。

もちろん直書きでもOKですが、ちょっと使ってみたいなぁのためにサンプルコード、書いておきますね。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>