1. CodePen（コードペン）とは？
CodePen は、HTML・CSS・JavaScript を
すぐに ためす ことが できる サイト です。
- インストール しなくて いい
- ログイン しなくても つかえる
- ブラウザ だけで OK
だいじ： この ページ では、ログイン しない つかいかた を せつめい します。
2. CodePen を ひらく
- ブラウザで CodePen と けんさく します。
- 「CodePen」を クリック します。
Google Chrome を つかうと、あんてい します。
3. あたらしい Pen を つくる
- 画面 うえ の Start Coding を クリック。
- 3つ の しかく が でます。
- HTML
- CSS
- JS（JavaScript）
- プレビュー
チェック： まずは HTML だけ つかいます。
4. HTML に かいて みよう
HTML の しかく に、つぎ を かいて ください。
<h1>こんにちは！</h1>
<p>これは CodePen です。</p>
かく と、すぐ みぎがわ に けっか が でます。
5. HTML の だいじな ルール
① タグは ペア で かく
<p>ぶん</p>② 上から 下へ よまれる
HTML は、上 から じゅんばん に ひょうじ されます。
6. よく つかう タグ
<h1>：タイトル<p>：ぶん<br>：かいぎょう<a>：リンク<img>：がぞう
7. リンク を 入れて みよう
<a href="https://www.google.com">Google</a>クリック できる もじ に なります。
8. がぞう を 入れる（テスト）
CodePen では、じぶん の がぞう は つかいにくい です。
まずは、テスト よう の がぞう を つかいます。
<img src="https://placekitten.com/300/200">
これは テスト よう の がぞう です。
9. ほぞん について
- ログイン しない と ほぞん できません
- でも、れんしゅう だけ なら OK です
だいじ： きょう は ほぞん しません。
ミニれんしゅう
- タイトル を かく。
- じぶん の すきな もの を かく。
- 2つ の
<p>を つかう。
<h1>わたしの すきな もの</h1>
<p>わたしは ○○ が すきです。</p>
<p>まいにち べんきょう しています。</p>