【初心者向け】HTML CSSを直書きするメリットと手順

By /

はい、承知いたしました。【初心者向け】HTML CSSを「直書き」するメリットと手順に関する詳細な記事を記述します。約5000語（文字）を目指し、初心者の方にも分かりやすいように丁寧に解説します。

【初心者向け】Webサイトの土台を学ぶ！HTML CSSを「直書き」するメリットと詳細手順

はじめに：Webサイト制作の第一歩を踏み出すあなたへ

インターネットの登場以来、Webサイトは私たちの生活に欠かせないものとなりました。ブログ、企業の公式サイト、ECサイト、SNS… 数えきれないほどのWebサイトが存在し、私たちは毎日それらを利用しています。

「いつか自分もWebサイトを作ってみたい」「Web制作の仕事をしてみたい」

もしあなたがそう考えているなら、この記事はきっと役に立つはずです。Web制作の世界に足を踏み入れるにあたり、まず最初に学ぶべき技術、それが HTML（HyperText Markup Language） と CSS（Cascading Style Sheets） です。

Webサイトは、例えるなら人間の体のようなものです。

  • HTML は、体の骨格や内臓、皮膚といった「構造」や「内容」を定義する役割を担います。見出し、段落、画像、リンクなどがこれにあたります。
  • CSS は、その体を「装飾」する役割を担います。髪の色、服のデザイン、化粧、姿勢などがこれにあたり、見た目やレイアウトを整えます。

つまり、HTMLで土台を作り、CSSで装飾を施すことで、私たちは普段見ているWebサイトが成り立っているのです。

さて、Webサイトを作る方法にはいくつかあります。

  • WordPressのような CMS（コンテンツ管理システム） を使う方法
  • ReactやVue.jsといった フロントエンドフレームワーク を使う方法
  • Bootstrapのような CSSフレームワーク を使う方法
  • SassやLessといった CSSプリプロセッサ を使う方法

これらは非常に便利で強力なツールですが、初心者の方がいきなりこれらのツールから入ると、「なぜこのコードを書くのか」「裏側で何が起こっているのか」が見えづらく、Webの仕組みを根本から理解するのが難しくなることがあります。

そこで、この記事でご紹介するのが、HTMLファイルとCSSファイルを直接作成し、コードを記述していく、いわゆる「直書き」と呼ばれる方法です。

「直書き」とは、特別なツールやフレームワークを使わずに、最も基本的なHTMLとCSSのコードを、テキストエディタを使って手で記述していく開発手法を指します。

この「直書き」から始めることには、Web制作の学習において、多くの重要なメリットがあります。この記事では、そのメリットを詳しく解説し、実際に「直書き」で簡単なWebサイトを作成する具体的な手順を、初心者の方にも分かりやすくステップバイステップでご紹介します。

さあ、Web制作の基礎をしっかりと固め、あなたのアイデアを形にする第一歩を踏み出しましょう！

第1部：HTML CSSを「直書き」するとは？

まず、「HTML CSSを直書きする」という言葉が具体的に何を意味するのかを掘り下げてみましょう。

前述の通り、「直書き」とは、以下のようなプロセスでWebサイトを作成することです。

  1. PC上に新しい空のファイルを作成します。
  2. そのファイルに.htmlという拡張子をつけてHTMLファイルとします（例: index.html）。
  3. 別のファイルに.cssという拡張子をつけてCSSファイルとします（例: style.css）。
  4. HTMLファイルとCSSファイルを、メモ帳やVisual Studio Code（VS Code）などの テキストエディタ で開きます。
  5. それぞれのファイルに、Webサイトの構造や見た目を定義するコードを 手入力で記述 していきます。
  6. 記述したHTMLファイルを Webブラウザ （Chrome, Firefox, Edgeなど）で開いて、どのように表示されるかを確認します。
  7. 必要に応じてコードを修正し、表示を確認するという作業を繰り返します。

これが「直書き」の基本的な流れです。最も原始的で、最も基本的なWeb制作の方法と言えます。

対照的に、先ほど挙げたようなCMSやフレームワークを使った開発では、以下のような特徴があります。

  • CMS（WordPressなど）: 管理画面上での操作が中心となり、コードを直接書く機会が少ない。テンプレートやプラグインを使うことで、コードを知らなくても機能を追加できる。
  • フレームワーク（React, Vue.js, Bootstrapなど）: 事前に定義されたルールや部品（コンポーネント）、便利な記法を使って開発する。効率的で大規模開発に向いているが、そのフレームワーク独自の学習が必要。
  • CSSプリプロセッサ（Sassなど）: CSSにはない変数や関数のような機能を使って効率的にCSSを記述し、最終的に標準的なCSSに変換（コンパイル）して使用する。

これらのツールは、開発効率を高めたり、より複雑な機能を実現するために非常に有効です。しかし、それぞれに独自の仕組みや記法があり、それらを使いこなすには、まずその根底にあるHTMLとCSSの知識が不可欠です。

「直書き」は、これらの便利なツールの「下」にある、Webサイトが表示される仕組みそのものに最も近い開発手法なのです。だからこそ、Web制作の学習を始めるにあたって、「直書き」は基本をしっかりと学ぶための最適な方法と言えるのです。

