2024.10.30

CSSとは？

nyaranyara275

CSSとはウェブサイトを美しくするスタイリングの基礎

この記事では、CSSの基本的な概念からスタイリングの基礎までを丁寧に解説し、簡単なコード例も紹介します。

1. CSSとは？

CSS（Cascading Style Sheets）は、ウェブページの見た目を整えるための言語です。HTMLで構築されたウェブページに色、レイアウト、フォントなどのスタイルを追加し、ユーザーにとって見やすく、魅力的なデザインに仕上げるために使われます。

例えば、HTMLが建物の骨組みなら、CSSはその建物の外観（色や形）を決める塗装や装飾にあたります。

2. HTMLとCSSの関係

HTMLはウェブページの構造を決定し、CSSはその構造にスタイルを適用するため、HTMLとCSSはセットで使用されます。HTMLでコンテンツの基本的な配置を行い、CSSでその要素のデザインや配置を変更するイメージです。

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="styles.css"> <!-- 外部スタイルシートを読み込む -->
</head>
<body>
  <h1>CSSでウェブページをスタイリング！</h1>
  <p>このテキストにCSSでスタイルを適用します。</p>
</body>
</html>

上記のHTMLは、CSSを使ってスタイルを変更する準備が整ったウェブページの構造です。

3. CSSの基本的な使い方

CSSは、3つの方法でHTMLに適用できます。

3.1 外部スタイルシート

外部スタイルシートは、HTMLファイルとは別のCSSファイルを作成し、それをHTML内で読み込む方法です。大規模なプロジェクトでよく使われ、再利用性が高いです。

htmlコードをコピーする<link rel="stylesheet" href="styles.css">

3.2 内部スタイルシート

内部スタイルシートは、HTMLファイル内の<head>タグ内に直接CSSを書きます。1つのページに対してのみスタイルを適用する場合に使用します。

htmlコードをコピーする<style>
  h1 {
    color: blue;
  }
</style>

3.3 インラインスタイル

インラインスタイルは、HTML要素内に直接CSSを記述します。特定の要素にだけスタイルを適用したい場合に便利ですが、管理が難しくなるためあまり多用しません。

htmlコードをコピーする<p style="color: red;">このテキストは赤色です。</p>

4. CSSセレクタとプロパティの使い方

CSSでは、セレクタを使ってHTML要素を選び、プロパティを指定してそのスタイルを変更します。プロパティにはcolorやfont-sizeなどがあり、それに対応する値を設定することでスタイルが適用されます。

cssコードをコピーする/* セレクタ { プロパティ: 値; } */
h1 {
  color: blue; /* 見出しのテキストを青色にする */
}

p {
  font-size: 16px; /* 段落のテキストサイズを16ピクセルにする */
}

セレクタの種類

タグセレクタ: h1, p などのHTMLタグにスタイルを適用。
クラスセレクタ: 複数の要素に同じスタイルを適用。HTMLで class="クラス名" を指定します。
IDセレクタ: 一意の要素にスタイルを適用。HTMLで id="ID名" を指定します。

cssコードをコピーする/* クラスセレクタ */
.text-center {
  text-align: center;
}

/* IDセレクタ */
#main-title {
  font-size: 24px;
}

5. 簡単なCSSコード例

ここでは、初心者が理解しやすい簡単なCSSコードを5つ紹介します。

例1: 背景色の変更

cssコードをコピーするbody {
  background-color: lightgray; /* ページ全体の背景色をライトグレーにする */
}

例2: テキストの色を変更

cssコードをコピーするh1 {
  color: navy; /* 見出しの文字色をネイビーにする */
}

例3: ボーダー（枠線）を追加

cssコードをコピーするp {
  border: 2px solid black; /* 段落の周りに黒い2ピクセルの枠線をつける */
}

例4: フォントサイズを変更

cssコードをコピーするp {
  font-size: 18px; /* 段落の文字サイズを18ピクセルにする */
}

例5: 要素の中央揃え

cssコードをコピーする.text-center {
  text-align: center; /* テキストを中央に配置する */
}

6. 次のステップ

CSSの基礎を理解したところで、次は実際に自分のウェブサイトやプロジェクトに応用してみましょう。以下のリソースはCSSをより深く学ぶのに役立ちます。

CSSは、学べば学ぶほど奥深くなり、細かなデザインやレイアウトの調整が可能になります。最初は基本をしっかり理解し、次第に複雑なレイアウトやアニメーションなどに挑戦していきましょう！

まとめ

今回の記事では、CSSの基本的な概念や使い方について紹介しました。最初の一歩として、HTMLにCSSを適用し、ウェブページのデザインを変更できるようになることが目標です。シンプルなプロジェクトを通じて実践し、CSSに慣れていくことをおすすめします。

ABOUT ME