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

「プログラミング関係でCSSってよく聞くけど、どういうものなの？」

「製薬会社で仕事をしていくにあたって、CSSって必要なの？何を勉強すればいいの？」

そんな疑問をお持ちの皆さんに向けてこの記事を書いています。

僕もプログラミングを始める前はCSSなんてチンプンカンプンでしたが、少し勉強するだけで製薬会社の仕事でも役立てることができました。

一般的にCSSというのはウェブサービスを開発するための言語ですが、製薬会社で仕事をする分にはウェブ系エンジニアの人ほどの知識は必要なく、「ほんの少しCSSを知っている」ぐらいで十分です。

そこでこの記事では、製薬会社で仕事をするのに必要な知識にしぼってCSSについて何を勉強すべきか、仕事でどう使えるのか、解説します。

この記事を読めば「CSSに関しては意外と覚えることは少ない」ということが分かり、効率的に必要なことだけを勉強することができます。

CSSとは？

CSSというのは、cascading style sheetsの略で、HTMLで作られたウェブページの骨組みに飾りをつけていくための言語になります。

HTMLの記事をまだ読んでいない人は、先にHTMLの記事を読んでもらえればと思います。

飾りをつけるというのは、文字の色やフォントサイズを変えたり、図形の配置を中央揃えにしたり、などといったことです。

そして、飾りをつけるときにどのHTMLタグに対して装飾をするか、その対象を指定する必要があります。

このHTMLタグの指定方法が、製薬会社で仕事をするうえで大事になってきます。

製薬会社の仕事でどう使える？

製薬会社でCSSの知識を使うのは、「スクレイピング」です。

スクレイピングというのは、機械学習の訓練用のデータを集めるときにウェブ上で公開されている情報にアクセスしダウンロードすることです。

機械学習の記事も見てみてください。

ここで、ウェブページ全部の情報をダウンロードすると時間がかかりすぎたりして効率が悪いので、必要な部分のみを選択してダウンロードすることになります。

この必要な部分を選択するときに、CSSの知識が必要になってきます。

詳しくは以下で解説していきます。

製薬企業研究者や薬学部生が最低限知っておくべきこととは？

製薬会社の仕事では、CSSそのものを書くというよりは、HTMLタグを指定するときの書き方さえ分かっていれば十分です。

どういうことか、具体例を挙げて説明していきますね。

例えば、PubChemなど化合物の情報をまとめたデータベースから機械学習用に情報をダウンロードしてくるとしましょう。

そのときに、化合物名だけダウンロードしたいというときに、ウェブページの中で化合物名がどんなHTMLタグで囲まれているのか確認することになります。

例えば、<h3 class=”compound-name”>というタグの中に化合物名が記述されている場合は、「h3.compound-name」と指定すると化合物名が記述されているところを選択することができます。

ここでポイントになるのが、class属性を指定する場合は、前にピリオド（.）をつけるということです。

上の例でいうと、「h3.compound-name」というのは、h3タグのcompound-nameというclass属性が指定されている部分という意味になります。

一方、id属性を指定する場合は、シャープ（#）の記号を用います。

例えば、<h3 id=”compound-name”>の場合は、「h3#compound-name」とすればOKです。

ただし、id属性は同じウェブページの中に同じ名前のものを複数指定できないので、上のような書き方をしなくても「#compound-name」とさえ書いておけば正しく選択できます。

そして、実際のCSSの書き方としては、「h3.compound-name{color: red;}」みたいになるんですが、「color: red;」の部分は全く覚える必要はありません。

「h3.compound-name{color: red;}」というのは、「h3タグのcompound-nameというclass属性が指定されている部分の文字の色を赤色にする」という意味ですが、スクレイピングのときには欲しいHTMLタグさえ指定できればいいので、上でも書いた「h3.compound-name」のところさえ自分で書ければ十分です。

スクレイピングでHTMLタグを指定するときのコードの書き方が上で紹介したCSSと全く一緒なので、ピリオドやシャープを使うというコードの書き方さえ覚えておけば製薬会社で仕事をする分には困ることはないです。