必要なツールは、驚くほどシンプルです。

  • テキストエディタ: コードを書くためのツール。Windows標準のメモ帳でも不可能ではありませんが、コードの色分け表示（シンタックスハイライト）や入力補完機能がある専用のエディタを使うのが一般的です。後ほどおすすめのエディタを紹介します。
  • Webブラウザ: 作成したHTMLファイルを実際に表示して確認するためのツール。Chrome、Firefox、Edge、Safariなど、普段インターネットを見ているブラウザでOKです。これらのブラウザには、開発に便利な機能が搭載されています。

これだけあれば、あなたは今日からWebサイト制作の第一歩を踏み出すことができます。

第2部：HTML CSSを「直書き」するメリット

では、なぜ初心者にとって「直書き」がそれほど推奨されるのでしょうか？そのメリットを一つずつ見ていきましょう。

1. Webサイトの基本構造を肌で理解できる

「直書き」では、HTMLファイルにページの骨格や内容を定義し、CSSファイルにその見た目を記述します。この作業を繰り返すことで、

  • 「この見出しは<h1>タグで書くんだな」
  • 「この段落は<p>タグだな」
  • 「画像を表示するには<img>タグを使うのか」
  • 「この要素に色をつけるには、CSSでcolorプロパティを指定するんだ」
  • 「要素の間に余白を作るにはmarginかpaddingを使うんだな」

といったように、HTML要素の役割や、CSSプロパティが実際にどのような効果を持つのかを、コードと実際の表示を結びつけながら、体感的に理解することができます。

CMSやフレームワークを使う場合、見た目の変更がGUI操作（ボタンをクリックするなど）でできたり、特定のクラス名をHTML要素に追加するだけで複雑な装飾ができたりします。これは非常に便利なのですが、「その裏側でどのようなHTMLが生成され、どのようなCSSが適用されているのか」が見えづらい場合があります。

「直書き」では、自分が書いたコードがそのままブラウザに表示されるため、コードと結果が明確に対応します。これにより、Webサイトがどのように組み立てられ、どのように装飾されているのかという 「基本構造」 や 「仕組み」 を、最もダイレクトな形で学ぶことができるのです。

また、HTML要素同士の親子関係や包含関係、そしてそれがCSSの適用にどう影響するのか（例えば、親要素に指定した文字色が子要素にも引き継がれる「継承」など）といった、Webページの根幹をなす構造を理解するのに役立ちます。

2. コードの仕組みがクリアになる

Webサイトが表示されるまでには、ブラウザがHTMLファイルを読み込み、内容を解釈し、CSSファイルの内容と組み合わせて画面に描画するというプロセスがあります。

「直書き」では、このプロセスが非常にシンプルです。あなたが書いたHTMLとCSSのコードが、ほぼそのままブラウザに渡され、解釈されます。

例えば、CSSには「詳細度」という概念があります。同じ要素に対して複数のCSSルールが適用される場合、どのルールが優先されるかを決定する仕組みです。また、「カスケード」と呼ばれる、複数のスタイルシートのルールがどのように結合されるかの仕組みや、「継承」といった概念もあります。

フレームワークを使うと、すでに定義された複雑なCSSルールが多数存在するため、自分が書いたCSSがなぜ意図した通りに適用されないのか、あるいは意図しないスタイルが適用されるのかが分かりづらくなることがあります。「なぜこのスタイルが効かないんだろう？」と悩んだときに、フレームワークの内部の仕組みを理解していないと、原因を特定するのが難しくなります。

しかし「直書き」であれば、存在するCSSは自分で書いたコードだけです。したがって、スタイルが意図通りにならない場合、原因は自分の書いたHTMLかCSSのコードの中にあります。ブラウザの開発者ツールを使えば、どのCSSルールが適用されているのか、なぜそれが優先されているのかを簡単に調べることができます。

このように、コードの記述から表示までの流れがシンプルかつ透明であるため、Webページの仕組みを理解しやすく、問題が発生したときの原因特定（デバッグ）もしやすくなります。

3. 学習コストが低い

Web制作の学習を始める際、CMSやフレームワークから入ると、まずそのツール自体の使い方や独自の記法を覚える必要があります。例えば、WordPressなら管理画面の操作方法、テーマやプラグインの仕組み。ReactならJSX記法やコンポーネントの考え方。Bootstrapなら特定のクラス名をHTML要素に付与する方法などです。

これらはHTMLとCSSとは別に、学習が必要な要素となります。当然、学習すべき範囲が広がり、難易度も上がります。

一方、「直書き」で必要なのは、純粋なHTMLとCSSの仕様に関する知識だけです。もちろん、HTMLやCSS自体にも多くの要素やプロパティがあり、すべてを一度に覚える必要はありませんが、特定のツールの使い方を覚える必要はありません。

必要な知識の範囲が限定されるため、学習のハードルが低く、比較的短期間でWebサイトの基本的な構造やデザインができるようになります。「まずはWebページが表示される仕組みを理解したい」「手っ取り早く自分のPCでWebページを作ってみたい」という初心者の方にとって、学習コストの低さは大きなメリットです。

4. 環境構築が不要/容易

CMSや一部のフレームワーク、CSSプリプロセッサを使う場合、開発を始める前にサーバー環境を用意したり、特定のソフトウェアやライブラリをインストールしたり、複雑な設定ファイルを用意したりといった 環境構築 が必要な場合があります。これは初心者にとって、最初の大きな壁となることがあります。

「直書き」の場合、前述の通り必要なのはテキストエディタとWebブラウザだけです。どちらも普段使っているPCにすでに入っているか、無料で簡単にインストールできるソフトウェアです。サーバーを用意したり、特別な設定をしたりする必要はありません。HTMLファイルとCSSファイルを作成するフォルダをPC内に用意するだけで、すぐに開発を始めることができます。

