初心者向けHTML, CSSの書き方。初めてのWebページ制作をしてみよう！

最終更新日 2023/05/15

HTMLとCSSの基礎を学び、初めてのWeb制作に挑戦するための初心者向けガイドブックです。

Web制作初心者のためのHTMLとCSSの威力

HTMLとCSSの力を活用することで、Web制作の初心者の方にもチャンスが広がります。この2つの基本技術は、Webの仕組みを理解し、魅力的でインタラクティブなWebサイトを作成するために必要な基礎的な知識を提供します。HTMLとCSSがあれば、自分のアイデアをWeb上で実現でき、Webデザイン、開発、そしてその先のキャリアへの扉を開くことができます。

さらに、HTMLとCSSの学習で得たスキルは、プログラミングやWeb開発の他の分野にも転用可能です。Webページの構造化（HTML）と装飾のデザイン（CSS）の原則を理解すれば、JavaScriptやReactなど他の言語やフレームワークの習得が容易になり、開発者としての汎用性と市場性が高まります。

HTMLとCSSを学習することのメリット

HTMLとCSSの学習には数多くのリターンが伴います。最も直接的なものは、Webサイトを作成し、操作できるようになることです。個人ブログ、オンラインポートフォリオ、ビジネスWebサイトのいずれを構築するにしても、HTMLとCSSの知識は非常に重要です。多くの業界がWebテクノロジーを理解したプロフェッショナルを必要としているため、このスキルセットは就職市場での競争力を高めることもできます。

実用的な利点だけでなく、クリエイティブなアイデアを実現することで得られる満足感もあります。HTMLとCSSを使えば、自分の書いたコードが画面上で視覚的でインタラクティブな媒体に変化するのを見ることができ、それは力強くやりがいのあることです。これは、Web開発やプログラミング全般についてもっと学びたいという好奇心や情熱に火をつけることができます。

Web制作における自習の重要性

Web開発の分野では、独学が学習と成長の重要な要素であることが多いです。HTMLやCSSを自分のペースで、自分のスタイルで学習する方法はオンラインで簡単に入手できるため、これまで以上に現実的なものとなっています。独学では、自分が最も困難と感じる分野や興味深い分野に集中でき、学習効率を高めることができます。

さらに、自己学習はIT業界で高く評価されている自己管理能力、臨機応変さ、問題解決能力といった重要な能力を養うことができます。失敗から学び、問題の解決策を見つけ、困難を乗り越えていくことができるのです。これらは、HTMLやCSSを習得するために必要なだけでなく、将来的にプログラミングやITの学習に取り組む際の強固な基礎となるものです。

初心者のためのHTMLとCSSの入門書

HTMLって何？

HTML（HyperText Markup Language）は、Webページの構造を作成するために使用される標準マークアップ言語です。HTMLは、Webブラウザにコンテンツの表示方法を指示する一連の要素やタグから構成されています。例えば、 <h1> タグは大見出しに、 <p> タグは段落に使用されます。

簡単なHTML文書の構造は、次のようになります。

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>

上の例では、<title> が文書のタイトルを、 <h1> が見出しを、 <p> が段落を定義しています。

CSSって何？

CSS（Cascading Style Sheets）は、HTMLで書かれた文書の外観や書式を記述するために使用されるスタイルシート言語です。HTMLが構造を提供する一方で、CSSはHTMLの要素をスタイリングし、視覚的に魅力的な体験を作り出すために使用されます。これには、レイアウト、色、フォントなどの側面が含まれます。

以下はCSSの例です。

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 30px;
}

この例では、本文の背景は水色で、 <h1> の見出しはネイビーで、左の余白から30ピクセル分インデントされています。CSSを学ぶことで、ユーザーエクスペリエンスを向上させる美的センスのあるWebページを作成できます。

HTMLの構造を理解する

