HTML、CSSの基本と役割の違い、外注へ求めるレベルまとめ

WEB制作をする際、デザインを作成したのち、そのデザインをインターネット上で閲覧できるようにコンピュータが読み込める者へ変換する必要があります。それをコーディングと言います。
コンピュータが読めるようになるには、HTML、CSSを使って記述します。ただ、HTMLとCSSに馴染みがないと、それが何なのか、何が違うのかが分かりづらいです。
ここでは、HTMLとCSSのそれぞれの基本と役割の違い、また外注へコーディングを依頼する際のレベルについてまとめています。

１． HTMLとは？HTMLの役割

HTMLは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略です。文書構造を定義するもので、骨組みや構造となるマークアップ言語としてホームページ等を制作する際に用いられます。コンピュータに画像やテキスト、ロゴなどを認識させるための役割を担っています。
認識させたいテキストなどの前後をHTMLタグと呼ばれるコードで囲むことで、コンピュータがその命令に従って表示します。タグには、文字を太文字で表示させたりテキスト文にURLをリンクさせたりするコードがあります。

２． CSSとは？CSSの役割

CSSは、Cascading Style Sheets(カスケーティング・スタイル・シート)の略で、ホームページの見た目やスタイルを定義する言語になります。HTMLで画面に表示する文書構造などを定義されたものに、CSSでは表現方法や装飾などを定義します。CSSはデザインを作るもので、テキストに下線を引いたり、枠で囲ったり、フォントサイズを変えたりします。
HTMLで作成したものを装飾して見やすくする役割を担い、ます。HTML＋CSSの組み合わせで、WEBページを見やすくすることができます。

３． HTMLとCSSの違い

HTMLとCSSは、何が違うのかが初めて触れる人からすると分かりづらいものです。その理由は、昔はHTMLとCSSを区別していなかったからです。つまり、HTMLコードにCSSが混在していたからです。
しかし、最新のHTML５では、CSSとは分離されて役割の違うものとして明確になっています。すなわち、HTMLは文書構造を作るもので、CSSはデザインやスタイルを作るものとして理解するのが分かりやすいです。

インターネットの普及とともにウエブは急激に進化し、企業などもウエブサイトを持つようになりました。同時にウエブページは一気に複雑化し、効率化のためにウエブデザインは分業されて、文書構造とスタイルを分離する需要が高まったものと考えられています。今は、文書構造とスタイルを分離するのは一般的なものとなっています。

文書構造とスタイルの違い

文書構造（HTML）とスタイル（CSS）の違いについて説明します。
文書構造は、ウエブに表示する文字や文章に対して、その文章がタイトルなのか、見出しなのか、今日長文であるのか、単純なテキスト文章であるのか、そういた文書の役割をタグで指示をすることです。それぞれ役割を持った文字をHTMLタグで囲むことで役割を果たします。例えば、タイトルの場合は、titleタグをタイトル文となる文字を挟むというやり方です。
一方のスタイルというのは、見た目やデザインを指示します。見出しなのかどうかなどではなく、赤色の文字にするのか青色の文字にするのかという指示です。また、文字の大きさや、画面のどの場所に置くのかというのもスタイルで指示します。
ただし、HTMLだけだったとしても、ブラウザはスタイルを表現します。例えば、見出しを示すh１というスタイルを指定していなかったとしても、ブラウザが勝手に見出しとして表現します。このような動きが、HTMLとCSSの違いを曖昧にしているとも言えます。

HTMLとCSSを分離するメリット

HTMLとCSSを分離させるには、コーディングを進める中で大きなメリットがあります。いくつかあるのですが、まず、スタイルを制御しようとすると、文書内容にそぐわないHTMLタグを使用して文書構造がわからなくなる問題を回避できます。CSSを使用することで、文書構造に影響を与えずにスタイルを制御できるようになるからです。スタイル指定することで、文書構造がわからなくなるということがありません。

メンテナンス性の向上

また、メンテナンス性が向上することもメリットの一つです。HTMLでスタイルを指定しようとした場合、例えば見出しが使われている全ての箇所を変更する必要が出てきますが、CSSではスタイルを一括管理することができます。複数の文書を共有できるので、修正や追加などのメンテナンス性が向上するのです。

SEO効果が期待できる

HTMLタグの中では、スタイルなどの見栄え指示を行える制御をやめて、文書構造としての情報を適切にマークアップすることで、検索エンジンに正しく解釈されるウエブページになります。また、CSSスタイル指定で、文書から余分なマークアップを排除し、スタイルに関する記述をまとめることで、ウエブページを軽量化することができます。これらの対処は、SEO効果やアクセシビリティの向上が期待できます。

特定メディアに依存しないウエブページ

CSSでは、パソコン画面、スマホ、テレビ、音声など、メディアごとに適用するスタイルを指定し分けることが可能です。メディアごとにスタイルの指定をすることで、特定のメディアに依存しないウエブページを表示させることができるようになります。

４． 外注へ求めるコーディングレベル

コーディングを外注する際、誰にお願いするかを迷う場合があります。フリーランスへ依頼するのか、制作会社へ依頼するのか。何れにしてもコーディングのレベルが分かっていれば、フリーランスでも制作会社でもどちらへ依頼しても構いませんが、レベルがわからない場合は、求めるコーディングレベルを実現できるかどうかを確認する必要があります。
一番分かりやすいのは、過去の実績を見せてもらうことです。そして、実績として出されたサイトは、いつ頃制作したのかの時期を確認することが重要です。デザイントレンドやSEOトレンドは、日々変化しているのがWEB業界でもありますので、その時のデザイン性をうまく掴みながらSEO対策としてしっかりコーディングできているかということの確認をします。

フリーランスも制作会社も実績に問題がなければ、あとは見積もり比較、コミュニケーション力、スケジュール確認になります。フリーランスで気をつけなければいけないのは、途中で連絡が取れなくなったりしないかなどです。
しっかり比較ができて、納得のいく外注先が定まったら発注を行い、作業を進めていきます。

５． まとめ

HTMLとCSSの違いについて、分かりにくかった部分を説明してきました。インターネットの普及とともにHTML、CSSができることは進化しています。HTMLとCSSは、文書構造と文書スタイルという違いがあり、分離させることで様々なメリットが生まれます。それは、業務効率性、メンテナンスの向上、SEO効果への期待向上など、コーディングによってウエブサイトとしての価値が決まると言っても過言ではありません。
そして、コーディングを外注する際は、過去の実績をコーディングレベルでしっかり確認するということです。HTMLとCSSの役割と違いを理解した上で、コーディングを外注依頼して、検証を行えることが、発注者としてウエブ上の価値あるページに押し上げることができるのではないでしょうか。