この手軽さは、Web制作の世界に触れる最初のステップとして非常に重要です。「難しそう」「準備が大変そう」といった心理的なハードルを下げてくれます。

5. パフォーマンスの最適化がしやすい（基礎が身につく）

フレームワークやCMSは多機能である反面、不要な機能やコードが含まれてしまうことがあります。これにより、ページの読み込み速度が遅くなったり、ファイルサイズが大きくなったりすることがあります。

「直書き」では、自分で書いたコードだけがページの構成要素となります。そのため、必要最低限のコードでWebサイトを構築することが可能です。これにより、無駄な記述が少なくなり、ページの読み込み速度が速くなる傾向があります。

もちろん、単に「直書き」すれば速くなるというわけではありません。効率的なHTMLの構造化や、CSSの記述方法、画像の最適化など、パフォーマンスを意識したコーディングスキルが必要です。しかし、「直書き」でコードの量や構造を自分で完全にコントロールできるからこそ、「どうすればもっと速くなるか」というパフォーマンス最適化の考え方を、基礎の段階から学びやすいのです。

特に、ファイルサイズの小さな静的なページ（常に同じ内容を表示するページ）であれば、「直書き」はパフォーマンス面で非常に優れています。

6. デバッグがしやすい

開発中にコードのミスなどで意図した通りに表示されないことは日常茶飯事です。これを解決する作業を デバッグ と言います。

「直書き」の場合、コードは自分で書いたHTMLとCSSのみです。問題が発生した場合、チェックすべき範囲は限られています。HTMLの構造がおかしいのか、CSSのセレクタが間違っているのか、プロパティの値が間違っているのか、ファイルパスが間違っているのか、といった原因を比較的容易に特定できます。

ブラウザの開発者ツールを使えば、特定のHTML要素にどのようなCSSが適用されているか、どこからそのスタイルが来ているか、あるいはなぜ特定のスタイルが適用されないのかなどを視覚的に確認できます。自分で書いたコードと開発者ツールの表示を照らし合わせながらデバッグすることで、HTMLとCSSの仕組みへの理解が深まります。

フレームワークやCMSを使った場合、問題が自分が書いたコードにあるのか、それともフレームワークやCMSの内部的な問題にあるのかを切り分けるのが難しくなることがあります。また、自動生成された複雑なHTMLやCSSに対してデバッグを行う必要が出てくることもあります。

「直書き」は、デバッグの基本的な考え方や、ブラウザの開発者ツールの効果的な使い方を学ぶのに最適な環境を提供してくれます。

7. 他の技術への応用が効く

HTMLとCSSは、Webサイト制作の最も基本的な技術です。あなたが将来、どのようなWeb制作の手法を選ぶにしても、HTMLとCSSの知識は必ず必要になります。

  • CMS: WordPressでテーマをカスタマイズしたり、特定のデザインを実現したりするには、HTMLとCSSの知識が不可欠です。投稿エディタでHTMLを直接編集することもあります。
  • フロントエンドフレームワーク: ReactやVue.jsでUI（ユーザーインターフェース）を作成する際も、内部的にはHTMLのような構造を記述し（JSXやテンプレート構文）、スタイルを適用するためにCSSの知識を使います。
  • CSSフレームワーク: Bootstrapなどのフレームワークは、事前に用意されたCSSクラスをHTML要素に適用することでデザインを整えますが、フレームワークの仕組みを理解し、カスタマイズするためには、やはりCSSの知識が必要です。
  • JavaScript: Webページに動きやインタラクティブな要素を追加するJavaScriptも、HTML要素を取得したり、CSSスタイルを変更したりといった操作を行います。HTML/CSSの構造を理解していることが前提となります。

「直書き」でHTMLとCSSの基礎をしっかりと身につけておけば、後からどのような発展的な技術を学ぶことになっても、その学習がスムーズに進みます。これらの技術は、HTML/CSSという土台の上に成り立っているからです。

8. オリジナリティが出しやすい

CMSのテーマやCSSフレームワークは、手軽に整ったデザインを実現できる反面、どうしても「テンプレート感」が出てしまうことがあります。他のサイトと似たようなデザインになりやすいという側面もあります。

「直書き」であれば、デザインの制約は基本的にHTMLとCSSの仕様の範囲内だけです。あなたのアイデア次第で、どのようなレイアウトや装飾も自由に実現できます。完全にオリジナルのデザインを持ったWebサイトを作成することが可能です。

もちろん、自由度が高いということは、デザインセンスやコーディングスキルが必要になるということでもあります。しかし、ゼロから自分の手でWebサイトの見た目を作り上げていく経験は、Webデザイナーやフロントエンドエンジニアを目指す上で非常に貴重なものとなります。

これらのメリットを総合すると、「直書き」はWeb制作の基礎を学び、Webがどのように成り立っているかを理解するための最も効果的で、かつ手軽な方法であることが分かります。まずはここからWeb制作の学習をスタートさせることを強くお勧めします。

第3部：HTML CSSを「直書き」する手順

それでは、実際にHTMLとCSSを「直書き」して簡単なWebサイトを作成する手順を、ステップごとに詳しく見ていきましょう。

今回は、「自己紹介ページ」のようなシンプルな1ページのWebサイトを想定して進めます。

ステップ1：目標設定と計画（簡単なラフ作成）

