HTML・CSSとは

データサイエンティストのMです。今回はデジタル導入の最も基本的なWEBサイト制作にまつわる情報提供を行います。人的な営業での商品やサービスの普及に変わり、オンラインでの認知や集客の獲得がWEBサイトにおける基本概念と言えます。

はじめに

HTMLおよびCSSはプログラミング言語の一種であり、一般的にWEBサイトを構築するためのポピュラーな言語です。

これらの言語をコーディングしてWEBサイトなどを構築する過程では、デザインや機能性にこだわりを持つことができるため、デザインカンプや構成から全てを細かく再現することができます。

WEBサイトのデザインや機能性の品質を高めるためには当然、経験や深い知識が必要になります。

一方で、HTML及びCSSの最低限の知識を用意して、深い専門知識が無くてもスムーズに開発をすることが出来るCMSや、開発環境でユーザーインターフェースに優れたものでは、画像やコンテンツのドラックアンドドロップでビジュアライズにサイトの作成をすることもできます。CMSなどについてはまた後日言及したいと思っていますが、ITやデジタルの内製化が進む今日では、さまざまな素晴らしいCMSが普及しているのが実情です。

HTMLとは?

さて、HTMLの最大の特徴はマークアップとハイパーテキストであると言えます。マークアップとはテキストの一部をタグと呼ばれるカッコで囲むことでテキストの構造や文章の役割を示します。コンピューターに対し文章の役割をわかりやすく伝えると共にGoogle ChromeやMicrosoft Edge, Firefoxなどのブラウザ等を経由して、人間にもわかりやすく情報を伝える役割を果たします。

ハイパーテキストとは、WEBサイトを閲覧する時に見かける、ボタンや青色のリンクのことです。この機能があることで、様々なページへ行き来したり検索したりすることができるのです。

CSSとは?

CSSの最大の特徴は見た目を司るデザインを設定するプログラム言語であることです。WEBサイトを構築する上でメインとなるHTMLに対して、CSSは装飾的な役割を果たしています。

CSSで行うことが出来る一般的な例としては、文字の色や文字の大きさ、背景画像や背景色、文字や画像の配置などが挙げられます。

HTMLはあくまでサイトの骨組みの役割を担う一方で、サイトの「好き嫌い」や「ビジュアル的な古さ新しさ」に影響を与えるCSSは寧ろサイトを訪問し、ページを閲覧するユーザーにとってとても大事な機能であると言えます。

開発の視点では、CSSの記述には大きく2つの方法があります。1つはHTML構文へ直接書き込みをする手法、もう一つの方法は、CSSファイルとしてHTMLファイルとは別に作成し独立させる手法です。後者の場合は、HTMLの外部ファイルとしてCSSファイルの読み込みを行うということになります。

例えば、1つのページ作成のみ(index.html)で、今後更新する予定のないファイルであれば直接書き込む1つ目の手法も検討の余地がありますが、多くの場合は2つ目の手法が主流です。

簡易なWEBサイトの構築に関しても、一般的には複数ページを作成する前提であり、ページの統一感やトンマナを合わせる必要があり、同じレイアウトにするためにも同じCSS構文を毎回HTMLファイルに書くのは効率的とは言い難いため、CSSを外部ファイルとして読み込む方が便利であると言えます。

また、メンテナンスをする上でもCSSを独立したファイルとして作成することで、ミスや抜け漏れの無い効率の良い編集が実現できます。

CSSはどのようにデザインに反映されるの?

CSSで文字の大きさや色などをデザインする際、対象のタグの目印となるようにclassなどの属性を指定することで何処のタグに対してデザインをするかを指定することが出来ます。

しかし、idを指定してもデザインをするかを指定することもできるのでidでも問題がないのではと思われる人も少なくはありません。ところがclassとidを全く考えずに混合してCSSとの連携に使用することで、作成上トラブルのリスクも高まります。

