はじめに
「Webサイトを作ってみようと思ったけど、どこから手をつければいいか分からない…」
そんな悩みをお持ちの方はいるでしょうか。
HTMLとCSSは、Webページを作るために欠かせない言語です。
HTMLが建物の骨組みを作るような役割を果たすのに対し、CSSは建物を彩る内装やデザインを担当します。
この2つを組み合わせることで、オリジナルなWebサイトを作ることができます。
今回は、Webサイト制作の基礎となるHTMLとCSSについて、分かりやすくまとめていきます。
HTMLとは？
HTML（HyperText Markup Language）は、Webページの構造を記述するための言語です。
見出し、段落、画像、リンクなど、Webページの構成要素をタグと呼ばれる記号で囲むことで、ブラウザにどのように表示するかを指示します。
HTMLの主な役割
Webページの骨組みを作る
見出し、段落、リストなど、Webページの構造を定義します。
コンテンツを表示する
テキスト、画像、動画などのコンテンツを配置します。
他の要素との関係を定義する
見出しと本文、画像とキャプションなどの関係性を指定します。
HTMLの書き方
HTMLのコードは、<html>タグで始まり、</html>タグで終わります。
その間に、<head>タグと<body>タグがあります。
<head>タグには、ページのタイトルや外部ファイルの読み込みに関する情報が記述され、<body>タグには実際に表示されるコンテンツが記述されます。
以下がその例です。
<!DOCTYPE html>
<html>
<head>
<title>私の初めてのWebページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは私の最初の段落です。</p>
</body>
</html>CSSとは？
CSS（Cascading Style Sheets）は、HTMLで記述されたWebページの見た目（スタイル）を装飾するための言語です。
フォントの種類やサイズ、色、背景画像、レイアウトなど、Webページのデザインを細かく調整することができます。
CSSの主な役割
HTML要素のスタイルを定義する
フォント、色、サイズ、配置などを指定します。
レイアウトを設計する
要素の配置や大きさ、マージン、パディングなどを設定します。
複数のページでスタイルを共有する
一つのCSSファイルで複数のHTMLページのスタイルを制御できます。
CSSの書き方
CSSのコードは、HTMLの<head>タグ内に<style>タグで記述するか、外部のCSSファイルに記述します。
CSSの記述方法は、セレクタとプロパティ、値の3つの要素から構成されます。
以下がその例です。
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
text-align: center;
}HTMLとCSSの関係
HTMLとCSSは、Webページを作成するために密接に連携しています。
HTMLがWebページの構造を定義し、CSSがその構造に対してスタイルを与えることで、見栄えの良いWebページが完成します。
HTMLとCSSの連携例
↓HTML↓
<!DOCTYPE html>
<html>
<head>
<title>私の初めてのWebページ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>こんにちは！</h1>
<p>これは私の最初の段落です。</p>
</div>
</body>
</html>↓CSS↓
/* styles.css */
.container {
width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
}上記の例では、HTMLの<div>要素にcontainerというクラス名を付け、CSSでcontainerクラスのスタイルを定義しています。
これにより、<div>要素の中身が中央に配置され、背景色や余白が設定されます。
まとめ
HTMLとCSSは、Webサイト制作の基礎となる言語です。
HTMLがWebページの構造を定義し、CSSがその構造に対してスタイルを与えることで、様々なデザインのWebページを作成することができます。
HTMLとCSSをマスターすることで、オリジナルのWebサイトを作ることができるようになります。
ぜひ、手を動かして実際にコードを書いてみましょう。
以上、HTMLとCSSについてのまとめでした。