WebスクレイピングのためのHTML・CSS入門

Webスクレイピングをはじめたいけど、そもそもHTMLやCSSがよくわからない…

Webスクレイピングの学習をはじめて、HTML/CSSで躓いていませんか。

たしかにWebスクレイピングは、Webページから情報を取得するので、HTML/CSSの知識は必要です。

それでも、スクレイピングにはWebサイトをゼロから作れるくらいの知識までは要求されません。

ポイントさえ押さえれば大丈夫です。

この記事では、HTML/CSSに初めて触れる人にも分かりやすく、次のことを解説します。

HTMLとは
CSSとは
ブラウザの開発ツールの使い方

「偉そうに語るおまえは誰やねん。」と思われるので、私のことも少し紹介させてください。

たいらーのプロフィール

文系四大出身。ソフトウェア開発の経験はなしですが、ＩＴ業界に身を置いています。
開発者やユーザーとのパイプ役など、業務にプログラミングスキルを活かす。
Pythonは独学で習得。スクレイピングや作業の自動化などに勤しんでいます。

この記事を読んでHTML/CSSの基礎知識を身につけ、Webページから意のままにデータ取得できるようになりましょう。

１．HTMLとは
- ・HTMLのタグ
２．CSSとは
- ・CSSセレクタ
３．ブラウザの開発ツールの使い方
- ・CSSセレクタを使ったWebスクレイピング
４．まとめ

１．HTMLとは

HTMLとは、Hyper Text Markup Language の略で、マークアップ言語という部類に入ります。このマークアップ言語とは、文書や画像をコンピュータに正しく認識させるために、目印を使って意味づけをする言語です。

HTMLでは、この目印のことをタグ呼び、「これがタイトルだよ。」や「これは埋め込み動画だよ。」ということをコンピュータに認識させています。

WebページのほとんどがHTMLを使って記述されており、HTMLはWebページの屋台骨です。

・HTMLのタグ

HTMLのタグは、”<>” で括って記述します。

タグには、開始タグ（<タグ名>）と終了タグ（</タグ名>）があり、開始タグと終了タグの間に記載した命令が実行される仕組みになっています。

タグの種類はたくさんあり、全部を紹介するのは難しいので、よく使われるタグを次の表にまとめます。

タグ	説明
body	文書の本体を表す。
title	文書やブックマーク等で表示されるサイトのタイトル。
h1～h6	見出しを作成。数字が大きくなるほど見出しは小さくなる。
p	段落。
table	表を作成。以下の tr、th、tdを包括する。
tr	表の見出しを定義する。
th	表の見出しを作成。
td	表のデータセル。
img	画像を貼る。
a	リンクを貼る。

２．CSSとは

CSSとはCascading Style Sheetの略で、HTMLで記述されたWebページなどを、どのように装飾するか定義する言語です。

例えば文字の色やサイズ、フォントの指定が該当します。

CSSの記述方法は、HTMLに直接記述する方法とCSSファイルにまとめて記述する方法の２つがあります。

HTMLに直接記述する方法は、styleタグなどを使用します。

HTMLの局所的な装飾に用いられますが、どちらかと言うとCSSファイルにまとめる使い方のほうが一般的です。

CSSファイルにまとめて記述する方法は、WebサーバーのなかにCSSファイル（拡張子は.css）を置き、そこに記述します。

HTMLのほうで、このCSSファイルを読み込んで使うので、Webページのデザインを統一することができます。

・CSSセレクタ

CSSファイルへの記述方法について、もう少し掘り下げて解説します。

h1見出しの装飾を例に話を進めます。

記述方法はこんな感じです。

h1 {
	color: blue;
	font-size: 20px;
}

上記の「h1」の部分が、CSSセレクタ（またはセレクタ）と呼ばれ、HTMLのどの要素を装飾するか指定しています。

「color:」や「font-size:」はプロパティと呼ばれ、対象のHTML要素の何を装飾するかを指定しています。

「blue」や「20px」はプロパティの値です。

この例の場合、h1の文字色を青、文字サイズを20ピクセルに指定していることになります。

CSSセレクタには、いろいろな種類があるので代表的なものを次にまとめておきます。

セレクタ	説明
タイプセレクタ	特定の要素にスタイルを適用する。要素型セレクタともいう。
idセレクタ	特定のid名がつけられた要素にスタイルを適用する。
classセレクタ	特定のclass名がつけられた要素にスタイルを適用する。
属性セレクタ	特定の属性を持つ指定要素にスタイルを適用する。例：`a[href="https://example.com"]` href が `"https://example.com"` と一致するa要素を指定

３．ブラウザの開発ツールの使い方

WebページでタグやCSSセレクタがどのように記述されているか、実際に見てみましょう。

ここでは、本サイトの出馬表サンプルを例に説明します。

ディベロッパーツールの起動方法は次のとおりです。

今回はChromeのディベロッパーツールを前提に説明します。

Chromeの場合

ブラウザの右上のアイコン「Google Chromeの設定」を選択
「その他ルール」→「ディベロッパーツール」の順に選択

※ブラウザ上で右クリックし、「検証」の選択でも起動します。

Edgeの場合

ブラウザの右上のアイコン「設定」を選択
「その他ルール」→「開発者ツール」の順に選択

※ブラウザ上で右クリックし、「開発者ツールで調査する」を選択でも起動します。

ディベロッパーツールを使用すると以下のように表示されます。

私のブラウザのレイアウトでは、左側が実際に表示されているWebページで、右側の赤枠の部分がHTMLです。（レイアウトは変更可）

以下は、出馬表のテーブル部分ですね。

タグを指定してデータ取得することは、もちろんできますが、より柔軟にWebスクレイピングをするためには、CSSセレクタを指定する必要があります。

ディベロッパーツールでCSSセレクタを調べましょう。

CCSセレクタを調べる方法

該当のHTML要素を選択
右クリック→「コピー」を選択
「selectorをコピー」を選択
メモ帳などテキストエディタに貼り付け

次の項目で、調べたCSSセレクタを使ってWebスクレイピングをします。

・CSSセレクタを使ったWebスクレイピング

次のサンプルコードは、BeautifulSoupを使って、class属性に「entry-title」を含むすべての要素を抽出し、print文で抽出結果を表示しています。

import requests 
from bs4 import BeautifulSoup 

url = requests.get('https://umano-ie.com/racesample/') 

soup = BeautifulSoup(url.text, "html.parser") 

title_name = soup.select(".entry-title")

print(title_name)


#実行結果
[<h1 class="entry-title">出馬表サンプル</h1>]
#⇒記事の表題が抽出されました。

実際にWebスクレイピングする際は、まずは必要なデータにどのタグやCSSセレクタが使われているか、ディベロッパーツールで確認し、BeautifulSoupなどでデータ抽出します。

Webページの構成を調べながら作業を進めれば、たいていのWebページはWebスクレイピングすることができます。