More than 1 year has passed since last update.

新人研修チュートリアル①　HTML+CSS編

Last updated at 2023-07-02Posted at 2023-07-01

HTML+CSS入門：基本の書き方と使い方

はじめに

この記事では、HTMLとCSSの基本的な書き方と使い方について解説します。
初めてHTMLとCSSに触れる方や基礎を復習したい方にとって、入門的な内容を網羅しています。
まずは基本からしっかりと理解しましょう。

1. HTMLとは

HTML（HyperText Markup Language）は、ウェブページを作成するためのマークアップ言語です。
HTMLは、テキストベースの文書にタグや要素を使用して構造を付け、それぞれの要素に意味を与えることができます。

ウェブページは、HTML文書として作成され、ウェブブラウザによって解釈されて表示されます。
HTMLは、ウェブページの見た目や構造を定義するための基本的なツールとして広く使われています。

HTMLは、以下のような役割を果たします。

構造の定義
ウェブページの要素（タイトル、見出し、段落など）を定義するためのタグがあり
ページの構造が明確になり、ユーザーが情報を探しやすくなります
コンテンツの表現
ウェブページ上に情報を配置し、ユーザーに視覚的な情報を提供することができます
ハイパーリンクの作成
他のウェブページや文書への参照やナビゲーションが可能

HTMLでは、要素を囲む開始タグと終了タグの間にコンテンツを配置します。
例えば、<h1>から</h1>までの間にタイトルのテキストを配置することで、見出しを定義します。

また、HTMLはバージョンごとに新しい要素や機能が追加されており、最新のバージョンでは動画の埋め込みやフォームの作成など、さまざまな機能をサポートしています。

初心者にも理解しやすい言語であり、ウェブ開発の基礎を学ぶ上で重要な役割を果たしています。
次のセクションでは、HTMLの基本構造について詳しく見ていきましょう。

2. HTMLの基本構造

HTMLの基本的な構造は以下のようになっています。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
</head>
<body>
    <!-- ここにコンテンツを記述する -->
</body>
</html>

この構造を理解することで、HTML文書を作成する際の基本形を把握することができます。

3. タグと要素

HTMLでは、タグと要素を使用して構造を表現します。
タグは<タグ名></タグ名>という形式で表現され、要素は開始タグと終了タグで囲まれた部分を指します。

HTMLにはさまざまなタグが存在し、それぞれのタグには特定の目的があります。
以下に代表的なタグの一部を紹介します。

<h1>〜<h6>: 見出しを表すタグ。数字が小さいほど重要度が高くなります
<p>: 段落を表すタグ
<a>: リンクを作成するタグ href属性を使用してリンク先のURLを指定します
<img>: 画像を表示するタグ src属性を使用して画像のURLを指定します
<ul>: 箇条書きリストを作成するタグ
<li>: リストの項目を表すタグ <ul>や<ol>の中に記述されます

これらのタグを組み合わせることで、ウェブページの構造や意味を明確に表現することができます。

タグや要素の適切な使い方を理解することは、HTML文書の構造やセマンティクスを維持するために重要です。正しいタグを選択し、意味のある要素を適切に組み合わせることで、ウェブページの可読性とアクセシビリティを向上させることができます。

さらに、タグにはさまざまな属性を追加することもできます。属性はタグに付加的な情報を提供し、要素の動作やスタイルを制御します。たとえば、<a>タグにはhref属性を使用してリンク先のURLを指定するほか、target属性でリンクの開き方を指定することもできます。

<a href="https://example.com" target="_blank">外部リンクの例</a>

タグと属性を組み合わせることで、より多彩な表現や機能を持つウェブページを作成することができます。正確な文法と適切な使用法を理解し、タグと要素をうまく活用しましょう。

4. idとclass

HTMLにおけるidとclassは、要素に対して特定の識別子やスタイルを割り当てるための属性です。
idとclassを使用することで、要素を一意に識別したり、複数の要素をグループ化したりすることができます。
最初は「お気に入りのポケモンに名前を付けて検索しやすいようにしている」みたいに考えてください。

以下にそれぞれの使い方とサンプルコードを示します。

idの使い方

id属性はHTML要素に対して一意の識別子を付けるための属性です。
id属性を使用すると、そのidが指定された要素を個別に特定することができます。
idは他の要素と重複しないユニークな名前で指定する必要があります。

例えば、以下のようなHTMLコードがあったとします。

<h1 id="page-title">Welcome to my website</h1>

この例では、<h1>要素にid属性を追加し、"page-title"という名前を付けています。
これにより、CSSやJavaScriptのコードで#page-titleというセレクタを使用することで、この特定の要素にスタイルや振る舞いを適用することができます。