Webサイトを作る前に、まず「何を作るか」を明確にしましょう。今回は簡単な自己紹介ページですが、例えば以下のような要素を含めることを想定します。

  • ページのタイトル
  • 自分の名前（見出し）
  • 簡単な自己紹介文（段落）
  • 自分の写真（画像）
  • 趣味やスキルなどのリスト（リスト）
  • SNSアカウントなどへのリンク（リンク）
  • ページの下部に著作権情報（フッター）

これらの要素を、ページ内でどのように配置するか、簡単なイメージを紙やPC上で手書き/手打ちでラフスケッチしてみましょう。

“`

ページのタイトル
[ 写真 ] 名前（見出し）
自己紹介文（段落）
————————-
趣味のリスト
・読書
・映画鑑賞
————————-
リンク
> Twitter
> GitHub
————————-
© 2023 Your Name

“`

このような簡単なラフでも構いません。これがあることで、後続のHTML構造を考える際の助けになります。

ステップ2：開発環境の準備

前述の通り、必要なツールはテキストエディタとWebブラウザだけです。

テキストエディタの準備:

コードを記述するためのテキストエディタを用意しましょう。プログラミング用途でよく使われる、無料で高機能なエディタをいくつかご紹介します。

  • Visual Studio Code (VS Code)：Microsoftが開発している無料のエディタ。非常に高機能で拡張性が高く、多くの開発者に利用されています。シンタックスハイライト、入力補完、デバッグ機能など、開発に必要な機能が豊富に揃っています。日本語化も可能です。迷ったらこれを選んでおけば間違いないでしょう。
  • Sublime Text: 軽量で動作が高速な有料エディタ（無料版も利用可能ですが、時々購入を促されます）。シンプルで使いやすいインターフェースが特徴です。
  • Atom: GitHubが開発していた無料のエディタ（現在は開発終了）。VS Codeと同様に高機能で拡張性が高いエディタでした。まだ利用可能ですが、新規開発は終了している点に注意が必要です。

ここでは、最も一般的なVS Codeを推奨します。VS Codeをインストールしたら、必要に応じて日本語拡張機能をインストールしておくと使いやすくなります。

Webブラウザの準備:

普段インターネットを見ているブラウザ（Chrome, Firefox, Edge, Safariなど）で構いません。開発者ツールを使う機会が増えるので、主要なブラウザをいくつかインストールしておくと、表示崩れなどを確認する際に便利です。特にGoogle Chromeの開発者ツールは高機能で使いやすいため、おすすめです。

ファイル管理の準備:

作成するHTMLファイル、CSSファイル、画像ファイルなどを整理するためのフォルダをPC内の分かりやすい場所に作成しておきましょう。例えば、「my-website」のような名前のフォルダを作り、その中にファイルを置いていくのが一般的です。

my-website/
├── index.html
└── style.css

現時点では、my-websiteという空のフォルダを作成しておけばOKです。

ステップ3：HTMLファイルの作成

いよいよコードを書いていきます。まずはWebサイトの骨格となるHTMLファイルを作成しましょう。

  1. 先ほど作成したmy-websiteフォルダの中に、新しいファイルを作成し、index.htmlという名前で保存します。
  2. 作成したindex.htmlファイルをテキストエディタ（VS Codeなど）で開きます。
  3. 以下の基本的なHTMLの構造（ひな形）を記述します。

“`html






ページのタイトル


“`

各行の意味を説明します。

  • <!DOCTYPE html>: これは、この文書がHTML5の文書であることをブラウザに伝えるおまじないのようなものです。必ず文書の最初の行に記述します。
  • <html lang="ja">: HTML文書のルート（一番親）となるタグです。文書全体の始まりと終わりを示します。lang="ja"は、この文書の言語が日本語であることを示します。
  • <head>: HTML文書の「頭」にあたる部分です。ここには、ページ自体に関する情報（メタデータ）や、外部ファイルの読み込みなどを記述します。この<head>タグ内に書かれた内容は、通常、ブラウザの画面には直接表示されません。
  • <meta charset="UTF-8">: 文字コードを指定します。UTF-8を指定することで、日本語を含む様々な言語の文字を正しく表示できます。これは必ず記述すべき重要な要素です。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: これは特にスマートフォンなどで見たときの表示に関わる設定です。「ビューポート」と呼ばれる表示領域の幅をデバイスの幅に合わせ、初期のズーム倍率を1倍にする、という意味です。レスポンシブデザイン（様々な画面サイズに対応したデザイン）の基本となる設定です。
  • <title>ページのタイトル</title>: ブラウザのタブやウィンドウのタイトルバーに表示されるページのタイトルを指定します。検索エンジンの結果にも表示される重要な部分です。今回は「〇〇の自己紹介ページ」のように設定しましょう。
  • <link rel="stylesheet" href="style.css">: これが、後で作成するCSSファイル（style.css）をこのHTMLファイルに適用するための記述です。rel="stylesheet"でCSSファイルであることを示し、href="style.css"でCSSファイルの場所を指定します。HTMLファイルと同じフォルダにCSSファイルを置く場合は、ファイル名だけでOKです。
  • <body>: HTML文書の「体」にあたる部分です。ここに書かれた内容が、Webブラウザの画面に実際に表示されるコンテンツとなります。見出し、段落、画像、リンクなど、ユーザーに見せたい情報をすべてこの<body>タグの中に記述します。
  • <!-- -->: これは「コメント」です。ここに書いた内容はブラウザに表示されず、コードを書いている人だけが見ることができます。メモやコードの説明に使います。

