More than 1 year has passed since last update.

HTML/CSSの基礎知識

HTML,CSS

Posted at 2023-04-10

webサイトのほとんどがHTMLとCSSで構成されています。
ここでは、初心者向けにHTMLとCSSについて解説します。

HTMLとCSSとは何か

HTMLとCSSは、Webページを作成するための言語であり、
それぞれ役割が異なります。

HTML

HTMLは HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ） の略で
Webページの構造や内容を定義するためのマークアップ言語です。
つまり、Webページの見た目やデザインに直接的に関わるわけではありません。
HTMLは、テキスト、画像、動画などのコンテンツをページに組み込んだり、
リンクやボタンなどの要素を作成したりするために使用されます。
Webページを作る上で、HTMLは必須の言語と言えます。

CSS

一方、CSSは Cascading Style Sheets（カスケーディング・スタイル・シート） の略で、
Webページのスタイルを指定するための言語です。

CSSはHTMLと密接に関連しており、HTMLで作成したWebページのデザインを変更することができます。
例えば、テキストのフォント、色、大きさ、背景色、画像の配置やサイズなど、
Webページの見た目に関する要素を指定することができます。

Webページを作成する際に、HTMLとCSSはセットで使用されることが多いです。

HTMLの基本的な構造

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

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
</head>
<body>
	<h1>見出し1</h1>
	<p>本文1</p>
	<p>本文2</p>
</body>
</html>

タグの説明

<!DOCTYPE html>: HTML5で使用されるDOCTYPE宣言で、文書のバージョンを指定します。
<html>: HTML文書の開始タグで、文書の根本を表します。
<head>: ページの情報を提供するためのタグで、検索エンジンに対する説明文、キーワード、ページタイトルなどを記述します。
<meta>: 文字コードやキーワードなどの情報を提供するためのタグで、charset属性を使用して文字コードを指定します。
<title>: ページのタイトルを定義するタグで、ブラウザのタブに表示されます。
<body>: ページのコンテンツを定義するタグで、見える部分の内容を記述します。
<h1>: 見出しを定義するタグで、見出しの大きさを指定することができます。
<p>: 段落を定義するタグで、本文を記述することができます。

構造の書き方

基本的には、DOCTYPE宣言を記述した後、
<html>タグでHTML文書の開始を宣言し、
その中に<head>タグと<body>タグを記述します。

<head>タグ内には、文字コードやページタイトル、
キーワードなどの情報を提供するためのタグを記述します。
<body>タグ内には、実際のページのコンテンツを記述します。
<body>タグ内では、見出しタグ（<h1>〜<h6>）や
段落タグ（<p>）などを使用して、ページの内容を表現することができます。

CSSの基本文法とセレクターの種類

セレクター

セレクターとは、CSSでスタイルを適用する
HTML要素を指定するための指示子です。
セレクターには、要素セレクター、クラスセレクター、
IDセレクター、属性セレクターなどがあります。

要素セレクター: HTMLの要素名をそのまま指定するセレクター。
例えば、h1要素にスタイルを適用したい場合は、h1 { ... }と書きます。
クラスセレクター: HTMLのクラス属性を指定してスタイルを適用するセレクター。
例えば、class="hoge"というクラス名を持つ要素にスタイルを適用したい場合は、.hoge { ... }と書きます。
IDセレクター: HTMLのid属性を指定してスタイルを適用するセレクター。
例えば、id="hoge"というID名を持つ要素にスタイルを適用したい場合は、#hoge { ... }と書きます。
属性セレクター: HTML要素の属性を指定してスタイルを適用するセレクター。
例えば、type="text"という属性を持つinput要素にスタイルを適用したい場合は、input[type="text"] { ... }と書きます。

プロパティ

プロパティとは、スタイルを適用する対象となる要素の外観や動作を指定するための指示子です。プロパティには、color（テキストの色）、background-color（背景色）、font-size（フォントサイズ）、margin（余白）、padding（内側の余白）、border（枠線）などがあります。

値

プロパティには、値を指定する必要があります。値は、単位（px、em、%など）を伴う場合もあれば、色を指定する場合もあります。例えば、colorプロパティにredという値を指定することで、テキストの色を赤色に変更することができます。

基本的なWebページの作り方

Webページを作成するためには、HTMLとCSSを組み合わせて使用することが一般的です。以下では、HTMLとCSSを使用して、基本的なWebページを作成する手順について説明します。

①HTMLでページの構造を作成する

まず、HTMLでページの構造を作成します。HTMLを使用して、ページのヘッダー、フッター、ナビゲーション、コンテンツなどを定義します。例えば、以下のようにHTMLでヘッダー、フッター、ナビゲーション、コンテンツを定義することができます。

index.html

<header>
  <h1>Webページのタイトル</h1>
</header>

<nav>
  <ul>
    <li><a href="#">リンク1</a></li>
    <li><a href="#">リンク2</a></li>
    <li><a href="#">リンク3</a></li>
  </ul>
</nav>

<main>
  <h2>セクション1</h2>
  <p>本文1</p>
  <p>本文2</p>
  <h2>セクション2</h2>
  <p>本文3</p>
  <p>本文4</p>
</main>

<footer>
  <p>© 2023 Webページの著作権</p>
</footer>

②CSSでページのスタイルを指定する

次に、CSSを使用してページのスタイルを指定します。CSSを使用して、ページのフォント、色、背景色、レイアウトなどを指定することができます。例えば、以下のようにCSSでヘッダー、フッター、ナビゲーション、コンテンツにスタイルを適用することができます。

style.css

header {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

nav {
  background-color: #eee;
  padding: 10px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  color: #333;
  text-decoration: none;
}

main {
  margin: 10px;
}

h1, h2 {
  font-family: Arial, sans-serif;
}

p {
  font-size: 14px;
  line-height: 1.5;
}

③HTMLとCSSを組み合わせてページを完成させる

最後に、HTMLとCSSを組み合わせてページを完成させます。先程作成したHTMLに、CSSで指定したスタイルを適用することで、Webページを完成させることができます。

最後に

HTMLやCSSの知識がないと、Webページを作成することが難しいかもしれません。
その場合は、無料で使用できるWebページ作成サービスや、テンプレートを使用してWebページを作成することも検討してください。

HTMLやCSSの基礎知識を身につけることで、より自由度の高いWebページの作成が可能になります。Webページを作成する上で必要な基礎知識を学ぶことで、デザインの自由度が高くなります。

参考になれば幸いです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up