classの使い方

class属性は、複数の要素をグループ化するための属性です。
class属性には要素に共通の名前を指定します。
同じclass名を持つ要素は、グループとしてまとめられます。

例えば、以下のようなHTMLコードがあったとします。

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">About</li>
  <li class="menu-item">Services</li>
  <li class="menu-item">Contact</li>
</ul>

この例では、<li>要素にclass属性を追加し、"menu-item"というクラス名を指定しています。
これにより、4つのメニューアイテムが同じグループとして扱われます。
CSSやJavaScriptのコードで.menu-itemというセレクタを使用することで、これらの要素に一括でスタイルを適用したり、操作したりすることができます。

idとclassの違い

idとclassは、要素に対して識別子やグループ化を行うための属性ですが、以下の違いに注意してください。

idはHTML文書内で一意の識別子であるため、同じidを持つ要素は存在してはいけません
一方、classは複数の要素に同じクラス名を指定することができます
idは個々の要素を特定するために使用されます
一方、classは複数の要素をグループ化してスタイルや操作をまとめて適用するために使用されます

このように、idとclassは要素に対して異なる目的で使用されます。
適切に利用することで、特定の要素を個別に操作したり、複数の要素をまとめてスタイルを適用したりすることができます。

5. その他の属性

idやclassの他にもHTMLではさまざまな属性があります。
ここでは、いくつか代表的な属性について解説しましょう。

src属性

src属性は、画像や動画などのメディア要素に対して、そのファイルのURLを指定します。

<img src="image.jpg" alt="My Image">

この例では、image.jpgというファイルの画像を表示しています。
src属性は、相対パスや絶対パスを使用して画像ファイルの場所を指定することができます。

href属性

href属性は、アンカータグ（<a>要素）に対して、リンク先のURLを指定します。

<a href="https://example.com">Visit Example Website</a>

この例では、"Visit Example Website"というテキストをクリックすると、https://example.comというURLに遷移します。href属性は、外部のウェブページへのリンクや同じページ内のセクションへのリンクなど、さまざまな目的で使用されます。

alt属性

alt属性は、画像要素(<img>)に対して、代替テキスト（alternative text）を指定します。
代替テキストは、画像が表示されない場合やスクリーンリーダーなどの補助技術を使用する場合に、画像の内容を説明するために使用されます。

<img src="image.jpg" alt="My Image">

この例では、"My Image"という代替テキストが指定されています。代替テキストは、画像が読み込まれない場合やアクセシビリティの向上のために重要な役割を果たします。

HTMLにはこれら以外にもさまざまな属性が存在します。例えば、widthやheight属性を使用して画像のサイズを指定したり、target属性を使用してリンク先を新しいタブで開くように指定したりすることができます。

属性はHTMLの要素にさまざまな機能や振る舞いを追加するための重要な要素です。
正しく使用することで、ウェブページの表示や動作を制御することができます。
これらの属性を使いこなして、立派なウェブページマスターを目指してください！

6. HTMLのおさらい

以下に、HTMLで頻出する用語について説明します。
理解度の確認にお使いください。

タグ（Tag）

タグ（Tag）は、HTML文書内で要素を定義するために使用されるマークアップ記号です。
タグは<と>で囲まれたテキストで表され、要素の開始や終了を示します。

<h1>This is a heading</h1>

要素（Element）

要素（Element）は、タグとその間にあるコンテンツから成ります。
要素は開始タグと終了タグで囲まれ、その間にテキストや他の要素が配置されます。
タグ（Tag）の例で言えば、<h1>要素が見出し全体を表し、開始タグと終了タグの間にテキストが配置されます。

属性（Attribute）

属性（Attribute）は、要素に付加的な情報や設定を提供するためのものです。
属性は要素の開始タグ内に記述され、属性名と属性値の組み合わせで表されます。
例えば、class属性やid属性がよく使用されます。

<div class="container" id="main">...</div>

セレクタ（Selector）

セレクタ（Selector）は、CSSやJavaScriptなどで要素を選択するために使用される指定方法です。
要素のタグ名や属性、クラス名、IDなどを使用して要素を特定します。
セレクタによって要素を選択することで、スタイルの適用や操作の対象とすることができます。

<p class="highlight">This is a highlighted paragraph.</p>

この例では、class属性がhighlightである<p>要素をセレクタで指定しています。

コンテンツ（Content）

コンテンツ（Content）は、要素内に配置されるテキストや他の要素のことを指します。
要素の開始タグと終了タグの間に配置される部分がコンテンツとなります。
タグ（Tag）の例で言えば、<h1>要素内の"This is a heading"がコンテンツです。

