HTML と CSS の基礎：初心者のためのウェブデザイン入門

WEB 開発始めたての時にまとめた HTML と CSS に関するメモが出てきたので、せっかくなので記事にします。

CSS フレームワークは利用せず、Pure なものが対象となります。

はじめに

ウェブサイトは主に 2 つの要素で構成されています：

HTML（HyperText Markup Language）：ウェブページの構造と内容を定義

CSS（Cascading Style Sheets）：ウェブページの見た目やレイアウトを制御

この 2 つを理解することで、基本的なウェブページを作成できるようになります。

HTML の基本構造

HTML は、ウェブページの骨組みを作るものです。基本的な構造は以下のようになります：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
</head>
<body>
    <!-- ここにページの内容を書きます -->
</body>
</html>

主要な HTML タグ

HTML では、様々なタグを使ってコンテンツを構造化します。以下は重要なタグの一部です：

<h1> 〜 <h6>: 見出しタグ（h1 が最も大きく、h6 が最も小さい）
<p>: 段落を表すタグ
<a href="URL">: リンクを作成するタグ
<img src="画像URL" alt="代替テキスト">: 画像を挿入するタグ
<div>: コンテンツをグループ化するための汎用ブロックレベルタグ
<span>: インライン要素をグループ化するタグ
<ul> と <li>: 順序なしリスト
<ol> と <li>: 順序付きリスト

CSS の基本と適用方法

CSS は、HTML に適用するスタイルを定義します。CSS を適用する主な方法は3つあります：

インラインスタイル：HTML 要素に直接スタイルを適用

<p style="color: blue; font-size: 16px;">この文は青色で16pxのサイズです。</p>

2. 内部スタイルシート：HTML 文書の <head> 部分にスタイルを記述

   <head>
     <style>
       p {
         color: blue;
         font-size: 16px;
       }
     </style>
   </head>

3. 外部スタイルシート：別の CSS ファイルにスタイルを記述し、HTML からリンク

HTML

   <head>
     <link rel="stylesheet" href="styles.css" />
   </head>

   p {
     color: blue;
     font-size: 16px;
   }

5. 便利な CSS セレクタ

CSS には様々なセレクタがあり、特定の要素にスタイルを適用できます：

要素セレクタ：p、div など
クラスセレクタ：.classname
ID セレクタ：#idname
子孫セレクタ：div p
直接の子セレクタ：div > p
疑似クラス：:hover、:first-child など
属性セレクタ：[attribute="value"]

例：

/* クラスセレクタの例 */
.highlight {
  background-color: yellow;
}

/* ID セレクタの例 */
#header {
  font-size: 24px;
}

/* 疑似クラスの例 */
a:hover {
  color: red;
}

6. 実践的なテクニック

ボタンの作成

HTML でボタンを作成し、CSS でスタイリングすることで見栄えのいいボタンを作れます：

以下コードでできるもの

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />   
 <title>ページのタイトル</title>
  </head>
  <body>
    <a href="#" class="button">クリックしてね</a>
  </body>
</html>

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #45a049;
}

ハンバーガーメニュー

レスポンシブデザインでよく使われるハンバーガーメニューの基本構造：

以下コードでできるもの

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ハンバーガーメニュー例</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <button class="hamburger" aria-label="メニュー" onclick="toggleMenu()">
    <span></span>
    <span></span>
    <span></span>
  </button>

  <ul class="menu">
    <li>序論</li>
    <li>本論</li>
    <li>結論</li>
  </ul>

  <script>
    function toggleMenu() {
      document.querySelector('.hamburger').classList.toggle('active');
      document.querySelector('.menu').classList.toggle('active');
    }
  </script>
</body>

</html>

.hamburger {
  width: 30px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
  transition: all 0.3s ease;
}

.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}

/* メニューが開いたときのスタイル */
.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* メニュー項目のスタイル */
.menu {
  display: none;
  list-style-type: none;
  padding: 0;
  margin: 20px 0 0 0;
}

.menu.active {
  display: block;
}

.menu li {
  margin-bottom: 10px;
}

7. レスポンシブデザインの基礎

モバイルデバイスにも対応したデザインを作るために、メディアクエリを使用します：

/* デスクトップ向けのスタイル */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* タブレット向けのスタイル */
@media (max-width: 1024px) {
  .container {
    width: 90%;
  }
}

/* スマートフォン向けのスタイル */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }
}