コンテンツの記述:

先ほどのラフを元に、<body>タグの中に具体的なコンテンツを記述していきます。主要なHTML要素をいくつか使ってみましょう。

セマンティックHTML（意味のあるタグを使って構造を表現する）を意識すると、後々管理しやすくなりますし、検索エンジンやスクリーンリーダーにも内容が伝わりやすくなります。主要なセマンティックタグとして、<header>, <main>, <footer>, <nav>, <article>, <section>などがあります。

今回はシンプルに、ページの主要な部分を分けるために<header>, <main>, <footer>を使ってみましょう。

“`html






あなたの名前の自己紹介ページ

あなたの名前

自己紹介

ここに自己紹介文を書きます。出身地、職業、興味のあることなどを自由に記述しましょう。

改行したい場合は、別の`

`タグを使うか、`
`タグを使います（`
`は文章中の改行に使うことが多いです）。

写真

あなたの写真


趣味・スキル

趣味

  • 読書
  • 映画鑑賞
  • 旅行

スキル

  1. HTML
  2. CSS
  3. （もしあれば）JavaScript


連絡先・リンク

© 2023 Your Name




“`

【補足】HTMLの主なタグ（要素）

  • 見出し: <h1>から<h6>まであります。<h1>が最も重要（大見出し）で、数字が増えるにつれて重要度が下がります。ページのタイトルやセクションのタイトルに使います。
  • 段落: <p>タグ。まとまった文章を記述します。
  • 画像: <img>タグ。src属性に画像ファイルの場所を、alt属性に代替テキストを指定します。終了タグはありません。
  • リンク: <a>タグ。href属性にリンク先のURLを指定します。テキストや画像を<a>タグで囲むことで、それをクリック可能なリンクにできます。
  • リスト: <ul>（順不同リスト）、<ol>（順序付きリスト）、<dl>（定義リスト）があります。リストの各項目は<li>（リストアイテム）タグで記述します。
  • 分割: <div>タグ。特定の意味を持たない汎用的なコンテナ要素として、要素をグループ化したり、CSSでスタイルを適用するための「箱」として非常によく使われます。
  • インライン要素のグループ化: <span>タグ。<div>と同様に汎用的なコンテナですが、<div>がブロックレベル要素（前後に改行が入る）なのに対し、<span>はインライン要素（文章中にそのまま挿入される）です。文章中の一部分にだけスタイルを適用したい場合などに使います。
  • セマンティックタグ: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>など。それぞれのタグが持つ意味（ヘッダー、ナビゲーション、主要コンテンツ、記事、セクション、サイドバー、フッターなど）に基づいて要素を配置することで、文書構造を明確にします。

index.htmlファイルを保存したら、Webブラウザで開いてみましょう。ファイルエクスプローラー（Windows）やFinder（Mac）でindex.htmlファイルをダブルクリックすれば開けます。

現時点では、画像が表示されていなかったり（your-photo.jpgというファイルが存在しないため）、デザインが整っていなかったりしますが、書いたテキストや要素がブラウザに表示されていることが確認できるはずです。

ステップ4：CSSファイルの作成と適用

HTMLファイルだけでは、文字が羅列されただけの素っ気ない表示になります。ここでCSSの出番です。CSSを使って、ページの見た目を整え、装飾を施しましょう。

  1. 先ほどHTMLファイルを作成したmy-websiteフォルダの中に、新しいファイルを作成し、style.cssという名前で保存します。
  2. 作成したstyle.cssファイルをテキストエディタ（VS Codeなど）で開きます。
  3. ここにCSSのコードを記述していきます。

CSSの基本的な書き方は以下の通りです。

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

  • セレクタ: スタイルを適用したいHTML要素を指定します。
  • プロパティ: どのようなスタイルを適用するか（色、大きさ、余白など）を指定します。
  • 値: プロパティに対して具体的にどのような設定を行うか（赤、16px、10pxなど）を指定します。

では、style.cssに基本的なスタイルを記述してみましょう。

