Codepenの使い方

今回は、ブラウザ上で手軽にコードを書いて試せる「CodePen（コードペン）」の使い方をご紹介します。
特に、HTML・CSS・TypeScriptを使いたい方に向けて、基本的な流れをまとめました。

Codepenの使い方

Codepenとは

CodePen は、ブラウザ上でHTML・CSS・JavaScript（またはTypeScript）を書いて、すぐにその結果を確認できる非常に便利なツールです。

HTML・CSS・TypeScriptの練習にも最適なので、ぜひ活用してみてくださいね。

アカウントがなくても使えますが、保存したり共有したりする場合は無料アカウント登録をすると便利です。

Step 1：新しいPenを作成する

1. CodePenにアクセスする

2. 左上の「Start Coding」をクリックする
   

3. 編集画面（ペンエディター）が開く
   

画面は次の3つに分かれています

• HTML：HTMLを書くエリア
• CSS：CSSを書くエリア
• JS：JavaScriptを書くエリア

Step 2：TypeScriptを使えるように設定する

CodePenのデフォルトではJavaScriptが使われていますが、TypeScriptも使うことができます！

1. JavaScriptエリア右上の「設定（歯車アイコン）」をクリックする
   

2. 「JavaScript Preprocessor（プリプロセッサ）」から TypeScript を選択する
   

3. 「Close」ボタンをクリックして設定を完了する。
   エリア名に「JS（TypeScript）」と表示されていれば完了です！
   

これでTypeScriptが書けるようになります！型エラーもチェックされて便利です。

Step 3：HTML・CSS・TypeScriptを書いてみる

以下のように、HTML・CSS・TypeScriptをそれぞれ書いてみましょう。

HTML（例）：

<h1 id="title">こんにちは CodePen！</h1>
<button id="changeBtn">文字を変える</button>

CSS（例）：

body {
  font-family: sans-serif;
  text-align: center;
  margin-top: 50px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
}

TypeScript（例）：

const button = document.getElementById("changeBtn") as HTMLButtonElement;
const title = document.getElementById("title") as HTMLHeadingElement;

button.addEventListener("click", () => {
  title.textContent = "ボタンがクリックされました！";
});

「文字を変える」ボタンをクリックして、テキストが「クリックされました！」と表示されたらOKです！

まとめ

CodePenは、ちょっとしたフロントエンド開発やデザインの試作にとても便利なツールです。
特に、HTML・CSS・TypeScriptの学習や動作確認にぴったりなので、ぜひCodePenを活用してみてくださいね！