Web制作に興味があるなら、HTMLとCSSは避けて通れない重要な技術です。
Webデザインの基礎であるWebページの構造を定義するHTMLと、見た目を装飾するCSSを理解することで、Webサイトを自由に構築できるようになります。
この記事では、HTMLとCSSの基本概念から、具体的な書き方、学習方法まで、初心者の方にもわかりやすく丁寧に解説します。
HTMLとCSSの基本的な役割
Webサイトは、大きく分けて「構造」「デザイン」「動き」の3つの要素で構成されています。
HTMLとCSSは、このうちの「構造」と「デザイン」を担っています。
HTMLは、Webページの骨格を定義する言語です。
見出し、段落、画像、リンクなど、Webページを構成する要素を記述します。HTMLは、Webページの情報を構造化し、検索エンジンやブラウザに正しく伝える役割も果たします。
CSSは、HTMLで記述されたWebページの見た目を装飾する言語です。
文字の色やフォント、背景色、レイアウトなど、Webページのデザインを細かく制御します。
CSSを使うことで、Webページのデザインを美しく整えられ、ユーザーが使いやすい快適なページの作成が可能になります。
HTMLの基礎
HTMLは、Webページの構造を定義するためのマークアップ言語です。
タグと呼ばれる<〇〇>〜</〇〇>の書き方で、間に表示させたいテキストを書いてWebページを構成します。
ここでは、HTMLの基本的な構造と主要なタグについて解説します。
HTMLの基本構造
HTMLファイルは、以下の基本構造を持ちます。
一見すると覚えるのが大変に思えるかもしれませんが、暗記の必要はありません。
VSCodeのEmmetの省略記法で「!」を入力すると、上図の必要な要素が全て表示されます。
それぞれのタグについては、以下に意味をまとめました。
| <!DOCTYPE html> | HTML5で記述されたドキュメントであることを宣言します |
| <html lang=”ja”> | 言語は日本語（ja＝日本語） |
| <head> | Webページのメタデータ（Webページに関する情報）を記述する部分 |
| <meta charset=”UTF-8″> | 文字エンコーディングの指定。UTF-8は、世界中のさまざまな言語の文字を扱うことができる、推奨されるエンコーディング |
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> | スマートフォンなどのモバイルデバイスでWebページを適切に表示するための設定 |
| <title>ページのタイトル</title> | Webブラウザのタブや検索結果に表示されるWebページのタイトル |
| <body> | Webページのコンテンツを記述する部分。ここにWebページに表示されるテキスト、画像、動画などが記述される |
これらのタグは、Webページの基本構造を作るうえで欠かせない要素です。
正しく理解し、適切に使うことで、閲覧環境に応じた適切な表示やSEO対策にも繋がります。
主要なHTMLタグ
HTMLには、数多くのタグがあり、それぞれ異なる役割を持っています。
ここでは、Webページの作成によく使われる主要なタグを紹介します。
| 意味 | 備考 | |
| <h1>〜<h6> | 見出しを定義する | <h1>が大見出し、<h6>が小見出し |
| <p> | 段落を定義する | 文章を<p>タグで囲むと段落として認識される |
| <a> | リンクを定義する | href属性にリンク先のURLを指定する |
| <img> | 画像を挿入する | src属性に画像ファイルのパスを指定する。alt属性には、画像が表示されない場合に表示される代替テキストを指定する。 |
| <ul> | 順序なしリストを定義する | リスト項目は<li>タグで記述する |
| <ol> | 順序付きリストを定義する | リスト項目は<li>タグで記述する |
| <li> | リスト項目を定義する | <ul>または<ol>タグの中で使用する |
| <div> | コンテンツをグループ化するための汎用的なタグ | レイアウト構成時に頻繁に使用する |
| <span> | インライン要素をグループ化する | テキストの一部にスタイルを適用する際によく使用される |
これらのタグを使いこなすことで、目的やデザインに合わせた多種多様なWebページを制作できるようになります。
CSSの基礎
CSSは、HTMLで記述されたWebページの見た目を装飾するための言語です。
CSSを使うことで、文字の色やフォント、背景色、レイアウトなど、Webページの装飾ができます。
ここでは、以下の3つについて説明します。
- CSSの基本構文
- CSSのファイルを読み込む
- よく使うCSSプロパティ
気になるところからチェックしてみてください。
CSSの基本構文
CSSは、セレクタ、プロパティ、値の3つの要素で構成されています。
| セレクタ | スタイルを適用するHTML要素を指定する。たとえば、pをセレクタにすると、全ての<p>タグに対してスタイルが適用される。 |
| プロパティ | スタイルを適用する対象の属性を指定する。たとえば、colorを指定すると、テキストの色の変更ができる。 |
| 値 | プロパティに設定する値を指定する。たとえば、color: red; と書くと、テキストの色が赤 になる。 |
上図の例では、文字の太さを太く指定しています。
このように、CSSは「どの要素に」「どんなスタイルを」「どの値で適用するのか」を明確に記述する仕組みです。
CSSファイルを読み込む
CSSを使うには、HTMLからCSSファイルを読み込む必要があります。
作成したCSSファイルを下図で示した位置、head内に追記します。
CSSファイルにスタイルシートstyle.cssを作成した場合は、以下のように記述します。
<link rel=”stylesheet” href=”./css/style.css”>
HTMLファイルに追記したら、読み込み完了です。
CSSのよく使用するプロパティ
CSSには、数多くのプロパティがあり、それぞれ異なる役割を持っています。
ここでは、Webページのデザインによく使われる主要なプロパティを紹介します。
| 意味 | 備考 | |
| color | 文字の色を指定する | 色の指定方法は、red、blueなどの名称と#ff0000のような16進数表記、rgb(255, 0, 0)のようなRGB表記などがある |
| font-size | 文字サイズを指定する | font-size: 16px;は文字のサイズを16ピクセルに設定する。px以外にも、emやremなどが使用される。 |
| font-family | 文字のフォントを指定する | font-family: “Arial”, sans-serif;`は、Arialフォントを使用し、Arialフォントがない場合はsans-serifフォントを使用するように指定する |
| background-color | 背景色を指定する | – |
| margin | 要素の外側の余白を指定する | margin-top、margin-bottom、margin-left、margin-rightはそれぞれ上下左右を指定できる |
| padding | 要素の内側の余白を指定する | padding-top、padding-bottom、padding-left、padding-rightはそれぞれ上下左右を指定できる |
| border | 要素の境界線を指定する | – |
| width | 要素の幅を指定する | – |
| height | 要素の高さを指定する | – |
| text-align | テキストの配置を指定する | text-align: center;はテキスト中央寄せ、left（左寄せ）、right（右寄せ）、justify（均等割付）に指定できる |
| display | 要素の表示形式を指定する | block（ブロック要素）、inline（インライン要素）、inline-block（インラインブロック要素）、none（非表示）などの値を指定できる |
これらのプロパティを組み合わせることで、Webページのデザインを自由にカスタマイズすることができます。
HTMLとCSSを効率的に学習する方法
HTMLとCSSの学習は、ロードマップに沿って進めるのが効率的です。
ロードマップを活用することで「いつ」「何を」学べば良いのかが明確になり、無駄なく着実にスキルアップできます。
さらに、進捗が可視化されるため、小さな達成感を積み重ねながら学習を続けられるでしょう。
しかし、世の中にはさまざまなロードマップが存在するため、どれを選択するかによって学習効率は大きく変わります。
そこでここでは、デイトラ代表のショーヘーさんやベテランコーダーのはにわまんさんの意見を取り入れた「最強のWeb制作ロードマップ」を紹介します。
学習の道筋をしっかりと定めることで、よりスムーズに実力を伸ばしていけるため、ぜひチェックしてみてください。
HTMLとCSSコーディングを爆上げするツール
HTMLとCSSのコーディングは、ツールを使いこなしているかどうかで、コーディングスピードが変わります。
これからWeb制作を学ぶなら、使っておきたいツールを4つ紹介します。
- VSCode
- Emmet
- Figma for VSCode
- Github Copilot
VSCode（Visual Studio Code）は、Microsoftが提供する無料のコードエディタで、「軽量・シンプル・拡張性の高さ」が特徴です。
豊富な拡張機能を活用することで、コーディング効率を大幅に向上できます。
HTMLやCSSを短縮で入力できる補完機能があるEmmetは、タグの自動生成や省略記法ができるため、初心者でも記述ミスを減らしながら素早いコーディングができます。
Figma for VSCodeは、VSCode上でFigmaのデザインカンプを直接確認できるツールです。
画面の行き来を減らして作業効率がアップするだけでなく、文字サイズやフォントなどの値を自動コピーできるため、デザインカンプをもとにしたコーディングがスムーズになります。
GitHub Copilotは、コードの提案や補完をリアルタイムで行うAIツールです。予測入力やエラー修正のサポートを受けられ、スピード感があるコーディングができます。
これらのツールを使いこなすことで、HTMLとCSSのコーディングを効率化し、より洗練されたWebサイト制作が可能になります。
まだ使ったことがないツールがあるなら、ぜひチェックしてみてください。
まとめ：HTMLとCSSでWebデザインの可能性を広げよう
HTMLとCSSを習得することで、Webデザイナー、フロントエンドエンジニア、Webディレクターなど、多種多様なキャリアパスが開けます。
Web制作だけでなく、Webアプリケーションの開発や、モバイルアプリの開発にも役立つため、IT業界で活躍するための強力な武器となります。
最初は難しく感じるかもしれませんが、焦らずに少しずつ学習を進めていきましょう。
独学が不安な方は、メンターに気軽に相談できる環境があるデイトラWeb制作コースの受講がおすすめです。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！