HTML文書は、DOCTYPE宣言、html、head、bodyタグを含む標準的な構造に従っています。 <!DOCTYPE html> 宣言は、HTMLの文書型とバージョンを定義します。 <html> タグは、HTML文書全体をカプセル化（内包化）することを意味しています。この中の <head> タグには、タイトルやスクリプト、スタイルなど、Webページ自体には表示されないが、ブラウザにとって必要不可欠な文書のメタ情報が含まれています。

<body> タグは、テキスト、画像、リンクなど、Webページの目に見えるすべてのコンテンツを囲んでいます。この基本的なHTMLの構造を理解することは、自分のWebページを作るための最初のステップとなります。あなたが作成するHTMLファイルは、この一般的な構造に従って、コンテンツの枠組みを提供することを忘れないでください。

HTMLの基本タグ

HTMLタグは要素とも呼ばれ、Webページを構成する要素です。HTMLタグはコンテンツに意味を与えます。たとえば、見出しの意味を与えたければ<h1> ~ <h6>。段落は<p>、ハイパーリンクは<a>、画像は <img>。<span>や<div>はコンテンツをセクションとして分割します。

例えば、文章の段落を作るには、次のように <p> タグを使用します。

<p>これは段落です。</p>

それぞれのタグは特定の目的を持っており、ブラウザが囲んだ内容をどのように表示するかを解釈するのに役立ちます。これらのタグを使いこなすことは、HTMLコードを理解し書くために不可欠です。

簡単なHTML文書の作成

HTML文書の作成は、基本的な構造とタグさえ知っていれば簡単にできます。簡単なHTML文書を作ってみましょう。

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <h1>Welcome to My Web Page</h1>
        <p>This is my first paragraph.</p>
    </body>
</html>

この単純なHTML文書はDOCTYPE宣言で始まり、冒頭の <html> タグで始まります。その中に <head> セクションがあり、 <title> タグがあります。headに続く <body> セクションには、 <h1> 見出しと <p> 段落があります。HTML文書は、拡張子 .html で保存することを忘れないようにしましょう。そうすればどのWebブラウザでも見ることができます。より多くのタグや属性を学んだら、それらをHTML文書に追加して、より複雑なWebページを作成できます。

CSSでスタイリングする

CSS（Cascading Style Sheets）とは、HTMLの要素を画面上でどのように表示するかを記述するための言語です。HTMLがコンテンツを構成するのに対し、CSSはそのコンテンツの視覚的な表現力を高めるものです。CSSを使うと、複数のWebページのレイアウトを一度に制御したり、色、フォント、サイズなどの要素を好みのデザインに調整できます。

例えば、HTML文書のすべての段落（ <p> 要素）を青いテキストで表示させたいとします。これを実現するには、簡単なCSSルールを記述します。

p {
    color: blue;
}

このルールは、すべての段落のテキストを青色で表示するようにブラウザに指示します。CSSのプロパティや値を学ぶことで、より複雑で魅力的なWebデザインを作成できるようになります。

インライン、内部、外部CSS

CSSは、インライン、Internal（内部参照）、External（外部参照）の3つの方法でHTMLに適用できます。インラインCSSは、スタイルを設定するHTML要素にstyle属性で直接記述します。例えば、以下のような感じです。

<p style="color: blue;">これは青い段落です</p>。

この方法はコンテンツ（HTML）とプレゼンテーション（CSS）が混在し、コードが読みにくく、保守しにくくなるため、大規模な使用にはお勧めしません。

内部CSSは、HTML文書の<head>セクション内の<style>タグの中に記述します。これは、その特定の文書にのみスタイルを適用します。一方、外部CSSは別の.cssファイルに記述し、<head>セクション内の<link>タグを使用してHTML文書にリンクされます。この方法は1つのCSSファイルで複数のページにスタイルを適用できるため、再利用性が高く、メンテナンスが容易なことから大規模なWebサイトに好まれます。

CSSの基本的なプロパティー

CSSプロパティはHTML要素のスタイル設定に使用するものです。各プロパティには名前と値があり、コロンで区切って宣言し、セミコロンで終了します。基本的なプロパティには文字色を表すcolor、背景色を表すbackground-color。文字サイズを表すfont-size、文字フォントを表すfont-family。要素の外のスペースを表すmargin、要素の中のスペースを表すpaddingなどがあります。