“`css
/ 全体に対するスタイル /
body {
font-family: sans-serif; / フォントの種類を指定 /
line-height: 1.6; / 行の高さを指定 /
margin: 0; / bodyタグの外側の余白を0にする（ブラウザによってはデフォルトで余白があるため） /
background-color: #f4f4f4; / 背景色 /
color: #333; / 文字色 /
}

/ ヘッダーのスタイル /
header {
background-color: #333; / 背景色 /
color: #fff; / 文字色 /
padding: 20px 0; / 内側の余白（上下左右） /
text-align: center; / テキストを中央揃え /
margin-bottom: 20px; / 下側の外側の余白 /
}

header h1 {
margin: 0; / h1タグの上下の余白を0にする（ブラウザによってはデフォルトで余白があるため） /
font-size: 2.5em; / フォントサイズ /
}

/ メインコンテンツのスタイル /
main {
width: 80%; / 幅を親要素（body）の80%にする /
margin: 0 auto; / 左右の外側余白をautoにすることで、要素を中央揃えにする /
background-color: #fff; / 背景色 /
padding: 20px; / 内側の余白 /
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); / 軽い影をつける /
}

section {
margin-bottom: 30px; / 下側の外側の余白 /
padding-bottom: 20px; / 下側の内側の余白 /
border-bottom: 1px solid #ddd; / 下側に細い線を引く /
}

section:last-child {
border-bottom: none; / 最後のsectionの下線は消す /
margin-bottom: 0;
padding-bottom: 0;
}

h2 {
color: #555; / h2タグの文字色 /
border-bottom: 2px solid #eee; / 下線 /
padding-bottom: 5px;
}

h3 {
color: #666; / h3タグの文字色 /
margin-top: 20px; / 上側の外側の余白 /
}

img {
max-width: 100%; / 画像の最大幅を親要素の幅に合わせる（レスポンシブ対応の基本） /
height: auto; / 高さは自動調整して縦横比を維持 /
display: block; / 画像をブロック要素として扱い、前後に改行を入れる /
margin: 10px auto; / 上下10px、左右autoで画像を中央揃え /
border-radius: 8px; / 角を丸くする /
}

ul, ol {
margin-left: 20px; / 左側に余白（インデント）をつける /
}

li {
margin-bottom: 8px; / リスト項目の下に余白 /
}

a {
color: #007bff; / リンクの文字色 /
text-decoration: none; / 下線を消す /
}

a:hover {
text-decoration: underline; / マウスオーバーで下線を表示 /
}

/ フッターのスタイル /
footer {
text-align: center; / テキストを中央揃え /
margin-top: 30px; / 上側の外側の余白 /
padding: 20px 0; / 内側の余白 /
background-color: #333; / 背景色 /
color: #fff; / 文字色 /
}

footer p {
margin: 0; / pタグのデフォルト余白を消す /
font-size: 0.9em; / フォントサイズを少し小さく /
}
“`

【補足】CSSの主なセレクタとプロパティ

  • セレクタの種類:

    • 要素セレクタ: タグ名で指定 (body, h1, p, imgなど)。指定したすべての要素にスタイルが適用されます。
    • クラスセレクタ: HTML要素にclass="クラス名"という属性を付与し、CSSで.クラス名と指定します。複数の要素に同じスタイルを適用したい場合に使います。汎用的で非常によく使われます。
    • IDセレクタ: HTML要素にid="ID名"という属性を付与し、CSSで#ID名と指定します。IDはHTML文書内で一度しか使えません。特定の要素に固有のスタイルを適用したい場合に使います（クラスの方が汎用性が高いため、IDはスタイル目的ではあまり使われなくなってきています）。
    • 子孫セレクタ: セレクタ1 セレクタ2 のようにスペースで区切ると、セレクタ1の子孫要素であるセレクタ2にスタイルを適用できます（例: header h1なら、<header>タグの中にあるすべての<h1>タグ）。
    • 擬似クラス: 要素の状態（マウスが乗っている時、リンクが訪問済みかなど）によってスタイルを変更できます（例: a:hover）。

  • 主なプロパティ:

    • 色・背景: color（文字色）、background-color（背景色）、background-image（背景画像）
    • 文字: font-size（フォントサイズ）、font-family（フォントの種類）、font-weight（太さ）、text-align（文字揃え）、text-decoration（装飾、下線など）
    • サイズ: width（幅）、height（高さ）、max-width、min-widthなど
    • 余白: margin（外側の余白）、padding（内側の余白）。上下左右個別に指定したり、まとめて指定したりできます。
    • 境界線: border（境界線の太さ、種類、色）。
    • 表示形式: display（要素の表示形式、block、inline、inline-block、flex、gridなど）。これはレイアウトを組む上で非常に重要なプロパティです。
    • 配置: position（要素の配置方法）、float（要素を左右に寄せる）、flexboxやgrid（複雑なレイアウトを効率的に組むための現代的な手法）。
    • その他: box-shadow（影）、border-radius（角丸）など、装飾に関するプロパティも多数あります。

style.cssファイルを保存します。

index.htmlの<head>タグ内で<link rel="stylesheet" href="style.css">と記述しているため、index.htmlをブラウザで開き直すと、今書いたCSSのスタイルが適用されているはずです。

もし、画像ファイル（your-photo.jpg）がある場合は、index.htmlやstyle.cssと同じmy-websiteフォルダに置いてみてください。そうすれば、<img src="your-photo.jpg" alt="あなたの写真">で画像が表示されます。もし画像ファイルがない場合や別の場所に置く場合は、src属性のパスを正しく修正してください。

ステップ5：開発とデバッグ

HTMLとCSSを記述する作業は、一度で完璧にできるものではありません。

  1. HTMLで構造やコンテンツを追加・修正する。
  2. CSSで見た目やレイアウトを調整する。
  3. ブラウザで表示を確認する。
  4. 意図した通りになっていなければ、コードに戻って修正する。

この繰り返しです。

このプロセスにおいて非常に役立つのが、ブラウザの開発者ツールです。

ほとんどのモダンブラウザには開発者ツールが搭載されています。Google Chromeの場合、右クリックして「検証」を選択するか、F12キー（Macの場合はOption + Command + I）を押すと表示されます。

開発者ツールでできることの一部：

  • Elements（要素）タブ: WebページのHTML構造（DOMツリー）を確認できます。特定の要素を選択すると、それに適用されているCSSルールが右側に表示され、どのファイル（style.cssなど）の何行目に書かれているかまで分かります。ここでCSSの値を一時的に変更して、リアルタイムで表示の変化を確認することもできます。
  • Styles（スタイル）タブ: Elementsタブで選択した要素に適用されているCSSルールを詳細に表示します。どのスタイルが優先されているか（詳細度やカスケードの仕組みによる）、どのスタイルが打ち消されているかなども確認できます。
  • Console（コンソール）タブ: JavaScriptのエラーや警告、自分で出力したメッセージなどを確認できます。現段階ではあまり使いませんが、JavaScriptを学ぶようになったら必須のツールです。
  • Sources（ソース）タブ: 読み込まれているHTML、CSS、JavaScriptなどのファイルの内容を確認できます。
  • Network（ネットワーク）タブ: ページを読み込む際に、どのファイルがどれくらいの時間がかかって読み込まれているかなどを確認できます。パフォーマンスの改善に役立ちます。

