webサイトを作るHTML/CSS

松の木/駆け出しエンジニア

2024年9月25日 18:40

はじめに

「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についてのまとめでした。

記事がよければサポートお願いします！