例えば、テキストが赤、背景が青、フォントサイズが20pxの段落にスタイルを付けるには、次のように書きます。

p {
    color: red;
    background-color: blue;
    font-size: 20px;
}

このCSSルールは、HTML文書内のすべての段落要素にこれらのスタイルを適用します。より多くのプロパティと値を学ぶと、それらを使ってWebページをさらにカスタマイズできます。

HTMLとCSSのリンク方法

HTMLとCSSをリンクさせることは、デザイン性の高いWebページを作る上で非常に重要です。先に述べたように、1つのHTML文書内の要素にスタイルを付けるには、インラインまたは内部CSSを使用できます。しかし、複数のページを持つ大規模なプロジェクトでは、外部CSSファイルを使用するのがベストです。この方法では、1つのCSSファイルから複数のHTMLページにスタイルを適用できるため、整理しやすく、メンテナンスも容易です。

外部CSSファイルをリンクするには、HTMLファイルの<head>セクションにある<link>要素を使用します。href属性には、CSSファイルへのパスを指定します。例えば、以下のようになります。

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

このコード行は styles.css ファイルからCSSルールを取得し、現在のHTML文書に適用するようにブラウザに指示します。

CSSセレクタの重要性

CSSセレクタは、CSSルールセットの中で、実際にスタイルを設定するコンテンツを選択する部分です。セレクタは、タイプ、クラス、id、属性などに基づいて要素を選択できます。CSSの威力はその柔軟性にあり、セレクタはその大きな部分を担っています。セレクタを使い分けることで、HTML文書の特定の部分にスタイルを適用でき、各要素を思い通りに表示させることができます。

例えば、すべての段落要素にスタイルを適用したい場合は、要素セレクタpを使用します。また、特定の要素にhighlightsのクラスを適用したい場合はクラスセレクタ.highlightsを使用します。idがheaderのユニークな要素にスタイルを設定するには、idセレクタ#headerを使用します。セレクタを理解することは、CSSを使いこなすための鍵です。

CSSファイルとHTMLファイルの関連付け

これまで述べてきたように、大規模なプロジェクトでは、スタイルを外部のCSSファイルに記述することが多いでしょう。CSSファイルをHTMLファイルに接続することで、CSSファイルで定義されたルールに従ってHTMLコンテンツのスタイルを設定できます。これは、HTMLファイルの<head>セクションにある<link>要素を使用して行われます。

rel はrelationshipの略で stylesheet を指定し、 type は text/css 、 href はCSSファイルへのパスを指定する必要があります。例えば、以下のようになります。

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

この行をHTML文書に記述すると、 styles.css のすべてのスタイルがHTMLコンテンツに適用されます。

はじめてのWebページ作成

Webページを作成する最初のステップは、簡単なHTMLドキュメントを書くことです。HTML文書は<html>タグで始まり、<html>タグで終わります。<head>タグと<body>タグの中にコンテンツが入れ子になっています。<head>セクションには文書に関するメタ情報が含まれ、<body>セクションにはユーザーに見えるコンテンツが含まれます。例えば、非常に基本的なHTML文書は次のようなものです。

<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

このHTML文書をテキストエディタで作成し、拡張子 .html で保存します。そして、このファイルをWebブラウザで開くと最初のWebページが表示されます。

Webページを作成する

コーディングを始める前に、Webページのコンテンツとデザインを計画するのがよいでしょう。大まかなレイアウトを描き、ヘッダー、段落、画像、リンクなど、必要な要素を決めます。この計画は、詳細である必要はありませんが、明確な方向性を示すものであるべきです。

どのような情報を共有したいのか、どのように構成すべきかを考えてください。ターゲットとする読者層と、その読者層が役に立つ、あるいは面白いと感じるものは何かを考えましょう。重要な情報を見つけやすく、直感的に使えるデザインにすることが大切です。優れたWebデザインとは、形と機能の両方であることを忘れてはいけません。サイトは美しくあるべきですが、より重要なのは使いやすいことです。