初心者のうちは、特にElementsタブとStylesタブを積極的に活用しましょう。「なぜこの要素にスタイルが効かないんだろう？」「この余白はどこから来ているんだろう？」といった疑問が出てきたら、その要素を開発者ツールで調べてみることが、原因特定とHTML/CSSの理解に繋がります。

よくある初心者のミス:

  • スペルミス: HTMLタグの名前、属性名、CSSプロパティ名、値などのスペルミス。
  • 閉じタグ忘れ: <div>に対応する</div>など、開始タグに対応する終了タグを忘れる。
  • ファイルパスの間違い: <link href="">や<img src="">のファイルパスが間違っている。HTMLファイルとCSSファイル、画像ファイルが同じフォルダにない場合、相対パス（例: ../images/photo.jpg）や絶対パスを指定する必要があります。最初はすべて同じフォルダに置くのが楽です。
  • CSSセレクタの間違い: スタイルを適用したい要素を正しく指定できていない。
  • CSSの記述ミス: プロパティと値の間のコロン（:）や、各ルールの終わりのセミコロン（;）を忘れる。

これらのミスは、テキストエディタのシンタックスハイライトや、ブラウザの開発者ツールを使うことで発見しやすくなります。エラーメッセージが表示されたり、期待通りの表示にならなかったりしたら、落ち着いてコードを見直し、開発者ツールで原因を探ってみましょう。

ステップ6：ファイルの保存と公開（簡単な説明）

作成したHTMLファイルとCSSファイルは、PCのローカルフォルダに保存されています。これを他の人がインターネット経由で見られるようにするには、Webサーバーと呼ばれる場所にファイルを置く必要があります。

Webサイトを公開する方法はいくつかありますが、初心者の方が自分で作成した静的なHTML/CSSファイルを公開する簡単な方法としては、以下のようなものがあります。

  • GitHub Pages: GitHubという開発プラットフォームの機能の一つ。無料で静的なWebサイトを公開できます。Gitというバージョン管理システムの知識が必要になりますが、学習する価値は高いです。
  • Netlify, Vercelなど: 静的サイトのホスティングに特化したサービス。GitHubなどと連携して簡単にデプロイ（公開）できます。
  • レンタルサーバー: 有料のサービス。契約してFTP（ファイル転送プロトコル）などでファイルをアップロードする方法が一般的です。独自ドメインを取得して本格的なサイト運営ができます。

最初は、特に公開する必要がなければ、ローカル環境（自分のPCの中）で開発・確認するだけで十分です。Web制作の学習が進み、「作ったものを人に見せたい」と思ったときに、GitHub Pagesのような手軽な方法から試してみるのが良いでしょう。

【補足】バージョン管理（Git）について

開発中にコードの変更履歴を管理するために、Gitというシステムが広く使われています。これにより、以前の状態に戻したり、複数の変更を安全に管理したり、他の人と共同で開発したりすることが容易になります。

「直書き」の段階では必須ではありませんが、今後のWeb制作学習を進める上でGitは非常に重要なツールになります。興味があれば、GitHubの使い方と合わせて学習してみることをお勧めします。

第4部：「直書き」からステップアップするには？

HTMLとCSSの「直書き」で基本的なWebサイトの作成ができるようになったら、次にどのような技術を学ぶべきでしょうか？ Web制作の学習パスは多岐にわたりますが、「直書き」で培った基礎知識を活かせるステップアップ先をいくつかご紹介します。

  1. レスポンシブデザイン:
    • PC、タブレット、スマートフォンなど、様々な画面サイズでWebサイトが見られるようになりました。どのデバイスで見ても適切に表示されるように、CSSの@mediaクエリなどを使ってデザインを調整する技術です。FlexboxやCSS Gridといったレイアウト技術の理解も深まります。
    • 「直書き」でCSSを自分でコントロールできるからこそ、メディアクエリを使ったスタイル調整の仕組みを理解しやすいです。
  2. CSS設計手法:
    • Webサイトの規模が大きくなると、CSSのコード量が増え、管理が難しくなります。BEM（Block, Element, Modifier）などの命名規則や、OOCSS、SMACSSといった設計手法を学ぶことで、保守しやすく再利用しやすいCSSを書くことができます。
    • 「直書き」でクラス名などを自分で考える経験が、これらの設計手法の必要性や効果を理解する助けになります。
  3. CSSプリプロセッサ（Sass, Lessなど）:
    • CSSに変数、関数、ネスト（入れ子構造）、分割（import）などのプログラミング的な機能を追加し、CSS記述を効率化するツールです。記述したコードは最終的に標準CSSに変換して使用します。
    • 「直書き」で標準CSSの書き方を知っているからこそ、プリプロセッサが提供する機能の便利さが理解できます。
  4. JavaScript:
    • Webページに動きやインタラクティブな要素（ボタンをクリックしたら何か起きる、フォームの入力チェック、アニメーションなど）を追加するためのプログラミング言語です。HTMLとCSSだけでは静的なページしか作れませんが、JavaScriptを使うことで動的なWebアプリケーションも構築できるようになります。
    • JavaScriptはHTML要素を操作したり、CSSスタイルを変更したりすることが多いため、HTML/CSSのDOM構造への理解が前提となります。
  5. フロントエンドフレームワーク/ライブラリ（React, Vue.js, Angularなど）:
    • 大規模なWebアプリケーション開発を効率化するためのツールです。コンポーネント指向（部品化）やデータ管理の仕組みを提供します。SPA（Single Page Application）のような複雑なアプリケーション構築に適しています。
    • これらのフレームワークも、最終的にブラウザが解釈できるHTML、CSS、JavaScriptを生成します。「直書き」で基本を理解していると、フレームワークが裏側で何をしているのか、どの部分がHTML/CSSに該当するのかを把握しやすくなります。
  6. 静的サイトジェネレータ（Hugo, Jekyll, Next.jsなど）:
    • テンプレートやマークダウンファイルなどから、静的なHTML/CSSファイルを生成するツールです。ブログやドキュメントサイトなどの構築に便利です。CMSのような管理画面はありませんが、フレームワークのような開発効率を得られます。
    • 生成されるのは静的なHTML/CSSファイルなので、出力されるコードを理解する上で「直書き」の知識が役立ちます。
  7. バックエンド技術:
    • ユーザーからのリクエストを受け付けたり、データベースを操作したり、動的なコンテンツを生成したりといった、サーバー側の処理を行う技術です（PHP, Python, Ruby, Node.jsなど）。フロントエンドとバックエンドを組み合わせて、掲示板やSNSのようなWebアプリケーションを開発します。
    • HTML/CSSはあくまでユーザーに見える部分（フロントエンド）の技術ですが、Webアプリケーション全体を理解するためには、バックエンドの知識も重要になります。

