プログラミング

CSS基本ガイド

最終更新： 22/03/2025
1 分の読み

CSS（Cascading Style Sheets）は、ウェブページのスタイル（外観）を指定するための言語で、HTMLと組み合わせて使用されます。CSSでは、ウェブページのテキスト、画像、レイアウト、色、フォント、余白、ボーダーなど、さまざまな要素をスタイリングすることができます。この記事では、CSSで使用される基本的な要素の形式や書き方について、詳しく説明します。

1. CSSセレクタ

CSSセレクタは、スタイルを適用するHTML要素を指定するために使います。セレクタには、いくつかの種類があります。

関連記事

a. タグセレクタ（要素セレクタ）

タグセレクタは、特定のHTMLタグにスタイルを適用します。例えば、すべてのpタグにスタイルを適用したい場合、次のように書きます。

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

b. クラスセレクタ

クラスセレクタは、HTML要素にclass属性を使用してスタイルを適用します。クラスセレクタはピリオド（.）を使って指定します。例えば、次のように記述します。

css
.button {
  background-color: red;
  color: white;
  padding: 10px;
}

HTML内では、次のようにクラスを適用します。

html
<button class="button">Click mebutton>

c. IDセレクタ

IDセレクタは、id属性を使って特定の要素にスタイルを適用します。IDセレクタはシャープ（#）を使って指定します。IDはページ内で一意であるべきです。

css
#header {
  background-color: grey;
  color: white;
}

HTML内では、次のようにIDを適用します。

html
<div id="header">This is the headerdiv>

2. プロパティと値

CSSでは、要素に対してスタイルを指定するために「プロパティ」と「値」を使います。プロパティはスタイルの属性を、値はその属性に適用する内容を示します。プロパティと値はコロン（:）で区切り、セミコロン（;）で終わります。

例えば、colorプロパティにblueを設定する場合は、次のように書きます。

css
h1 {
  color: blue;
}

3. ボックスモデル

CSSのボックスモデルは、HTML要素がどのようにレイアウトされるかを決定する重要な概念です。ボックスモデルには、以下の4つの部分があります。

  • コンテンツ（Content）: 実際のテキストや画像が表示される部分。

  • パディング（Padding）: コンテンツとボーダーの間のスペース。

  • ボーダー（Border）: パディングの外側にある線。

  • マージン（Margin）: ボーダーの外側にあるスペース。

css
.box {
  margin: 20px;
  padding: 10px;
  border: 2px solid black;
}

4. レイアウトのプロパティ

CSSでは、要素のレイアウトを制御するためにさまざまなプロパティを使用します。

a. displayプロパティ

displayプロパティは、要素の表示方法を制御します。例えば、block、inline、inline-blockなどの値があります。

css
div {
  display: block;
}

b. positionプロパティ

positionプロパティは、要素の配置方法を指定します。例えば、static、relative、absolute、fixedなどの値があります。

css
.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}

c. flexbox（フレックスボックス）

flexboxは、複雑なレイアウトを簡単に作成するためのCSSモジュールです。display: flexを使用すると、親要素内の子要素がフレックスアイテムとして扱われます。

css
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

d. grid（グリッド）

gridは、2次元のレイアウトを作成するための強力なツールです。display: gridを使うことで、行と列を使ったレイアウトが可能になります。

css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

5. フォントとテキストのプロパティ

CSSでは、テキストのスタイルやフォントを調整するためのさまざまなプロパティがあります。

a. font-familyプロパティ

font-familyプロパティは、要素のフォントを指定します。

css
body {
  font-family: 'Arial', sans-serif;
}

b. font-sizeプロパティ

font-sizeプロパティは、テキストのサイズを指定します。

css
p {
  font-size: 18px;
}

c. font-weightプロパティ

font-weightプロパティは、フォントの太さを指定します。

css
h2 {
  font-weight: bold;
}

d. line-heightプロパティ

line-heightプロパティは、行間の高さを指定します。

css
p {
  line-height: 1.5;
}

e. text-alignプロパティ

text-alignプロパティは、テキストの水平方向の配置を指定します。

css
h1 {
  text-align: center;
}

6. 色と背景

CSSでは、要素の背景色やテキスト色を指定するために、colorやbackground-colorなどのプロパティを使います。

a. colorプロパティ

colorプロパティは、テキストの色を指定します。

css
p {
  color: red;
}

b. background-colorプロパティ

background-colorプロパティは、要素の背景色を指定します。

css
div {
  background-color: yellow;
}

7. トランジションとアニメーション

CSSでは、要素の変化にアニメーションを加えることができます。

a. transitionプロパティ

transitionプロパティは、プロパティ値の変化にアニメーション効果を加えます。

css
button {
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: blue;
}

b. @keyframesとanimationプロパティ

@keyframesは、アニメーションの進行状態を定義するためのルールです。animationプロパティを使ってアニメーションを適用します。

css
@keyframes example {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

div {
  animation: example 2s infinite;
}

結論

CSSは、ウェブページの見た目を制御するために不可欠な技術です。この記事では、CSSの基本的なセレクタ、プロパティ、レイアウト手法、アニメーションなどについて説明しました。これらを使いこなすことで、より美しく、使いやすいウェブサイトを作成することができます。

最終更新： 22/03/2025
1 分の読み
Back to top button