ある程度大規模なサイトや複雑なサイトを作成する際にはHTMLとCSS以外にもjavascriptを使用してサイトの冗長化をさせる機会も多々あります。javascriptもまたCSSの様にHTML内に直に入力したり、外部ファイルとして取り込んだりすることが出来る為、サイト上の何処かにjavascriptを指定する際に用いるのがidです。javascriptの場合はidの指定無しに適用させることが出来ない為、CSSで指定するつもりであったidがjavascriptとして適用されてしまう事もあるからです。

HTMLはサイト作成をする上で全体の骨格を担う役割を果たす一方、その骨格に問題があるとどんなに一生懸命CSSでのデザイン等に力を入れたとしても、表現されることなく無駄になってしまいます。そこで重要なのはコーディングチェックとなります。

コーディングチェックの手法の一つとして、「W3C HTML Checker」というコーディングをチェックするためのサイトがあります。これを使用することで一般的なプログラミングでいうデバックと近い役割を果たし、見逃しがちなタグのカッコの付け忘れや終了タグの入力忘れ等を防ぐ役割があります。

「W3C HTML Checker」以外にもコーディングチェッカーは様々存在しますが、「W3C HTML Checker」はサイト上で無料で使用することが出来るというメリットがあります。

このようにHTMLとCSSで作成しコーディングチェッカーを使用して完成させるという大まかな流れがありますが、近年スマートフォンやタブレットの普及により様々な情報媒体からサイトへアクセスされるようになってきました。

その為、今までの様にPC用のサイトだけを考慮してサイト作成をするのではなく、スマートフォンやタブレットの画面サイズを考慮してサイト作成をせざるを得ない状況になってきており、いつまでもPC用サイトしか作らない企業やそのようなサイトしか用意できないサービス業は誰からも注目を浴びることなく淘汰されてしまう世の中でもあります。

そこで求められているのがレスポンシブデザインの考え方です。レスポンシブデザインとはサイトを閲覧する情報媒体に応じて画面設計を冗長化する事を言います。レスポンシブデザインという名前の通りレスポンシブにデザインを変える為にCSSを設定します。レスポンシブデザインはデバイスごとに画面表示を変えることが出来る以外にHTMLやCSSを1つずつ用意しているだけで良い為管理もしやすくなり、様々なデバイスからのアクセスが可能になる分アクセス数の向上も期待できます。

その反面、作成時にスマートフォン等の小型機器からのアクセスがあることを考慮しないとアクセススピードが遅くなるといった影響もあります。その為デザイン面でもあまり凝りすぎたデザインであるとスマートフォンからのアクセスがある際にアクセススピードに影響が出てしまう可能性もあります。

以上の観点から今後も様々な情報媒体が作られていくことも考えられるため、HTMLやCSS等を使用したサイトの作成をする仕事は増えていくと考えられます。実際にサイトの作成案件について求人を調べてみるとレスポンシブデザインを問う内容が多々見受けられるからです。

WEBサイトの作成で考えるべき点の3点を押さえつつ、CMSや作成ツールとHTMLやCSSと組み合わせて作成することにより、ベースとなる大まかな範囲はCMSや作成ツールで作成していき、その先の細かいデザインや機能をHTMLやCSSで作成していくことで、効率の良い作成と使いやすいWEBサイトの作成に繋げることが出来ます。

コメントを残す

コメントは承認され次第、表示されます。

お問い合わせ

当社へのコンタクト

商品やサービスについてはお気軽にお問合せください。

問い合わせはこちら

経営者・起業家とつながる

おすすめの書籍

動画やバーチャルの世界だからこそ、本を読むことはそれだけで大きな財産となります。私たちは本とともに事業を進め、成功体験のDNAとなる本、その本の具体例と抽象化と応用を皆様と共有することが大事なことだと考えています。

おすすめの書籍一覧はこちら

電力消費を控えよう

SHISEILABO

店舗からお届けする動画

悠々庵谷中ドキュメンタリー