これらのステップアップ先の技術は、どれも「直書き」で得たHTMLとCSSの知識が基盤となります。まずは「直書き」でWebサイトが表示される仕組みを体感し、HTMLとCSSの基礎をしっかりと固めることが、その後の学習をスムーズに進めるための最善の道と言えるでしょう。

まとめ：Web制作の冒険は「直書き」から始まる

この記事では、Web制作を始めたい初心者の方に向けて、HTMLとCSSを「直書き」することのメリットと具体的な手順を詳しく解説しました。

「直書き」は、Webサイトがどのように構成され、どのように表示されるのかという最も基本的な仕組みを、最も直接的な方法で学ぶことができる手法です。フレームワークやCMSのような便利なツールを使わないことで、コードそのものに集中し、Webの根幹にある技術への理解を深めることができます。

「直書き」の主なメリットを再確認しましょう。

  • Webサイトの基本構造を体感的に理解できる。
  • コードの仕組みがクリアで、デバッグしやすい。
  • 特定のツールの学習が不要で、学習コストが低い。
  • 特別な環境構築が不要で、すぐに始められる。
  • コードを完全にコントロールでき、パフォーマンスを意識しやすい。
  • 他のあらゆるWeb技術を学ぶ上での強力な基礎となる。
  • オリジナリティの高い表現が可能になる。

そして、実際に「直書き」でWebサイトを作成する手順は以下の通りです。

  1. どんなサイトを作るか、簡単な計画を立てる。
  2. テキストエディタとブラウザを用意する。
  3. Webサイトの構造と内容を定義するHTMLファイルを作成する。
  4. 見た目やレイアウトを装飾するCSSファイルを作成し、HTMLに適用する。
  5. ブラウザで表示を確認し、開発者ツールなどを使いながら修正（デバッグ）を繰り返す。
  6. 必要であれば、GitHub Pagesなどで公開してみる。

もちろん、「直書き」は常に最良の手法とは限りません。規模の大きなサイトや、頻繁にコンテンツを更新するサイト、複雑な機能を持つアプリケーションを開発する際には、CMSやフレームワーク、その他のツールを利用した方が効率的で、開発・運用が容易になる場合が多いです。

しかし、どのような開発手法を選ぶにしても、HTMLとCSSはWeb制作の共通言語であり、その基礎知識は必須です。「直書き」でこの基礎をしっかりと身につける経験は、あなたのWeb制作スキルを確固たるものにし、その後の学習やキャリアにおいて必ず活きてくるはずです。

まずはこの記事で紹介した手順を参考に、簡単なHTMLファイルとCSSファイルを作成し、ブラウザで開いてみてください。あなたが書いたコードが、実際にWebページとして表示される感動をぜひ味わってみてください。

これが、あなたのWeb制作の楽しい冒険の始まりです。一歩ずつ着実に、学びを進めていきましょう。応援しています！

免責事項・注意点

  • この記事はHTMLとCSSの基本的な「直書き」の概念と手順を初心者向けに解説したものです。実際の商用サイトや大規模なWebアプリケーション開発では、開発効率やメンテナンス性を考慮し、様々なツールやフレームワーク、より高度な技術（JavaScript、バックエンド言語、データベースなど）が併用されるのが一般的です。
  • Web技術は常に進化しています。ここで紹介した内容やコード例は基本的なものですが、最新の情報やより良いプラクティスについては、MDN Web Docs（Mozilla Developer Network）のような信頼できるリソースを参照しながら学習を進めることをお勧めします。
  • コード例は説明のために簡略化している部分があります。実際の開発では、エラーハンドリングやパフォーマンス最適化など、考慮すべき点が多岐にわたります。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール