CSSを使用したスタイリングの基礎

keigo_fujiwara

2025年1月16日 03:13

CSSとは？

CSS（Cascading Style Sheets）は、HTMLで構築されたWebページにデザインやスタイルを追加するための言語です。文字の色や背景色、レイアウト、フォントサイズなど、さまざまな要素を装飾できます。

この記事では、CSSの基本的な使い方とスタイリングの基礎を紹介します。

1. CSSの適用方法

CSSをHTMLに適用する方法は、以下の3つがあります。

1.1 インラインスタイル

HTMLタグに直接スタイルを記述します。

<p style="color: red; font-size: 20px;">このテキストは赤色です。</p>

1.2 内部スタイルシート

HTMLファイル内の<style>タグを使用してスタイルを記述します。

<style>
  body {
    background-color: lightblue;
  }
  h1 {
    color: navy;
  }
</style>

1.3 外部スタイルシート

スタイルを外部ファイルに記述し、HTMLファイルからリンクします。

style.css

body {
  background-color: lightblue;
}
h1 {
  color: navy;
}

HTMLファイル

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Smaple</title>
</head>
<body>
    <h1>サンプルページ</h1>
</body>
</html>

<link rel="stylesheet" href="style.css">の使用例

2. CSSの基本プロパティ

2.1 色と背景

文字の色を変更： color
背景色を設定： background-color

h1 {
  color: red;
  background-color: yellow;
}

2.2 フォントとテキスト

フォントサイズを変更： font-size
テキストを中央揃え： text-align

p {
  font-size: 16px;
  text-align: center;
}

2.3 ボーダーと間隔

ボーダーを追加： border
内側の余白を設定： padding
外側の余白を設定： margin

div {
  border: 2px solid black;
  padding: 10px;
  margin: 20px;
}

3. 実践例：シンプルなWebページのスタイリング

以下は、CSSを使ってスタイリングされた簡単なWebページの例です。

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>ようこそ！</h1>
  </header>
  <main>
    <p>CSSを使用してページを装飾しています。</p>
  </main>
  <footer>
    <p>&copy; 2025 Web学習プロジェクト</p>
  </footer>
</body>
</html>

CSSコード（style.css）

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
}

header {
  background: #333;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
}

footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  margin-top: 20px;
}

実行例：スタイリングされたページ

4. CSSを学ぶ次のステップ

CSSグリッドとフレックスボックス： レイアウトの管理方法を学ぶ。
レスポンシブデザイン： 画面サイズに応じたデザインを適用。
アニメーション： ページに動きを追加。

まとめ

CSSを使うことで、Webページを美しく、使いやすくデザインできます。この記事で紹介した基礎を元に、独自のデザインを試してみましょう。

次回は、CSSレイアウトの基礎（フレックスボックスとグリッド）を解説します。お楽しみに！

筆者について

藤原圭吾

BeEngineer梅田校の責任者
プログラミング教室の運営および授業の実施
情報Ⅰの教材作成および映像授業に出演
アプリ「Let's Code Py」を運営
集客用LINEの運営および広報映像の編集