CSS

CSSとは？HTMLをおしゃれにカスタマイズしよう

CSSを使うと、HTMLで作ったページの見た目を自由にカスタマイズできます。

文字の色を変えたり、レイアウトを整えたり、デザインの幅が広がります。

このレッスンでは、基本的なCSSの書き方を学び、簡単なスタイルを設定してみましょう！

CSSって何？

HTMLは「建物の骨組み」、CSSは「内装や外観のデザイン」と考えるとわかりやすいです。

例えば、HTMLだけのページは文字が黒く、背景は白く、デザインのないページになります。CSSを使うことで、

  • 文字の色を変更する（例：黒→青）
  • 背景色を変える（例：白→水色）
  • 文字の大きさや余白を調整する

といったことができます。

それでは、CSSの書き方を見ていきましょう！

CSSの3つの書き方（インラインCSS・内部CSS・外部CSS）

インラインCSS

HTMLタグの中に直接スタイルを書く方法です。

<h1 style="color: blue; font-size: 24px;">インラインCSSの例</h1>
<p style="background-color: yellow;">この段落の背景は黄色です。</p>

特徴

  • 1つの要素だけにCSSを適用したいときに使える
  • ただし、たくさんの要素に適用するとコードが読みにくくなる

2. 内部CSS

HTMLファイルの<head>内に<style>タグを使って書く方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部CSSの例</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: red;
            font-size: 24px;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>内部CSSの例</h1>
    <p>このページの背景色は水色です。</p>
</body>
</html>

特徴

  • 1つのHTMLファイル内でスタイルをまとめて書ける
  • 他のHTMLファイルには適用できない

3. 外部CSS

CSSを別のファイルに書き、HTMLファイルに適用する方法です。

HTMLファイル（index.html）:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部CSSの例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>外部CSSの例</h1>
    <p>外部CSSを使うと、複数のページでデザインを統一できます。</p>
</body>
</html>

CSSファイル（style.css）:

body {
    background-color: lightgray;
}
h1 {
    color: blue;
    font-size: 24px;
}
p {
    font-size: 18px;
}

特徴

  • 複数のHTMLファイルに適用できるため、管理しやすい
  • サイト全体のデザインを統一できる
  • スタイルを変更すると、すべてのページに一括反映される

HTML・CSSファイルを実際に作成・保存し、画面で見てみよう！

実際に HTMLファイルとCSSファイルを作成し、見た目がどのように変わるのかを体験してみましょう！

HTMLファイルを作成してみよう

まずは、HTMLファイルだけを作成し、どのように表示されるのかを確認します。

ファイルの準備

  1. デスクトップや任意の場所に「css_practice」というフォルダを作成する
  2. そのフォルダの中に「index.html」という名前のファイルを作成する

次に、以下のコードをコピーして、「index.html」に貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSなしのページ</title>
</head>
<body>
    <h1>CSSなしのページ</h1>
    <p>このページにはまだCSSが適用されていません。</p>
</body>
</html>

ファイルを保存し、開いてみよう

保存した「index.html」をフォルダ内でダブルクリックして開いてみてください。

ブラウザに黒い文字の見出しと段落が表示されるだけのシンプルなページが開くはずです。

CSSファイルを作成してみよう

次に、CSSを適用してデザインを変更してみましょう。

ファイルの準備

次に、以下のCSSコードをコピーし、「style.css」に貼り付けてください。

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

h1 {
    color: darkblue;
    text-align: center;
    font-size: 28px;
}

p {
    font-size: 18px;
    color: darkslategray;
}

HTMLにCSSを適用しよう

「index.html」に戻り、<head>タグ内に以下のコードを追加してください。

<link rel="stylesheet" href="style.css">

修正後の「index.html」は、次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS適用後のページ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSSが適用されたページ</h1>
    <p>背景色や文字のスタイルが変わりました！</p>
</body>
</html>

もう一度ブラウザで開いてみよう

  1. 「index.html」を保存する
  2. もう一度ダブルクリックして開く

すると、ページの背景が水色になり、見出しや文章の色・サイズが変わっているはずです！

変化を確認しよう！

最初の「CSSなしのページ」と比べると、デザインが大きく変わったことがわかります。

  • 背景が水色に変化
  • 見出しが青色になり、中央揃えに
  • 段落の文字が読みやすい色に変更

これが CSSを適用するだけで、見た目が一気に変わる力です！

実践のまとめ

  • HTMLファイル（index.html）とCSSファイル（style.css）を分けて管理すると、デザインの変更がしやすくなる
  • CSSを適用するには、HTMLの<head>タグ内に<link>タグでCSSを読み込む必要がある
  • CSSを変更すれば、HTMLの内容を変えずにデザインだけを変えることができる

実際に手を動かしてみることで、CSSの便利さが体験できたと思います！

まとめ

  • CSSはHTMLのデザインを設定するもの
  • CSSには「インラインCSS」「内部CSS」「外部CSS」の3つの書き方がある
  • 外部CSSは特に便利で、複数のページに適用できる

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。