Help us understand the problem. What is going on with this article?

製薬企業研究者が最低限知っておきたいHTMLとCSS

はじめに

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

HTML

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

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

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

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
<p>段落</p>
<a href=URL>リンク<a>
<img src=画像パス alt=画像の説明>

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>

<table>
    <thead>
        <tr><th>タイトル</th><th>タイトル</th></tr>
    </thead>
    <tbody>
        <tr><th>項目1</th><td>内容</td></tr>
        <tr><th>項目2</th><td>内容</td></tr>
        <tr><th>項目3</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は、headermainfooterの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>項目1</li>
            <li>項目2</li>
            <li>項目3</li>
        </ul>
    </section>

    <section>
        <table>
            <thead>
                <tr><th>タイトル</th><th>タイトル</th></tr>
            </thead>
            <tbody>
                <tr><th>項目1</th><td>内容</td></tr>
                <tr><th>項目2</th><td>内容</td></tr>
                <tr><th>項目3</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;
}

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

サンプルページ.PNG

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

まとめ

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

参考資料・リンク

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

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

yukiya285
製薬企業研究者/工学博士 大学院でプログラミング挫折→製薬会社に就職→プログラミング再挑戦→AI創薬を担当する「創薬エンジニア」。 フォローしていただくと、企業研究におけるプログラミングの実例を知ることができます。
https://pharma-engineer.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした