【漫画でIT入門】「とあるIT企業の社員活動日誌」第17話「プログラミング学習のすゝめ③ マークアップ言語とは？種類と特徴」

パソコンを使う人のありそうでなさそうなお話や、ガジェットのお話を漫画で紹介させていただくコーナーです。

とあるIT企業に務める彼女たちは日々楽しく真面目に業務に励んでいます。その中で、起こったハプニングや困った事などを活動日誌を通して覗き見していきましょう。

※当ブログは、アフィリエイトプログラムに参加して商品を紹介しております。当ページのリンクを介して商品を購入すると著者に収益が発生することがあります。

【漫画で入門】「とあるIT企業の社員活動日誌」各話一覧はこちら

プログラミング言語ではない！？
マークアップ言語とは？
プログラミング言語とは役割が異なる
マークアップ言語の種類とそれぞれの特徴
さらに学べるおすすめ書籍
漫画作者紹介
- たんれ～

プログラミング言語ではない！？

パソコンで扱う言語はものすごく多くて、パッと見プログラミング言語っぽいものが数多くあります。

マークアップ言語もその一つで、見た目は似ているんですが、主に見栄え良くページを表示させる為のツールで「プログラムする」という表現とは違うものになります。

分からない人には全部同じに見えちゃいますよね（笑）

パソコンは何でもできる反面、具体的に命令してあげないと正しく動いてくれないからこそこういった言語が生まれてるんだと思います。プログラミング言語を勉強するにあたっての基礎にもなると思いますので、頑張って覚えてみてください。

マークアップ言語とは？

マークアップ言語とは文章の論理的な構造や修飾情報に関する指定を文章とあわせてテキストファイルに記述するための言語のことあり、「Webサイト文章といったテキストに目印付けを行い、コンピューターに認識させるための言語」です。文章の意味合いを「タグ」と呼ばれる要素で記述して分類し、装飾を行います。

コンピューターは、文章をそのままアップロードされても、各単語や文脈の意味を適切に理解できません。例えば

見出しがどこか把握する
どこからどこまでが本文段落なのか確認する
引用した部分はどこなのか理解する

といった、人間であれば当たり前のようにできる判断が、タグなしだとコンピューターはできないのです。

マークアップ言語を利用すると、

見出しは大きくなり太字で強調して表示される
段落は1段落ごとに改行して表示される
引用部分は灰色で背景が塗りつぶされる

といった文章装飾も可能です。

強調のレベルや優先度なども調整できるので、何を伝えたいのかをビジュアル上でも分かりやすく表示できます。

Webサイト上でスムーズに文章を読んでもらうためには、ユーザーにとってもどこに何が書いてあるのか直感的に理解してもらう必要があります。マークアップ言語を利用すればコンピューターだけでなくユーザーにも分かりやすく文章をWeb上で表示可能です。

プログラミング言語とは役割が異なる

Webサイト制作初心者は、マークアップ言語とプログラミング言語を混同するかもしれません。プログラミング言語はアプリやソフトウェアの設計に使われています。

ユーザーが入力した数字を基に金額計算を行う
ユーザーデータを企業サーバーへ保存する
ログイン処理を行う

といった、いわば動的な場面で使われるのが特徴です。

プログラミング言語はその場で読み込まれ、条件を基に計算を行って結果を出力していきます。いわば動的な言語です。

これに対してマークアップ言語は文章の意味合いの分類、そして文章構造化に使われます。プログラミング言語のような計算処理は行われず、書かれた内容をそのままコンピューターが読み込むのがポイントです。そのため、動きのない静的な言語になっています。

プログラミング言語についてはアプリやソフトウェアに限らず、Webサイト上でもマークアップ言語と合わせて使われます。

マークアップ言語だけでも静的なWebサイトは作れますが、モダンなWebサイトを制作するためには動的なプログラミング言語が必要です。そのためECサイトやコーポレートサイトを開発・運営するうえで、マークアップ言語とプログラミング言語は欠かせない知識になっているといえます。

マークアップ言語の種類とそれぞれの特徴

マークアップ言語の代表例は「HTML（Hyper　Text　Markup Language 」と「CSS」になります

その他には「XML（eXtensible Markup Language ）」「SGML（Standard　Generalized Markup　Language ）」「XHTML（Extensible HyperText Markup Language）」などが存在しています。それぞれの言語に特徴があるのでご紹介していきます。

HTMLについて

HTMLとはHyperText Markup Languageの略で、ウェブページ（ホームページ）を作成するために用いられる言語を指します。

HTMLには論理構造が記述されますが、これは文章の構造という意味です。たとえば、title要素とh1要素にはページのタイトルを書いて、段落を示すp要素の内側に本文を書き、必要に応じてimg要素で画像を挿入するといった具合です。これによりメンテナンスが容易になりますし、アクセス数を増やすためのSEO（サーチエンジン最適化）にもつながります。

文字を大きくしたり背景色を決めたりというグラフィカルな面は、CSSという別の言語の役割です。以前はHTMLでグラフィックについて記述することもありましたが、現在は非推奨とされています。

CSSについて

CSSとはCascading Style Sheets の略でウェブページのスタイルを指定するための言語です。ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。

CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、プリンタなどの機器で印刷・出力される際の出力スタイル、音声で読み上げられる際の再生スタイルなど、ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。

CSSが必要な理由

現在、ウェブページを制作する言語として広く利用されているHTML4.01やXHTML1.0には、 <center>や<font>などの装飾目的の要素（タグ）や属性が存在しています。また、<table>タグでレイアウトをまとめるなどの方法を駆使すれば、 HTMLだけでウェブページの見栄えを制御することもできなくはありません。

しかし、ウェブページのスタイリングにHTMLを用いるべきではありません。 HTMLは情報構造を定義するための言語であり、見栄えの制御のために本来の役割とは違った使い方をすると、文書の情報構造がでたらめになってしまうからです。

コンピュータや検索エンジンに理解されないでたらめな文書構造になってしまえば、せっかくの情報もうまく活用されません。

また、HTMLの要素（タグ）をどのように表示するかは、ユーザーエージェント（ブラウザ）によって異なることがあります。 HTMLタグを駆使してある閲覧環境では見栄え良くレイアウトできたとしても、他の閲覧環境ではまったく意図しないレイアウトになってしまうこともありえます。