Emerald BoxWeb Sandbox

表示:レイアウト:文字サイズ:14

パーツ集

ボタンでエディタに入れたり、コピーしたりできます

見出し

HTML大見出し h1
ページのいちばん大きなタイトル。タグの間に自分で書こう。
```
<h1></h1>
```
HTML中見出し h2
ページの中の見出し。タグの間に自分で書こう。
```
<h2></h2>
```

段落

HTML文章 p
自己紹介の文章を書く場所。タグの間に自分で書こう。
```
<p></p>
```
HTMLメッセージ欄 p（JS用）
JSのパーツで文字を書き換える場所。
```
<p id="message"></p>
```

画像

HTML画像 img
src に画像のURL、alt に画像の説明を自分で書こう。
```
<img src="" alt="" width="200">
```

リスト

HTML箇条書き ul
好きなものを並べるときに使う。
```
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
```
HTML番号つき ol（ランキング）
順番をつけて並べるときに使う。
```
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>
```

リンク

HTMLページ内リンク
セクションの id と同じ名前にすると、そこへジャンプするよ。タグの間にリンクの文字を書こう。
```
<a href="#hobby"></a>
```
HTML外部リンク
ほかのページへのリンク。href にURL、タグの間にリンクの文字を書こう。プレビューの中では開けないことがあるよ。
```
<a href=""></a>
```

ボタン

HTMLボタン button
JSのパーツと組み合わせて使うボタン。タグの間にボタンの文字を書こう。
```
<button id="color-button"></button>
```

セクション

HTMLまとまり section
見出しと文章をひとまとまりにする。
```
<section id="hobby">
  <h2></h2>
  <p></p>
</section>
```

色

CSS文字色・背景色
見出しの色を変える。「}」の外側に入れてね。
```
h1 {
  color: white;
  background-color: teal;
}
```
CSSページ全体の背景色
ページ全体の色を変える。「}」の外側に入れてね。
```
body {
  background-color: #fff8e7;
}
```

文字

CSS文字の大きさ
文章の大きさを変える。「}」の外側に入れてね。
```
p {
  font-size: 18px;
}
```
CSS真ん中寄せ
見出しを真ん中に置く。「}」の外側に入れてね。
```
h1 {
  text-align: center;
}
```

枠線

CSS枠線と角丸
画像に枠をつけて丸くする。「}」の外側に入れてね。
```
img {
  border: 4px solid hotpink;
  border-radius: 50%;
}
```

余白

CSS余白（margin / padding）
外側と内側にすき間をつくる。「}」の外側に入れてね。
```
section {
  margin: 16px;
  padding: 16px;
  border: 2px dashed gray;
}
```

並べ方

CSS横に並べる（flex）
リストを横一列に並べる。「}」の外側に入れてね。
```
ul {
  display: flex;
  gap: 12px;
  list-style: none;
}
```

動き

CSSマウスを乗せると色が変わる
ボタンにマウスを乗せたときの色。「}」の外側に入れてね。
```
button:hover {
  background-color: orange;
}
```

ボタン

JS押すと背景色が変わる
HTMLの「ボタン button」パーツと一緒に使う。HTMLのパーツを入れてから「▶ JS実行」を押すと動くよ。1回だけ入れてね。
```
const colorButton = document.querySelector('#color-button')
colorButton.addEventListener('click', () => {
  document.body.style.backgroundColor = 'lightblue'
})
```
JS押すと文字が変わる
HTMLの「ボタン button」「メッセージ欄 p」パーツと一緒に使う。'' の間に出したい文字を書こう。HTMLのパーツを入れてから「▶ JS実行」を押すと動くよ。1回だけ入れてね。
```
const messageButton = document.querySelector('#color-button')
messageButton.addEventListener('click', () => {
  document.querySelector('#message').textContent = ''
})
```

メッセージ

JSメッセージを出す
「▶ JS実行」を押すと、かっこの中に書いたメッセージが出るよ。
```
alert('')
```

HTML

CSS

JavaScript

プレビューHTML/CSS は自動反映・JS は手動実行