Webサイト制作を始めるうえで、必須となる知識として「HTML」と「CSS」が挙げられます。
それぞれわかりやすく、簡単にご説明させていただきます。
HTMLとは？
HTMLとは「HyperText Markup Language」の略で、マークアップ言語と呼ばれております。
普段、ブラウザで見ているWEBページには、見出しや本文、リンクなどさまざまな情報が含まれています。
私たち人間はそれを簡単に理解できますが、コンピュータはそうはいきません。コンピュータに「ここが見出しで、ここが本文ですよ」と教えるために使うのがHTMLです。
なぜコンピュータにわかるようにする必要があるのか？
HTMLにはいろいろなタグ（<>で囲まれた要素）があり、それらを使ってWEBページの構造を定義します。たとえば、「<title>」タグはページのタイトルを示し、「<h1>」タグは見出しを示します。実際のHTMLコードは以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>WEBサイトのタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>これは段落です。WEBサイトの内容がここに表示されます。</p>
</body>
</html>この例では、<title>タグでブラウザのタブに表示されるタイトルを設定し、<h1>タグでページのメイン見出しを指定しています。<p>タグは段落を表し、本文のテキストを囲んでいます。このようにHTMLを使ってコンピュータにページの構造を伝えることで、適切に情報を表示できます。
HTMLタグの種類と用途
HTMLには非常に多くのタグがあります。以下に、よく使われるタグをいくつか紹介します。
<h1>～<h6>：見出しタグ。<h1>が一番大きく、重要な見出しです。数字が大きくなるにつれて、見出しの重要度が下がります。<p>：段落タグ。本文のテキストを囲むために使用します。<a>：リンクタグ。別のページやセクションに移動するためのリンクを作成します。<img>：画像タグ。WEBページに画像を表示します。
たとえば、以下のように画像とリンクを含むHTMLを記述することも可能です。
<a href="https://example.com">こちらをクリック</a>
<img src="image.jpg" alt="説明文">この例では、<a>タグでリンクを作成し、<img>タグで画像を表示しています。alt属性を使って、画像が表示されない場合の説明文を指定することもできます。
Webサイトの評価とは？
WEBサイトの評価が高まると、Google ChromeやMicrosoft Edgeなどの検索エンジンで上位に表示されるようになります。サイトを制作するからには、多くの人に見てもらいたいものですよね。適切にHTMLを記述することは、SEO（検索エンジン最適化）にもつながり、サイトへのアクセスを増やす大事なステップです。
例えば、見出しタグを使ってページの構造を明確にすると、検索エンジンはそのページがどのような内容を持つのかを理解しやすくなります。これにより、関連するキーワードで検索した際に、より高い順位に表示されやすくなります。
もちろん、広告を使ってサイトへのアクセスを増やす方法もありますが、検索エンジンからの自然な流入を増やすためには、正しいマークアップが欠かせません。また、アクセシビリティの観点でも、適切なHTMLは重要です。視覚障がい者がスクリーンリーダーを使ってページを閲覧する際に、ページの構造を正しく伝えるためにも、HTMLの役割は欠かせません。
CSSとは？
次に、HTMLとセットで使われるCSSについて説明します。
CSSとは「Cascading Style Sheets」の略で、スタイルシート言語とも呼ばれます。HTMLがWEBページの構造を決めるのに対し、CSSはデザインを担当します。文字の色、フォント、レイアウトなど、見た目のスタイルをコントロールするのがCSSです。
たとえば、見出しの色を変えたり、背景に画像を設定したり、ページ全体のレイアウトを整えたりする際にCSSを使います。以下は、CSSを使って見出しの色を青に変更する例です。
h1 {
color: blue;
font-size: 24px;
}このコードでは、h1タグのテキスト色を青にし、フォントサイズを24ピクセルに設定しています。CSSを使うことで、WEBページの見た目を自由にカスタマイズできます。
CSSの基本プロパティ
CSSには多くのプロパティがありますが、まずは基本的なものをいくつか紹介します。
color：文字の色を設定します。font-size：文字の大きさを指定します。background-color：背景色を設定します。margin：要素の外側の余白を指定します。padding：要素の内側の余白を指定します。border：要素の境界線を設定します。
たとえば、次のようにCSSを使ってボタンのスタイルをカスタマイズすることもできます。
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}この例では、ボタンの背景色を緑にし、文字色を白に、角を丸くしています。また、cursorプロパティを使って、ボタンにマウスカーソルを乗せたときにポインターの形に変更しています。
HTMLとCSSはセットで覚えよう
HTMLとCSSは、WEBサイト制作において切っても切れない関係です。HTMLだけ、またはCSSだけでWEBサイトを作ることはできません。どちらもセットで使うことで、初めて魅力的なWEBページを作成できます。そのため、両方の知識をバランスよく身につけていくことが大切です。
たとえば、HTMLで画像を表示しても、CSSを使わなければその配置やサイズを変更することが難しいです。CSSを使って画像の大きさを変更したり、枠線を追加したりすることが可能です。
img {
width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
}さいごに
今回は、Webサイト制作の基礎であるHTMLとCSSについてわかりやすく解説しました。これらはWEB制作の根幹をなす技術であり、ノーコードツールが普及した今日でも、その重要性は変わりません。
ノーコードツールを使えば、HTMLやCSSの知識がなくてもWEBサイトを作ることができます。しかし、少し複雑なカスタマイズやトラブルに対処するためには、やはりこれらの基礎知識が必要です。
これからWEBサイト制作を学び始める方は、HTMLとCSSをしっかりと身につけ、どんな状況にも柔軟に対応できるスキルを養っていきましょう！