これらはHTMLで出てくる基本的な用語の一部です。
他にもさまざまな用語が存在しますが、これらを理解しておくことでHTMLの構造や要素の役割についてより深く理解することができます。

7. CSSとは

CSS（Cascading Style Sheets）は、HTML文書のスタイルやレイアウトを指定するためのスタイルシート言語です。
CSSを使用することで、ウェブページのデザインや外観をカスタマイズすることができます。
CSSの基本的な概念と役割について解説します。

8. CSSの基本構文

CSSの基本構文とルールについて解説します。
セレクタとプロパティ、値の組み合わせによってスタイルを適用する方法について具体的な例を交えて説明します。

CSSの基本構文

CSSのルールは次のような構文で記述されます。

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
  ...
}

セレクタ
スタイルを適用する要素。タグ名、クラス名、ID、属性などを使用して要素を特定します。
プロパティ
スタイルの種類。フォント、色、余白などのスタイルプロパティを指定します。
値
プロパティに適用する具体的な値。数値、色コード、文字列などが使用されます。

以下に具体的な例を示します。

h1 {
  color: blue;
  font-size: 24px;
}

p {
  color: red;
  font-size: 16px;
}

この例では、h1セレクタに対して文字の色を青色に、フォントサイズを24ピクセルに指定しています。
また、pセレクタに対して文字の色を赤色に、フォントサイズを16ピクセルに指定しています。

idとclassを使用したスタイルの指定

idとclassは要素に対して一意の識別子を付けるために使用されます。
これにより、特定の要素にスタイルを適用することができます。

<h1 class="highlight">This is a highlighted heading</h1>
<p id="intro">This is an introductory paragraph.</p>

.highlight {
  color: yellow;
  background-color: black;
}

#intro {
  font-size: 20px;
}

この例では、highlightクラスが付与されたh1に対して黄色の文字色と黒色の背景色を指定しています。
また、intro IDが付与されたp要素に対してフォントサイズを20ピクセルに指定しています。

これらの例を通じて、CSSの基本的な構文とルールを理解することができます。
CSSを使用することで、HTML要素の見た目やレイアウトを自由にカスタマイズすることができます。

9. HTMLとCSSの連携

HTMLとCSSを連携させることで、ウェブページのデザインを自由にカスタマイズすることができます。
HTML内でCSSを直接指定する方法や、外部CSSファイルを読み込む方法など、さまざまな連携方法があります。
以下にそれぞれの方法を詳しく説明します。

インラインスタイル

HTML要素のstyle属性を使用して、インラインスタイルとしてCSSを直接指定することができます。
インラインスタイルは要素ごとにスタイルを指定するため、特定の要素に対して個別のスタイルを適用したい場合に便利です。

<p style="color: green; font-size: 18px;">This is a paragraph with inline style.</p>

<style>タグ

HTML内に<style>タグを使用してCSSコードを埋め込むこともできます。
<style>タグ内にCSSコードを記述することで、HTMLファイル内でスタイルを管理することができます。

<style>
  h1 {
    color: red;
    font-size: 24px;
  }

  p {
    color: blue;
    font-size: 16px;
  }
</style>

外部CSSファイル

外部CSSファイルを作成し、HTMLファイルから読み込む方法もあります。
外部CSSファイルを使用することで、複数のHTMLファイルで同じスタイルを共有することができます。
※HTMLファイル内での読み込み順序でCSSの適用順が変わるので注意が必要です。

まず、CSSコードを含んだ別のファイル（例: styles.css）を作成します。

/* styles.css */
h1 {
  color: red;
  font-size: 24px;
}

p {
  color: blue;
  font-size: 16px;
}

次に、HTMLファイル内で<link>タグを使用してCSSファイルを読み込みます。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

<link>タグのhref属性にCSSファイルのパスを指定することで、HTMLファイルとCSSファイルを関連付けることができます。
これにより、複数のHTMLファイルで同じスタイルを共有し、保守性の高いコーディングを実現することができます。

HTMLとCSSの連携方法はさまざまであり、使用する状況やニーズに応じて適切な方法を選択することが重要です。

13. まとめ

この記事では、HTMLとCSSの基本的な書き方と使い方について解説しました。
これらの知識を活用して、自分自身のウェブページを作成するための基礎を身につけましょう。

以上でHTML+CSSの入門記事を終わります。
もしご質問や不明点がありましたら、お気軽にコメントしてください。
楽しいウェブ開発の世界へようこそ！

参考文献

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

新人研修チュートリアル① HTML+CSS編