もくじ
初級
要素を指定しやすい構造にしてありますので、まずは要素の指定方法をしっかりと身につけましょう。
ボタンクリック練習用
狙ったボタンをクリックしてみましょう。（クリックするとブラウザにダイアログが表示されます）
以下は、3つのボタンを含むサンプルです。
<p id="description" class="blue">以下は、3つのボタンを含むサンプルです。</p>
<button id="button1" name="alert_btn" class="green" onclick="alert('ボタン1をクリック！')">ボタン1</button>
<button id="button2" name="alert_btn" class="green" onclick="alert('ボタン2をクリック！')">ボタン2</button>
<button id="button3" name="alert_btn" class="green" onclick="alert('ボタン3をクリック！')">ボタン3</button>フォーム入力用
狙ったフォームにテキストを入力してみましょう。（パスワード欄は入力された文字が見えるようにしてあります）
<form id="form1" name="form1" class="input-form">
<label for="name">名前:</label>
<input type="text" id="name" name="name"><br>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email"><br>
</form>
<form id="form2" name="form2" class="input-form">
<label for="password">パスワード:</label>
<input id="password" name="password"><br>
</form>
<form id="form3" name="form3" class="input-form">
<label for="age">年齢:</label>
<input type="number" id="age" name="age"><br>
</form>情報の取得用
狙った情報を取得してみましょう。（ ID だけでなく、クラス名やタグ名でも取得してみましょう）
テーブル
| 名前 | 年齢 | 性別 |
|---|---|---|
| 田中 太郎 | 25 | 男性 |
| 山田 二郎 | 31 | 男性 |
| 鈴木 三郎 | 28 | 男性 |
| 佐藤 由美子 | 24 | 女性 |
| 高橋 花子 | 27 | 女性 |
<table id="table1" class="sample">
<thead>
<tr>
<th id="name">名前</th>
<th id="age">年齢</th>
<th id="gender">性別</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">田中 太郎</td>
<td class="age">25</td>
<td class="gender">男性</td>
</tr>
<tr>
<td class="name">山田 二郎</td>
<td class="age">31</td>
<td class="gender">男性</td>
</tr>
<tr>
<td class="name">鈴木 三郎</td>
<td class="age">28</td>
<td class="gender">男性</td>
</tr>
<tr>
<td class="name">佐藤 由美子</td>
<td class="age">24</td>
<td class="gender">女性</td>
</tr>
<tr>
<td class="name">高橋 花子</td>
<td class="age">27</td>
<td class="gender">女性</td>
</tr>
</tbody>
</table>ドロップダウン
<label for="animal-dropdown">動物の種類：</label>
<select id="animal-dropdown" class="dropdown-list" name="animal-name">
<option value="dog">犬</option>
<option value="cat">猫</option>
<option value="rabbit">ウサギ</option>
<option value="hamster">ハムスター</option>
</select>中級 – 1
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>性別</th>
</tr>
<tr>
<td>山田 太郎</td>
<td>35</td>
<td>男性</td>
</tr>
<tr>
<td>鈴木 次郎</td>
<td>42</td>
<td>男性</td>
</tr>
<tr>
<td>佐藤 花子</td>
<td>27</td>
<td>女性</td>
</tr>
</table>
<div id="links" class="blue">
<ul>
<li><a href="https://appletools.blog/">リンク1のテキスト</a></li>
<li><a href="https://appletools.blog/">リンク2のテキスト</a></li>
<li><a href="https://appletools.blog/">リンク3のテキスト</a></li>
</ul>
</div>
<form id="contact-form" class="green" method="post" action="https://appletools.blog/">
<label for="name">名前：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">メッセージ：</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="送信">
</form>中級 – 2
<main>
<section id="products">
<h6>商品一覧</h6>
<div class="product">
<h6><a href="https://appletools.blog/">りんご</a></h6>
<div class="image">
<img src="https://appletools.blog/wp-content/uploads/2023/06/scraping-practice_apple.webp">
</div>
<div class="description">
<p>新鮮な青森県産のりんごです。</p>
<p>大きめのサイズで、口当たりが良く甘いのが特徴です。</p>
</div>
<div class="price">
<span class="original-price">100円</span>
</div>
</div>
<div class="product">
<h6><a href="https://appletools.blog/">みかん</a></h6>
<div class="image">
<img src="https://appletools.blog/wp-content/uploads/2023/06/scraping-practice_mandarin-orange.webp">
</div>
<div class="description">
<p>愛媛県産のみかんです。</p>
<p>ビタミンCが豊富で、果汁たっぷりで美味しいです。</p>
</div>
<div class="price">
<span class="original-price">80円</span>
<span class="discounted-price">60円</span>
</div>
</div>
<div class="product">
<h6><a href="https://appletools.blog/">バナナ</a></h6>
<div class="image">
<img src="https://appletools.blog/wp-content/uploads/2023/06/mandarin-orange_banana.webp">
</div>
<div class="description">
<p>フィリピン産のバナナです。</p>
<p>手ごろな価格で、食べ応えがあります。</p>
</div>
<div class="price">
<span class="original-price">60円</span>
<span class="discounted-price">50円</span>
</div>
</div>
</section>
<hr>
<section id="customer-comments">
<h6>お客様の声</h6>
<div class="comment">
<h6>りんごが美味しかったです</h6>
<p>新鮮なりんごがとても美味しかったです。また食べたいと思います。</p>
<p>（山田 太郎さん）</p>
</div>
<div class="comment">
<h6>みかんが思ったより甘かった！</h6>
<p>ビタミンCが豊富で、美味しいみかんでした。値段も手ごろで大満足です。</p>
<p>（鈴木 花子さん）</p>
</div>
<div class="comment">
<h6>バナナの値段が安くて助かりました</h6>
<p>手ごろな値段で美味しいバナナが手に入り、とても助かりました。また注文します。</p>
<p>（田中 次郎さん）</p>
</div>
</section>
</main>
<footer>
<p>2023 株式会社サンプル</p>
</footer>
りんごが美味しかったです
新鮮なりんごがとても美味しかったです。また食べたいと思います。
（山田 太郎さん）