たった5分でわかる！「HTMLとCSSの基本を解説！ウェブ制作の第一歩」

2024年9月19日

HTMLとCSSは、ウェブサイトを作成するための基本的な技術です。これらの言語の役割を理解することで、効率よくウェブ制作を学ぶことができます。この記事では、初心者向けにそれぞれの技術の基本的な使い方や違いについて解説し、簡単なウェブページを作成する手順を紹介します。

HTMLとは？

HTML（HyperText Markup Language）は、ウェブページの構造を定義するための言語です。ウェブページに表示される見出し、段落、リンク、画像などの要素を記述し、それらの位置や順序をブラウザに伝える役割を持っています。HTMLはウェブページの骨組みを作るものですが、ページのデザインや色などの見た目はCSSが担当します。

HTML文書は、以下のような基本的な構造を持っています。

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>  <!-- ページタイトル -->
</head>
<body>
    <h1>私のウェブサイト</h1>   <!-- 見出し -->
    <p>ここは私のウェブサイトの紹介です。</p> <!-- 段落 -->
</body>
</html>

<!DOCTYPE html>: HTML5であることを宣言します。
<html>: HTML文書の全体を囲むタグです。
<head>: メタ情報（文字コード、ページタイトル、CSSのリンクなど）が含まれます。
<body>: ページの内容（見出し、段落、画像など）が表示される部分です。

HTMLでよく使われるタグ

以下のタグは、初心者がまず覚えておくべき重要なものです。

見出しを作成するタグ：

<h1>〜<h6>h1が最も大きな見出し、h6が最も小さな見出しを意味します。SEOにおいても、見出しタグは重要です。<h1>大見出し</h1> <h2>中見出し</h2>

段落を作成するタグ：

<p>　テキストをまとまりとして表示します。例)<p>ここに文章が入ります。</p>

ハイパーリンクを作成するタグ

<a href="URL">: です。ユーザーがリンクをクリックすると、指定されたページに移動します。
例)<a href="https://example.com">リンクテキスト</a>

画像を表示するタグ

<img src="画像URL" alt="代替テキスト">　alt属性は画像が表示されない場合の代替テキストを設定します。<img src="image.jpg" alt="画像の説明">

CSSとは？

CSS（Cascading Style Sheets）は、HTMLで作成されたページの見た目やデザインを定義するための言語です。HTMLがページの骨組みを作るのに対し、CSSはその骨組みに対して色やフォント、レイアウトを指定する役割を担います。

CSSの基本構造

CSSは「セレクタ」「プロパティ」「値」の3つの要素で構成されます。

セレクタ: どのHTML要素にスタイルを適用するかを指定します。
プロパティ: 変更したい見た目の属性を指定します（例：色、フォントサイズ）。
値: そのプロパティに設定する具体的な値です（例：赤、12px）。

body {
    background-color: #f0f0f0;  /* ページ全体の背景色 */
}

h1 {
    color: #333;               /* 見出しの文字色 */
    font-size: 36px;           /* 見出しの文字サイズ */
}

上記の例では、ページ全体の背景色を薄い灰色に設定し、h1見出しの文字を濃い灰色にし、文字サイズを36pxにしています。

よく使うCSSプロパティ

color: 文字の色を指定します。p { color: blue; }
font-size: 文字の大きさを指定します。h1 { font-size: 24px; }
margin: 要素の外側の余白を設定します。div { margin: 10px; }
padding: 要素の内側の余白を設定します。div { padding: 20px; }
background-color: 要素の背景色を設定します。body { background-color: #f0f0f0; }

HTMLとCSSの関係

HTMLとCSSはセットで使われることが多く、HTMLがウェブページの内容と構造を定義し、CSSがそのページのデザインと見た目を調整します。この役割分担を理解することが、ウェブ制作において重要です。

CSSは、HTMLに直接書き込む方法（インラインCSS）や、<style>タグを使ってHTMLファイル内に記述する方法（内部CSS）、外部ファイルとしてリンクする方法（外部CSS）があります。最も効率的なのは、外部CSSを使う方法です。

<head>
    <link rel="stylesheet" href="styles.css">
</head>

上記のコードでは、styles.cssという外部ファイルを読み込み、全体のスタイルを管理しています。これにより、複数のHTMLファイルに一貫したデザインを適用できます。

簡単なウェブページを作る手順

ここでは、HTMLとCSSを使って、簡単なウェブページを作成する手順を紹介します。

まず、HTMLでページの基本構造を作成します。

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>
    <h1>私の初めてのウェブサイト</h1>
    <p>ここは私の紹介文です。</p>
    <a href="https://example.com">詳細はこちら</a>
</body>
</html>

ステップ2: CSSでデザインを追加

次に、CSSを使ってデザインを追加します。以下のCSSコードを作成し、HTMLファイルにリンクします。

body {
    background-color: brack;  /* ページ全体の背景色 */
}

h1 {
    color: #333;                /* 見出しの文字色 */
    font-size: 36px;            /* 見出しの文字サイズ */
}

p {
    color: #555;                /* 段落の文字色 */
}