恐れ入りますが、Thimble はお使いのブラウザーでは動作しません

Thimble は、次のすべてのブラウザーで動作します: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (バージョン 8 以降) および Opera。

試してみます！
Thimble の更新があります - ブラウザーをリフレッシュして最新の変更を取り入れてください。

プロジェクトを読み込んでいます

あなたのプロジェクトの読み込みに時間がかかっています。
読み込まれない場合は、ページを再読み込みしてみてください。

Thimble を開始できませんでした。

ブラウザーを再読み込みして Thimble をもう一度読み込んでみてください。

エラーの詳細については、ブラウザーで開発者ツールのコンソールを開いてください。

注意: プライベートブラウジングモードを利用している場合は、通常モードで再読み込みしてください。

ファイル
  • HTML ファイルを追加
  • CSS ファイルを追加
  • JavaScript ファイルを追加
  • チュートリアルを追加
  • フォルダを追加
  • ファイルをアップロード...
  • ファイルをダウンロード (.zip)
エディター
元に戻す

コードスニペットを挿入する

HTML CSS JS
  • コメント
  • 表組み
  • 順序付きリスト
  • 順不同リスト
  • フォーム
  • JavaScript ファイルを含める
  • CSS ファイルを含める
  • 動画プレーヤー
  • 音声プレーヤー
  • コメント
  • 要素型セレクター
  • クラスセレクター
  • ID セレクター
  • キーフレームアニメーション
  • リンクスタイル
  • メディアクエリー
  • フォント
  • 疑似要素を追加
  • コメント
  • 基本的な関数
  • 配列
  • オブジェクト
  • For ループ
  • While ループ
  • If...Else 文
  • Switch 文
  • クリックイベントを追加
  • CSS プロパティを変更
<!-- ここにコメントを追加できます -->
<table>
  <tr>
    <th>見出し</th>
    <th>見出し</th>
  </tr>
  <tr>
    <td>値</td>
    <td>値</td>
  </tr>
</table>

<ol>
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
</ol>

<ul>
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
</ul>

<form action="" method="get">
  <label for="first-name">名</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">姓</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="送信">
</form>

<script src="script.js"></script>
<!-- <link> タグを HTML ファイルに追加します。通常は <head> タグ内に置かれます -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  ご使用のブラウザーは video タグをサポートしていません。
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  ご使用のブラウザーは audio タグをサポートしていません。
</audio>

/* ここにコメントを追加できます */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* アニメーションを適用する要素 */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* アニメーションのコード */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

/* 基本スタイル */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

/* 訪問済み */
a:visited {
  color: Orchid;
}

/* 選択中 */
a:active {
  color: OrangeRed;
}

/* マウスオーバー */
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 320px) {
  /* 画面の幅が 320 ピクセル以下の場合のルール */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* 画面の幅が 321 ピクセルから 768 ピクセルの場合のルール */
}

@media screen and (min-width: 769px) {
 /* 画面の幅が 768 ピクセル以上の場合のルール */
}

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

/* class='arrow' を持つすべての要素の前に矢印を追加します */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// ここにコメントを追加できます

function sayHello(name) {
  console.log("こんにちは、" + name);
}

sayHello("一条寺 烈");

var names = ["一条寺 烈", "伊賀電", "沢村 大"];

var person = {
  name: "伊賀電",
  skills: ["JS", "HTML"]
};

var names = ["一条寺 烈", "伊賀電", "沢村 大"];
var name;

for (var i = 0; i < names.length; i++) {
  name = names[i];
  console.log(name);
}

var count = 5;

while (count > 0) {
  console.log(count);
  count = count - 1;
}

var name = "伊賀電";

if (name === "伊賀電") {
  console.log("こんにちは、" + name);
} else if (name === "沢村 大") {
  console.log("こんにちは、" + name);
} else {
  console.log("こんにちは、異邦人!");
}

var name = "伊賀電";

switch(name) {
  case "伊賀電":
    console.log("こんにちは、" + name);
    break;
  case "沢村 大":
    console.log("こんにちは、" + name);
    break;
  default:
    // どの条件も満たしていない場合の処理
    console.log("こんにちは、異邦人!");
}
  
// id="button" で要素を選択する
var element = document.querySelector('#button');

element.addEventListener("click", function() {
  console.log("Click!");
});

// 要素を id='alert' で選択する
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • 文字サイズ  ()
  • カラーテーマ
  • 長い行を折り返す
  • JavaScript を有効化
  • 空白を表示
  • タグを自動的に閉じる
  • コードの入力補完を有効化
  • SVG 画像をコードとして編集
プレビュー チュートリアル
自動

プロジェクトを公開

最後にこのプロジェクトを公開してから変更がありました。

公開されているバージョンを更新する

こちらのリンクでシェアできます

公開されているバージョンを削除する
公開のプロジェクトには「index.html」が必要です。ファイルを追加して再度試してください。詳しくはこちら
キャンセル
公開
公開のプロジェクトには「index.html」が必要です。ファイルを追加して再度試してください。詳しくはこちら