1. WebスクレイピングのためのCSSの重要な概念
成功するWebスクレイピングには、HTMLの構造やページのCSSクラスを理解することが重要だよね。
ページがCSSを使ってどのようにスタイリングされ、構造化されているかを理解すれば、必要なデータをより正確に選択して取得できるんだ。
HTMLにCSSを接続する方法、セレクターの使用方法、さらにstyle、class、id、nameの属性がスクレイピング作業にどう役立つのかを見ていこう！
CSSはWebページのスタイリングに使われるけど、WebスクレイピングのためにCSSは、構造を理解し要素を選ぶためのツールとして考えるといい。 ここでは、スクレイピングに役立つ重要なCSSの基本的な概念を見てみよう。
- セレクター — 特定のHTML要素を指すルールだよ。これを使うことで、必要なデータを正確に特定できる。
-
属性
class,id,name— これらは要素を区別するためのユニークな識別子だよ。スクレイピングには特に便利で、必要な要素を切り出すのが簡単になるんだ。
2. HTMLドキュメントにCSSを接続する
CSSは色々な方法でHTMLに接続できるんだ。そのやり方を知っていれば、要素をナビゲートしてスタイルやクラスを確認しやすくなるし、ターゲットデータを切り出すのが楽になるよ。
外部ファイル
CSSはよく外部ファイルとして接続されるよ。それはHTMLドキュメントの<head>セクションに<link>タグを使って確認できるんだ。
外部CSSファイルはページ全体のスタイルを定義していて、IDやクラスも含まれるからスクレイピング時のナビゲーションが簡単になる。
<head>
<link rel="stylesheet" href="styles.css">
</head>
内部スタイル
スタイルがページ内に<style>タグを使って定義されている場合もあるよ。<head>セクション内に内部スタイルを見つけられるし、それをクラスやIDを理解する手がかりとして使えるんだ。
<head>
<style>
.price {
color: red;
}
</style>
</head>
インラインスタイル（属性style）
インラインスタイルはHTMLタグ内に直接定義されていて、その特定の要素にだけ影響するよ。
属性styleは、ターゲットデータを特定するのに役立つユニークなプロパティを持っている事が多いんだ。
<p style="color: red; font-size: 18px;">インラインスタイルがあります</p>
3. CSSのセレクター
CSSのセレクターは要素にスタイルを適用するために使われるんだ。でも、スクレイピングにおいての主な使い道は、必要なデータを含む要素を正確に選ぶことなんだよね。 よく使うセレクターの種類を見てみよう！
基本的なセレクターの種類
タグセレクター: このセレクターは特定のタグ（例えば、<p>や<div>）を持つ要素を全て選ぶんだ。
スクレイピングでは、タグセレクターを使ってテキストや画像などを持つタグから情報を取り出せるんだよ。
p {
color: blue;
}
クラスセレクター: このセレクターは、特定のclass属性値を持つ要素を選ぶんだ。
クラスは名前の前にピリオド（.）を付けて示されるんだよ。スクレイピングでクラスはとても便利で、同じスタイルを持つ要素を識別するのに使えるんだ。例えば商品のリストがそうだね。
.price {
color: red;
}
<p class="price">価格: $99</p>
IDセレクター: このセレクターはユニークなid属性を持つ要素を選ぶんだ。IDはシャープ記号（#）で示される。
スクレイピングでidは特によく使われ、例えばページ内の見出しやボタンなど、ユニークな要素を選択できるんだ。
#product-title {
font-size: 24px;
}
<h1 id="product-title">製品名</h1>
属性セレクター: 属性セレクターは、特定の属性（例えばnameやtypeなど）に基づいて要素を選択するよ。
スクレイピングでは、フォームや特定のフィールドを選ぶのに役立つね。例えば特定のnameを持つフィールドを選ぶときに使える。
input[name="email"] {
border: 2px solid blue;
}
複合セレクター: これを使うと、いくつかの基準を組み合わせて要素を正確に選択できるんだ。
例えば.product-list .priceは、product-listというコンテナ内の商品の価格だけを選択する。
属性セレクターや複合セレクターについては、次回の講義でさらに詳しく学べるよ。
GO TO FULL VERSION