最初のWebページを作成するためのステップバイステップガイド

計画を立てたら、いよいよ構築開始です。まず、HTMLの構造を設定することから始めます。テキストを適切なタグ（ <h1> は主要なヘッダー、 <p> は段落など）で囲み、コンテンツを追加してください。タグのネスト（入れ子）を忘れないようにしましょう。

コンテンツを配置したら、CSSでスタイリングを開始します。外部のCSSファイルを使用する場合は、HTML文書の <head> セクションにリンクすることを忘れないでください。CSSは、文字の大きさ、色、間隔などを設定するために使用します。基本的なCSSのルールは、次のようになります。

h1 {
  color: blue;
  text-align: center;
}

このルールでは、すべての <h1> テキストを青くし、中央揃えにします。このようなスタイルで、満足のいくページができあがります。そして、ファイルを保存し、ブラウザでHTMLファイルを開き、最初のWebページと対面してみましょう。

HTMLとCSSの自習用リソース

インターネットには、HTMLとCSSを学習するための多くのリソースがあります。Mozilla Developer Network (MDN)のようなWebサイトでは、これらの言語に関する包括的なガイドが提供されており、各コンセプトが明確な例で説明されています。さらに、CodecademyやfreeCodeCampなどのインタラクティブなプラットフォームでは、HTMLとCSSの実践的な演習を提供しており、理解を深めるのに役立ちます。

さらに、Stack OverflowやGitHubのようなフォーラムやオンラインコミュニティも貴重なリソースとなります。ここでは、質問を投げかけたり、自分の作品を共有してフィードバックを得たり、自信がついたらオープンソースプロジェクトに貢献もできます。独習の鍵は、一貫性と練習であることを忘れないでください。

HTMLとCSSを超える旅

HTMLとCSSの基本を押さえたら、Web制作の世界は大きく広がります。次に検討すべきは、JavaScriptです。JavaScriptは、HTMLやCSSと並んで、Web制作の要となる言語です。ユーザーの操作に反応するインタラクティブな要素を加え、Webページに命を吹き込みます。

JavaScriptをしっかり理解したら、jQuery、Angular、React、Vue.jsなどのライブラリやフレームワークにも触れてみてください。これらのツールは、複雑なアプリケーションをより効率的に構築するのに役立ちます。また、Node.jsなどのバックエンド技術やデータベースなど、フルスタック開発環境を形成するさまざまなWeb技術も忘れてはいけません。

その他の必須Web開発スキル

Webデベロッパーとして成功するためには、テクニカルスキルだけでなくソフトスキルも必要です。コーディングの課題に対して革新的な解決策を見出す必要であることが多いため、問題解決能力は非常に重要です。また、チームでの作業やクライアントとの連絡、技術者以外のステークホルダーへの説明など、コミュニケーション能力も欠かせません。

さらに、特にフロントエンドを担当する場合は、デザインに対する鋭い目も有益です。何が美しく見えるかを知り、ユーザーエクスペリエンス（UX）の原則を理解することで、機能的であるだけでなく、魅力的でユーザーフレンドリーなWebサイトを作ることができます。常に新しい技術や方法論を学び続けることが、技術者業界の本質であることを忘れないでください。

現代のWeb開発におけるHTMLとCSSの役割

HTMLとCSSは現代のWeb制作に欠かせないツールであり、すべてのWebサイトを構築する土台となるものです。HTMLはWebページの構造を、CSSはWebページのスタイルや外観を定義するものです。新しい言語やフレームワークが登場しても、HTMLとCSSの重要性は衰えることがありません。

また、JavaScriptやさまざまなJavaScriptライブラリ、フレームワークなど、より複雑なフロントエンド技術への入り口にもなっています。Web開発がどのように進化しても、HTMLとCSSをしっかり理解していることは貴重な資産となります。HTMLとCSSをマスターすることで、達成感や自信が生まれ、より高度なWeb制作に取り組むことができます。