はじめに

HTML (hypertext markup language) とCSS (cascading style sheets) は、製薬企業研究者にとってはウェブスクレイピングを行う時に必要になってきます。
Webページの構造を把握するためにHTML・CSSの知識が必要になるわけです。
そこでこの記事では、製薬企業研究者が最低限知っておきたいHTMLとCSSの知識についてまとめてみます。
なお、HTMLやCSSを記述するためのエディタのインストール方法については、以下の記事で解説しています。
製薬企業研究者のためのVisual Studio Codeインストール方法

HTML

HTMLはWebページの骨格を作るためのマークアップ言語です。
基本的に、以下に示す「タグ」を使って記述します。

<タグ名 属性名=属性値></タグ名>

よく使われる代表的なタグを挙げると以下のようになります。

<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>
<p>段落</p>
<a href=URL>リンク<a>
<img src=画像パス alt=画像の説明>

<ul>
    <li>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ul>

<ol>
    <li>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ol>

<table>
    <thead>
        <tr><th>タイトル</th><th>タイトル</th></tr>
    </thead>
    <tbody>
        <tr><th>項目１</th><td>内容</td></tr>
        <tr><th>項目２</th><td>内容</td></tr>
        <tr><th>項目３</th><td>内容</td></tr>
    </tbody>
</table>

ここから、実際のWebページがどのように構成されているか見ていきます。

overview.html

<!DOCTYPE html> <!-- HYML5で記載された文書であることを宣言 -->

<html>

    <head>
        <!-- ページタイトルや文字コードなどを記載する。Webページには表示されない。-->
    </head>

    <body>        
        <!-- Webページの本体部分。商品情報やブログ記事など -->     
    </body>

</html>

ドックタイプ宣言部分<!DOCTYPE HTML>でHTML5で書かれたWebページであることを示して、headおよびbody部分が続きます。

head部分

headには、ウェブページのメタ情報を記述します。
ここに書かれた情報はウェブページ上では表示されません。
（titleはブラウザのタブの部分に表示されます。）

head.html

<head>

    <meta charset="utf-8">
    <title>サンプルページ</title>
    <link rel="stylesheet" href="style.css">

</head>

body部分

bodyは、ウェブページのメインコンテンツにあたる部分です。
bodyは、header、main、footerの3つから構成されます。

main.html

<body>

    <header>
        <!-- ヘッダー画像やメニューバーなど -->
    </header>

    <main>
        <!-- 商品情報やブログ記事など -->
    </main>

    <footer>
        <!-- フッターメニューなど -->
    </footer>

</body>

header部分

headerは、ウェブページのタイトルやヘッダー画像、トップメニューなどを表示する場所です。

header.html

<header>

    <h1>
        <a href="overview.html">
            <img src="image.png" alt="ヘッダー画像">
        </a>
    </h1>
    <nav>
        <ul>
            <li>ホーム</li>
            <li>会社情報</li>
            <li>お問い合わせ</li>
        </ul>
    </nav>
</header>

main部分

mainは、ページごとに内容が異なる、個別ページのメインコンテンツです。
単に文章だけでなく、箇条書きや表のデータが使われる場合もあります。

main.html

<main>

    <section>
        <h2>タイトル</h2>
        <p>本文</p>
        <h2>タイトル</h2>
        <p>本文</p>
        <h2>タイトル</h2>
        <p>本文</p>
    </section>

    <section>
        <h2>タイトル</h2>
        <ul>
            <li>項目１</li>
            <li>項目２</li>
            <li>項目３</li>
        </ul>
    </section>

    <section>
        <table>
            <thead>
                <tr><th>タイトル</th><th>タイトル</th></tr>
            </thead>
            <tbody>
                <tr><th>項目１</th><td>内容</td></tr>
                <tr><th>項目２</th><td>内容</td></tr>
                <tr><th>項目３</th><td>内容</td></tr>
            </tbody>
        </table>
    </section>

</main>

footer部分

footerは、ウェブページの最下部にある部分です。
プライバシーポリシーへのリンクをつけたフッターメニューを作る場合もあります。

footer.html

<footer>
    Copyright <a href="sample.html">サンプルサイト</a>. All Rights Reserved.
</footer>

CSS

CSSは、ウェブページの見た目を整えるためのマークアップ言語です。
文字の色やフォントサイズなどを指定することができます。
基本的に、以下のようにセレクタとプロパティを指定して記述することができます。

セレクタ{
    プロパティ名: 値;
    プロパティ名: 値;
    プロパティ名: 値;
}

ここで、サンプルとして以下のHTMLおよびCSSを使います。

sample.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>サンプルページ</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <header>
            <h1>ページタイトル</h1>
        </header>

        <main>
            <p>普通の黒字</p>
            <p class="font-red">赤字</p>
            <p class="font-red" id="font-bold">太字の赤字</p>
        </main>

        <footer>
            Copyright <a href="sample.html">サンプルサイト</a>. All Rights Reserved.
        </footer>

    </body>

</html>

style.css

p.font-red{
    color: red;
}

p#font-bold{
    font-weight: bold;
}

ウェブページを表示すると、以下のようになります。

ここで、大事なのが、CSSがどのHTMLタグに対して指定されているか、です。
サンプルHTMLでは、class属性とid属性を指定しています。
そして、CSSでは、セレクタ部分に.が書かれているところではclass属性を、#が書かれているところではid属性を指定しています。
CSSにおけるclass属性およびid属性の指定の仕方は重要なので、覚えておきたいところです。
なお、同じウェブページに対してclass属性は同じものを何度でも指定できるのに対し、id属性は同じものは一つしか指定できません。
なので、ここで取り上げている例は赤字にするclass属性は2か所指定していますが、太字にするid属性は1か所にしか指定していません。

まとめ

ここでは、製薬企業研究者が最低限知っておきたいHTML・CSSの基礎知識について解説しました。
この記事に書かれていることが理解できれば、ウェブスクレイピングにも応用が利きます。

参考資料・リンク

HTMLとは？製薬会社の仕事でどう使う？

CSSとは？製薬会社の仕事でどう使う？