Webデザインの基本を学ぶ際、最初に習得するべき重要なスキルがHTMLとCSSです。これらの言語は、Webページの構造とデザインを担うもので、正しく使うことで美しく整理されたページを作成できます。今回は、HTMLとCSSの基礎知識や実際の使い方について、初心者向けにわかりやすく解説します。
忍者CODEマガジンは、未経験からでもプロのエンジニアを目指せるプログラミングスクール「忍者CODE」が運営しているプログラミング情報サイトです。
- プログラミングの効果的な学習方法
- プログラミング用語の解説
- エンジニアのキャリアに関する情報
など、プログラミングを始めたばかりの初学者に役立つ記事を幅広く公開しています！
HTMLは「Web（ウェブ）ページの構造をつくる」言語
HTML（HyperText Markup Language）とは、Webページの構造を作成するための言語です。具体的には、見出し、段落、リンク、表などのパーツがどこに配置され、どのように表示されるかを指定します。HTMLを使用することで、ブラウザがページを正しく解釈し、視覚的に適切なレイアウトで表示することが可能です。
例えば、Webページの見出しや段落は、特定のHTMLタグによって定義され、ユーザーが簡単に情報を受け取ることができるようになります。HTMLは単なる文字情報の羅列を超えて、Webサイトの視覚的な部分にも大きく関与している重要な言語です。
HTMLのバージョンは「HTML Living Standard」が最新
HTMLにはいくつかのバージョンが存在しており、過去にはHTML4、XHTML、HTML5などが使用されてきました。現在ではHTML5の後継として「HTML Living Standard」というバージョンが採用されています。
「HTML Living Standard」は、常に更新され、Web技術の進化に合わせて柔軟に対応できるのが特徴です。過去のバージョンはすでに廃止されており、最新のWeb標準に準拠するためにはHTML Living Standardを使用することが推奨されます。
HTMLの基本の書き方
HTMLはタグで囲まれた要素の組み合わせによって構成されます。それぞれのタグは、ブラウザに対してその内容がどのように表示されるべきかを示します。
下記は、HTMLを構成する主要な5つのタグです。
| 要素 | 書き方 | 説明 |
| HTML宣言 | <!DOCTYPE html> | HTMLの冒頭に記載する |
| htmlタグ | <html>〇〇〇</html> | HTMLファイルのバージョンをブラウザに宣言する |
| Headタグ | <head>〇〇〇</head> | Webページのタイトルや説明文などを記述する（ブラウザには表示されない） |
| titleタグ | <title>〇〇〇</title> | ページのタイトルを設定する |
| bodyタグ | <body>〇〇〇</body> | Webページの中でブラウザに表示させる要素を記述する |
さらに、bodyタグの中では下記のようなタグを使用し、実際にブラウザに表示させる要素を設定していきます。タグは一部を除いて閉じタグ（/）が必要になる点に注意しましょう。
| 要素 | 書き方 | 説明 |
| 見出し | <h1>見出し</h1>
<h2>見出し</h2> |
見出しを表示する |
| 段落 | <p>段落</p> | 文章の段落を表示する |
| リスト | <ul>リスト</ul> | 文章を箇条書き形式で表示する |
| 表 | <table>表<table> | 文章を表形式で表示する |
| 強調 | <strong>強調</strong> | 文章を太字にして強調する |
| リンク | <a>リンク</a> | リンクを付与する |
| 画像 | <img src=”画像の場所”> （※閉じタグ不要） | 画像を表示する |
これらのタグを組み合わせることで、Webページの構造を作成可能です。
オススメ：HTMLの問題を無料で公開中!
CSSは「HTMLを装飾する」言語
CSSとは「Cascading Style Sheets」の略で、一般的には「スタイルシート」として知られています。CSSの主な役割は、Webページの見た目を装飾することです。例えば、文字の色やフォント、背景色、レイアウト、余白の設定などを行うことで、HTMLで定義された内容を美しく見やすい形に整えます。
HTMLがWebページの骨組みを作る「構造」を担う言語であるのに対し、CSSはその構造に「デザイン」を与えるための言語です。CSSを使うことで、同じHTMLコードでも異なる見た目にカスタマイズすることができ、Webページ全体の統一感を保つことができます。
しかし、CSSだけでWebページを構築することはできません。CSSはあくまでHTMLとセットで機能する言語です。HTMLがコンテンツの配置や構造を提供し、CSSがそのコンテンツを装飾するという役割分担が行われています。これにより、デザインとコンテンツが分離され、管理や変更が容易になります。
CSSのバージョンは「CSS3」が最新
現在、CSSのバージョンとして一般的に使用されているのは「CSS3」です。しかし、CSS3は完全に新しいものというわけではなく、CSS2.1をベースに新たな機能が追加されたバージョンです。例えば、アニメーションやグラデーション、レスポンシブデザイン（デバイスの画面サイズに応じた情報を表示する仕組み）に対応するための機能がCSS3で導入されました。
CSS3は複数のモジュール（特定の機能を有したひとまとまりの要素）に分割されており、それぞれのモジュールが独立して開発・改良されています。そのため、必要な機能だけを適用することが可能です。これにより、Webデザインの柔軟性が向上し、よりクリエイティブなデザインが実現できるようになりました。
CSSの書き方
CSSの書き方を簡潔に解説します。
まず、一行目には文字がどのように表示されるかを決めるルールである「文字コード」を指定するために「@charset “UTF-8”;」を記述します。これにより、日本語や他の多言語を適切に表示させることが可能です。
次に、CSSでは「セレクタ」「プロパティ」「値」という3つの要素を使ってスタイルを指定します。
下記は実際の記述例です。
| @charset “UTF-8”;
p { color: #000; } |
ここでは、pが「セレクタ」であり、これはどの要素に対してスタイルを適用するかを指定します。colorが「プロパティ」であり、これは何を変えるのか、つまり何を操作するのかを指示します。そして、#000が「値」であり、プロパティに対してどのような変更を加えるのか（この場合は文字色を黒にすること）を決定します。
このように、CSSの基本的な書き方は「どこに」「何を」「どうするか」を明確に示す形で構成されています。
オススメ：CSSの問題を無料で公開中！
HTMLとCSSの違い
HTMLとCSSはどちらもWebページを作成するために用いられますが、役割が異なります。
HTMLは、Webページの骨組みや文書の構造を定義する言語です。例えば、見出しや段落、リンク、画像の配置など、ページ全体のレイアウトや情報の流れを決定します。
一方で、CSSは、Webページのデザインや見た目を装飾するための言語です。色、フォントサイズ、配置、背景などを指定することで、HTMLで構築されたページを視覚的に魅力的に仕上げます。
この2つを組み合わせることで、情報が整理された見やすく、美しいWebページを作成することができます。
HTMLとCSSを使ったWeb（ウェブ）制作の流れ
ここでは、HTMLとCSSを使ったWeb制作の基本的な流れを解説していきます。
1.ファイルとフォルダを作る
まずは、ファイルとフォルダを準備しましょう。プロジェクトのメインフォルダを作成し、その中にHTMLファイル（通常はindex.html）を置きます。
また、CSSを管理するための「css」フォルダを作成し、その中にstyle.cssファイルを保存します。
さらに、画像ファイルを管理するための「images」フォルダも作成して、使用する画像をそこにまとめておくと、管理がしやすくなります。この初期準備がしっかりできていることで、後の作業がスムーズに進みます。
2.レイアウトを簡単にメモ書きする
次に、ページの文書構造を確認することが大切です。どの要素がどこに配置されるのか、どのような大きな枠組みでページを構成するかをメモ書きとして作成しましょう。
この段階で、ページのレイアウトや重要な要素の位置を大まかに把握しておくことで、後のコーディング作業が効率的に進行します。
3.HTMLファイルを作成する
レイアウトが決まったら、次はHTMLファイルを作成します。まず、headタグとbodyタグという2つの重要な部分を理解しましょう。
headタグは、ページの設定や見えない情報を記載する場所です。ここには、ページのタイトルやページに関する説明情報（メタデータ）を書きます。この情報はブラウザにページの内容を伝える役割を果たしますが、画面には表示されません。
bodyタグは、実際に画面に表示される内容を記述する場所です。例えば、見出しや段落、画像、リンクなどの基本的なパーツを配置して、Webページの骨組みを作ります。
この2つを使い分けることで、Webページが正しく構成されます。
具体的には、headタグの中にページのタイトルやメタデータを記述しましょう。その後、bodyタグの中に実際に表示される内容を記述していきます。
4.CSSファイルを作成する
HTMLファイルができたら、次はCSSファイルを作成します。style.cssファイルには、フォントの種類やサイズ、色、余白、配置などのデザインに関する指示を記述します。HTMLがWebページの「骨格」だとすれば、CSSはその「装飾」といえます。このステップで、ページ全体の見た目を整えていきます。
5.レスポンシブ対応させる
現在のWebデザインでは、スマートフォンやタブレットなど異なるデバイスでの表示に対応する「レスポンシブデザイン」を導入することが重要です。メディアクエリ（画面環境に合わせたデザインを表示するCSSの機能）を使用して、画面サイズに応じてスタイルやレイアウトが自動的に調整されるようにします。
これにより、ユーザーがどのデバイスを使用していても、違和感のないWebページを表示させることが可能です。
6.適応されたかチェックする
最後に、PCやスマートフォンでWebページが正しく表示されているかを確認します。ブラウザの開発者ツールを使用して、ページが正しくレンダリング（データを人間が確認しやすい形に変換すること）されているか、デバイスごとにデザインが適応されているかをチェックしましょう。
すべてが適切に表示されていることを確認したら、Web制作は完了です。この確認作業を怠ると、思わぬ不具合が発生することがあるため、しっかりとチェックしましょう。
まとめ
HTMLとCSSは、Webページの構造とデザインを支える基本的な技術です。HTMLがページの骨組みを作り、CSSがその骨組みを装飾することで、美しく整理されたページが完成します。この2つの技術を理解し、正しい手順で進めることがWebデザインの第一歩です。
さらに深く学びたい方は、NINJACODEのWeb制作スクールをぜひご活用ください。経験豊富な現役クリエイターがメンターにつき、初心者にもわかりやすいカリキュラムで、実践的なスキルがしっかり身に付きます。HTMLとCSSだけでなく、JavaScriptについても体系的に学習可能です。気になる方は下記リンクから詳細をご確認ください。
- Webサイトを制作したい
- クリエイターとして活躍したい
- サポートが充実しているプログラミングスクールを知りたい
そんな思いを持った方は忍者CODEのWeb制作コースがおすすめです！
忍者CODEは未経験からでもプロのクリエイターを目指せるオンラインプログラミングスク―ルです。
期間制限なく動画を視聴できるので、自分のペースで学習することができます！
