【Webデザイン初心者必見！】HTML/CSSとレスポンシブデザインの学び方

こんにちは、SouDogです。

今回はこれからWebデザインを始めようとしている方、始めたばかりの方に向けてHTML/CSSとレスポンシブデザインに関してご紹介していきます。

1. HTML/CSSの基礎をしっかり理解しよう！
- 1.1 HTMLとは？
  - 基本的なHTMLの構造
- 1.2 CSSとは？
  - 基本的なCSSの使い方
2. レスポンシブデザインを理解しよう！
3. 最後に

1. HTML/CSSの基礎をしっかり理解しよう！
1. 1.1 HTMLとは？
  1. 基本的なHTMLの構造
2. 1.2 CSSとは？
  1. 基本的なCSSの使い方
2. レスポンシブデザインを理解しよう！
3. 最後に

1. HTML/CSSの基礎をしっかり理解しよう！

1.1 HTMLとは？

まず最初に、HTML（Hypertext Markup Language）とは、Webページの「構造」を決めるための言語です。言ってみれば、Webページの「骨組み」の部分です。HTMLは、ページにどんな情報を載せるか、そしてその情報がどのように構成されるかを決めます。

基本的なHTMLの構造

HTMLは、<html>, <head>, <body>などのタグで構成されています。それぞれのタグはページに特定の意味を持たせるために使います。

<!DOCTYPE html> <!-- HTML5文書を宣言 -->
<html lang="ja">
<head>
    <meta charset="UTF-8"> <!-- 文字コードをUTF-8に指定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- レスポンシブ対応 -->
    <title>My First Web Page</title> <!-- タイトルタグ -->
</head>
<body>
    <h1>ようこそ！私のWebページへ！</h1>
    <p>これはHTMLの基本を学ぶためのページです。</p>
    <ul>
        <li>HTMLの基本</li>
        <li>CSSとの連携</li>
        <li>レスポンシブデザイン</li>
    </ul>
</body>
</html>

<!DOCTYPE html>: HTML5を使っていることを宣言。
<html lang="ja">: ページ全体の言語を日本語に設定。
<meta charset="UTF-8">: ページの文字エンコードをUTF-8に設定。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: スマートフォンやタブレットでも見やすくするための設定（後述のレスポンシブ対応）。
<title>: ブラウザタブに表示されるページのタイトル。
<h1>: 見出しを表すタグ。
<p>: 段落を表すタグ。
<ul>: 順不同リスト（<li>でリスト項目を表現）。

これでページの基本的な構造が作れました。HTMLは、これらのタグを使って内容を整理し、情報を構造化します。

1.2 CSSとは？

次に、CSS（Cascading Style Sheets）は、HTMLで作成したページの「デザイン」を担当する言語です。CSSを使うことで、文字の色、サイズ、ページのレイアウト、余白、背景色などを設定できます。

基本的なCSSの使い方

CSSは、HTMLの要素に対してスタイルを指定します。以下は、先ほど作成したHTMLの見た目を変更するCSSコードの例です。

/* bodyタグのスタイル */
body {
    font-family: Arial, sans-serif;  /* フォントを指定 */
    background-color: #f4f4f4;      /* 背景色を薄いグレーに */
    color: #333;                     /* 文字色を濃いグレーに */
    padding: 20px;                   /* ページの周りに余白を追加 */
}

/* h1タグ（見出し）のスタイル */
h1 {
    color: #007BFF;  /* 見出しの文字色を青に */
    font-size: 2rem;  /* フォントサイズを大きく */
}

/* ulタグ（リスト）のスタイル */
ul {
    list-style-type: square;  /* リスト項目を四角の点で表示 */
    padding-left: 20px;       /* 左側に少し余白を追加 */
}

/* liタグ（リスト項目）のスタイル */
li {
    font-size: 1rem;          /* リスト項目のフォントサイズを指定 */
}

font-family: フォントを指定します。Arial（サンセリフ体）を使う設定です。
background-color: 背景色を指定します。
color: 文字色を設定します。
padding: 内側の余白を設定します。20pxだと上下左右に20ピクセルの余白が追加されます。
list-style-type: リストの項目のスタイル（丸、四角、数字など）を指定します。

これで、HTMLのコンテンツに色やフォントを適用したり、余白を調整したりできます。

2. レスポンシブデザインを理解しよう！

2.1 レスポンシブデザインとは？

レスポンシブデザインとは、Webページを訪問するデバイス（PC、スマートフォン、タブレットなど）の画面サイズに応じて、ページのレイアウトが自動的に調整されるようにするデザイン手法です。

2.2 メディアクエリの使い方

レスポンシブデザインを実現するためには、メディアクエリというCSSの機能を使います。メディアクエリは、特定の条件（画面の幅など）が満たされたときに、スタイルを適用する方法です。

/* 基本のスタイル */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #007BFF;
    font-size: 2rem;
}

/* 画面幅が600px以下（スマホサイズ）なら */
@media (max-width: 600px) {
    body {
        padding: 10px; /* モバイルでは余白を少なく */
    }

    h1 {
        font-size: 1.5rem; /* 見出しの文字サイズを小さく */
    }
}

/* 画面幅が1024px以下（タブレットサイズ）なら */
@media (max-width: 1024px) {
    h1 {
        font-size: 1.8rem; /* タブレットでは文字サイズを少し調整 */
    }
}

@media (max-width: 600px): 画面幅が600px以下のデバイス（スマートフォン）に対して、スタイルを適用します。
@media (max-width: 1024px): 画面幅が1024px以下（タブレットや小さなPC）に対してスタイルを適用します。

メディアクエリを使うことで、デバイスに最適なレイアウトを提供できます。例えば、スマートフォンでは余白を小さくしたり、フォントサイズを小さくして読みやすくしたりできます。