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

ノートパソコン(薄黄)Python
スポンサーリンク
スポンサーリンク

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

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

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

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

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

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

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

 

「偉そうに語るおまえは誰やねん。」と思われるので、私のことも少し。

私のプログラミング歴は約5年で、本職での開発経験はありませんが、一応、IT業界に身を置いています。

今でもPythonなど、独学でプログラミングを勉強しつつ、そのスキルを活かして仕事の効率化を図ったり、ゲームをつくったりしています。

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

 

 

1.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リンクを貼る。

 

2.CSSとは

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

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

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

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要素を指定

 

3.ブラウザの開発ツールの使い方

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

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

 

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

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

Chromeの場合

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

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

 

Edgeの場合

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

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

 

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

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

Chromeのディベロッパーツール1

 

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

Chromeのディベロッパーツール02

 

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

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

CCSセレクタを調べる方法

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

 

次の項目で、調べた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スクレイピングすることができます。

 

4.まとめ

以上、Webスクレイピングに必要なHTML/CSSの基礎知識について解説しました。

HTML/CSSの理解がすすめば、取得できる情報量も増えると思います。

データを取得するには、まずブラウザのディベロッパーツールを使って、どのタグやCSSセレクタに必要なデータが紐づいているかなど、Webサイトの構成を分析するところから始めましょう。

 

「もっとWebスクレイピングの知識を深めたい!」という方に向けて、スクレイピングについての知識や学習方法などをまとめた『【仕事でPython活用】スクレイピングとは?やり方・学習方法を解説』を用意しました。

スクレイピングは、仕事やプライベートに活用できるので、是非ご覧ください。

【仕事でPython活用】スクレイピングとは?やり方・学習方法を解説
仕事のデータ分析に役立つWebスクレイピングを解説しています。Pythonによるスクレイピングのやり方や学習方法を初心者目線で説明しているので、今からスクレイピングを始める方は必読です。

ご清聴ありがとうございました。