Web制作で知っておきたい基本用語

記事
IT・テクノロジー
Web制作を行う上でプログラミング言語を知らなくても、サイトやランディングページは「CMS」を利用することで出来てしまいます。しかし、自分の好みのデザインに変更したり、SEO効果を上げようとすると基本的なプログラミング言語の知識が必要になってきます。プログラミング言語と聞くと難しく感じるかもしれません。しかし、「HTML」「CSS」などは、初心者の方でも比較的習得しやすい言語になります。今回はその中から基本用語を中心にご紹介します。

HTMLとは

Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、インターネット上の情報を共有する為に各個人のコンピュータ環境に依存しない統一した規格の言語になります。簡単に言うとWebページを書く為の言語です。
「ハイパーテキスト」とは情報を結びつけるハイパーリンク機能を持ったテキスト文書の事。またはその仕組みの事です。
リンクイメージ.png
【リンクについてはこちら】

「マークアップ」とは、文書の構造や段落、改行、表、リストなど文章中の役割や意味などに専用の「しるし」をつけるという事です。
「ランゲージ」は、その文法や決まり事の意味で使われています。
タグ.png

HTMLの文書には様々な内容が部品のように組み合わされて出来ています。HTMLではこの部品をそれぞれ「要素」として分類し、該当の箇所がどの要素なのかを分かるように「タグ」という印をつけて示しています。
タグ付けされた文書を解読し、定義に沿って適切に表示をするのが「ブラウザ(Google、Safariなど)」の役割となります。
HTMLの基本構造.png

 HTMLの標準仕様とは

今までは、HTMLの標準仕様の策定は「W3C」=(World Wide Web Consortium)という非営利団体が行っていました。Webを考案し、Webに関わるシステムを開発、実装したティム・バーナーズ=リーによって1994年創設された機関です。
「HTML5」より以前の「HTML4/4.01」までは、W3Cが中心となって仕様の協議決定をおこなっていました。
現在のHTMLの標準仕様の策定機関は、「WHATWG」=(Web Hypertext Application Technology Working Group)で、Apple、Mozilla、Opera Softwareが2004年に設立しました。2017年にはMicrosoftも加わりました。
今まではHTMLの仕様は、W3Cが勧告する「HTML5/5.1」と、WHATWGが策定を定める「HTML Living Standard」の2つの標準に分離した状態が続いていました。その後、GoogleやSafari、Firefoxなど主要のブラウザが「HTML Living Standard」を標準仕様として採用するなどの流れから「W3C」は独自のHTMLの標準化を断念し「WHATWG」に委ねることになりました。結果、2021年に「WHATWG」はHTMLの標準仕様を「HTML5」から「HTML Living standard」に完全統一し策定しました。

「HTML5」の最終版「HTML5.2」から「HTML Living standard」が標準仕様になって要素や属性が新しく追加、変更、廃止されました。しかし、「HTML Living standard」と「HTML5」の基本的な要素や属性の扱いは同じです。一部のタグの扱いが違うくらいで大きな違いはありません。

「HTML5」の資格は役に立つのか

【Webクリエイター能力検定試験】
【HTML5プロフェッショナル認定試験】
は「HTML5」の認定資格になります。しかし、「HTML Living standard」は「HTML5」がベースとなっています。その為、「HTML5」を勉強して資格を取得しスキルアップを図ることで「HTML Living standard」を学習する事に繋がります。
サイト構築に至っては、誤った、要素や属性を使っているとクローラーが理解しづらく、又ブラウザによってはレイアウト表示が崩れ、結果的にコンテンツの品質が落ちてしまいSEO評価の低下になりかねません。
HTMLの基礎を知ることは、サイト制作の最適化には重要な要素になります。

CSSとは

Cascading Style Sheet(カスケーディング・スタイル・シート)の略で「HTML」の各要素に対して、文字サイズや色の指定、背景色などの書式を指定する言語です。また、各要素のサイズや周囲に枠線をつける指定もできます。又、「CSS」をうまく利用すると複数ページのデザインを一括で設定や変更が可能になります。「CSS」の記述の基本ルールは「プロパティ」と「値」を「:(コロン)」で区切ります。記述の最後は「;(セミコロン)」で「プロパティの区切り」を示す記号となります。プロパティを列記する際は、その間に「;(セミコロン)」を記述します。
CSS記述のルール.png

CSSはどこに記述するのか

CSSを読み込ませる方法はいくつかあります。よく利用される方法を紹介します。
①外部参照
Webサイトの場合はほとんどこの形式で使用されます。HTMLのヘッド要素の内にlink要素を記述し、外部の「CSSファイル」にCSSをまとめて記述する方法です。「CSSファイル」を編集することで複数ページを一括で装飾することが出来ます。
CSS外部参照.png
②ヘッダー埋め込み形式
「HTML」のhead要素の内にスタイルを記述する方法です。<head>~</head>の中に<style></style>を追加します。「CSSファイル」は不要になりますが、そのページだけしか「CSSの記述内容」が適用されないとうデメリットがあります。
CSSヘッダー埋め込み.png
「CSS」を扱えるようになれば Webページを好きなようにデザインできるようになります。
以上のようなプログラミングの知識がなくてもサイトを作れるシステム(WordPressなど)がありますが、基本の「HTML」や「CSS」を理解していれば、WordPressで制作するサイトも好きなようにカスタマイズ出来るようになります。
【ディベロッパーツールを使ったカスタマイズ方法についてはこちら】


最後までご覧いただきありがとうございます。
「HTML」「CSS」などの基本用語を知り内容を理解することは、サイト制作の最適化に繋がります。又、サイトのカスタマイズも容易になります。
Webサイト制作の参考になれば幸いです。

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す