プロジェクトを公開
最後にこのプロジェクトを公開してから変更がありました。
ブラウザーを再読み込みして Thimble をもう一度読み込んでみてください。
エラーの詳細については、ブラウザーで開発者ツールのコンソールを開いてください。
注意: プライベートブラウジングモードを利用している場合は、通常モードで再読み込みしてください。
<!-- ここにコメントを追加できます -->
<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";