コンテンツにスキップ

CSS/基本

出典: フリー教科書『ウィキブックス（Wikibooks）』
< CSS
はじめに CSS
基本 		レイアウト

セレクタ

[編集]

CSSセレクタは、スタイルを適用したいHTML要素を指定するための重要な機能です。適切なセレクタを使用することで、効率的かつ柔軟にスタイルを適用できます。この章では、様々なタイプのセレクタとその使用方法について説明します。

基本セレクタ

[編集]

要素セレクタ

[編集]

HTML要素を直接指定します。 

p { color: blue; }

クラスセレクタ

[編集]

クラス属性を持つ要素を選択します。 

.highlight { background-color: yellow; }

IDセレクタ

[編集]

特定のID属性を持つ要素を選択します。 

#header { font-size: 24px; }

全称セレクタ

[編集]

すべての要素を選択します。 

* { margin: 0; padding: 0; }

属性セレクタ

[編集]

属性の存在

[編集]

特定の属性を持つ要素を選択します。 

[title] { text-decoration: underline; }

属性の値

[編集]

特定の値を持つ属性を選択します。 

[type="text"] { border: 1px solid gray; }

疑似クラスと疑似要素

[編集]

リンク関連の疑似クラス

[編集]
a:hover { color: red; }
a:active { color: green; }
a:visited { color: purple; }

フォーム関連の疑似クラス

[編集]
input:checked { box-shadow: 0 0 0 3px blue; }
input:focus { outline: none; border-color: blue; }

疑似要素

[編集]
p::before { content: "→ "; }
p::after { content: " ←"; }

結合子

[編集]

子孫セレクタ

[編集]
article p { line-height: 1.6; }

直接子セレクタ

[編集]
ul > li { list-style-type: square; }

隣接兄弟セレクタ

[編集]
h1 + p { font-weight: bold; }

一般兄弟セレクタ

[編集]
h1 ~ p { margin-left: 20px; }

複合セレクタとセレクタの優先順位

[編集]

複数セレクタ

[編集]
h1, h2, h3 { font-family: Arial, sans-serif; }

セレクタの優先順位

[編集]

セレクタの優先順位は以下の順で高くなります：

  1. 要素セレクタ
  2. クラスセレクタ
  3. IDセレクタ
  4. インラインスタイル
  5. !important

セレクタの応用

[編集]

ユーザー定義セレクタ

[編集]
:root { --main-color: #3498db; }
button:not(.primary) { background-color: gray; }

複雑なセレクタの組み合わせ

[編集]
#main-content article.featured > h2 + p { font-style: italic; }

セレクタのベストプラクティスと注意点

[編集]

ベストプラクティス

[編集]
  • クラスを主に使用し、IDの使用は最小限に抑える
  • セレクタは可能な限り短く、具体的にする
  • 再利用可能なクラスを作成する

注意点

[編集]
  • オーバースペシフィックなセレクタを避ける
  • 過度に複雑なセレクタはパフォーマンスに影響を与える可能性がある

まとめ

[編集]

CSSセレクタは、効果的なスタイリングのための重要なツールです。基本的なセレクタから高度な組み合わせまで、様々な方法でHTML要素を選択できることを学びました。セレクタの適切な使用は、保守性の高い効率的なCSSコードの作成につながります。

宣言プロパティ

[編集]

宣言プロパティは、HTML要素に適用するスタイルを具体的に定義するために使用するものです。セレクタと宣言プロパティを組み合わせることで、要素の見た目や動作を様々な方法で変更することができます。

色

[編集]

CSSの色プロパティは、HTML要素のテキスト、背景、境界線、影などの色を指定するために使用されます。以下に、主要な色プロパティとその使い方について詳しく解説します。

color

[編集]

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

p {
  color: red; /* テキストの色を赤に設定 */
}

background-color

[編集]

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

div {
  background-color: #00ff00; /* 背景色を緑に設定 */
}

border-color

[編集]

border-colorプロパティは、要素の境界線の色を指定します。個々の辺（上、右、下、左）に対して異なる色を指定することもできます。 

div {
  border: 2px solid;
  border-color: black red green blue; /* 上、右、下、左の順に色を指定 */
}

opacity

[編集]

opacityプロパティは、要素の透明度を指定します。0（完全に透明）から1（完全に不透明）までの値を取ります。 

div {
  background-color: blue;
  opacity: 0.5; /* 半透明 */
}

rgba()

[編集]

rgba()関数を使用すると、赤、緑、青の各色と透明度（アルファチャンネル）を指定できます。 

div {
  background-color: rgba(255, 0, 0, 0.3); /* 透明度30%の赤 */
}

hsla()

[編集]

hsla()関数を使用すると、色相（hue）、彩度（saturation）、明度（lightness）、およびアルファチャンネル（透明度）を指定できます。 

div {
  background-color: hsla(120, 100%, 50%, 0.3); /* 透明度30%の緑 */
}

currentColor

[編集]

currentColorキーワードは、現在のcolorプロパティの値を指定するために使用されます。 

a {
  color: blue;
  border: 1px solid currentColor; /* テキスト色と同じ色の境界線 */
}

グラデーション

[編集]

CSSでは、linear-gradient()やradial-gradient()関数を使用して、背景にグラデーションを設定できます。 

div {
  background: linear-gradient(to right, red, yellow); /* 左から右への線形グラデーション */
}

div {
  background: radial-gradient(circle, red, yellow); /* 中心から外側への放射状グラデーション */
}

カスタムプロパティ（CSS変数）を使用した色の指定

[編集]

CSS変数を使用すると、再利用可能で管理しやすい色指定が可能になります。 

:root {
  --main-bg-color: coral;
  --main-text-color: white;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

色の指定方法

[編集]

CSSでは、色を以下の方法で指定できます。

名前付き色
red, blue, green
16進数
#ff0000, #00ff00, #0000ff
RGB
rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)
RGBA
rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5), rgba(0, 0, 255, 0.5)
HSL
hsl(0, 100%, 50%), hsl(120, 100%, 50%), hsl(240, 100%, 50%)
HSLA
hsla(0, 100%, 50%, 0.5), hsla(120, 100%, 50%, 0.5), hsla(240, 100%, 50%, 0.5)

例

[編集]

以下に、上記のプロパティを使用した具体的な例を示します。

CSS Color Properties Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Color Properties Example</title>
  <style>
    :root {
      --main-bg-color: coral;
      --main-text-color: white;
      --highlight-color: rgba(255, 255, 0, 0.5);
    }

    body {
      background-color: var(--main-bg-color);
      color: var(--main-text-color);
    }

    p {
      color: black;
      background-color: var(--highlight-color);
      border: 1px solid currentColor;
    }

    .gradient {
      background: linear-gradient(to right, red, yellow);
      padding: 20px;
      color: white;
    }
  </style>
</head>
<body>
  <p>This is a paragraph with a semi-transparent yellow background and a black border.</p>
  <div class="gradient">This div has a linear gradient background.</div>
</body>
</html>

この例では、CSSの色プロパティと様々な色指定方法を使用して、テキスト、背景、境界線、透明度、およびグラデーションを設定しています。CSS変数を使うことで、色の管理が簡単になり、コードの再利用性が向上しています。

フォント

[編集]

CSSのフォントプロパティは、ウェブページのテキストの表示スタイルを制御するために使用されます。これらのプロパティを使用して、フォントの種類、サイズ、スタイル、ウェイトなどを設定できます。ここでは、主要なフォントプロパティについて詳しく解説します。

font-family

[編集]

font-familyプロパティは、テキストに適用するフォントの種類を指定します。フォントファミリ名のリストをコンマで区切って指定し、ブラウザが利用可能な最初のフォントを使用します。 

p {
  font-family: "Arial", "Helvetica", sans-serif;
}

font-size

[編集]

font-sizeプロパティは、テキストのサイズを指定します。単位として、px、em、rem、%などが使用できます。 

h1 {
  font-size: 24px;
}

p {
  font-size: 1.2em;
}

font-style

[編集]

font-styleプロパティは、テキストのスタイルを指定します。通常のテキスト、斜体（イタリック）、または斜体にするかを設定できます。

  • normal: 通常のスタイル
  • italic: 斜体
  • oblique: 斜体（角度が通常の斜体よりも大きい）
em {
  font-style: italic;
}

font-weight

[編集]

font-weightプロパティは、テキストの太さを指定します。値として、キーワード（normal, bold）や数値（100から900までの範囲）を使用できます。 

strong {
  font-weight: bold;
}

h2 {
  font-weight: 600;
}

font-variant

[編集]

font-variantプロパティは、テキストの小文字を小型大文字（スモールキャップ）に変換するために使用されます。 

p {
  font-variant: small-caps;
}
例

Here are 12 famous apple varieties in English:

Granny Smith, Red Delicious, Golden Delicious, Fuji, Gala, Honeycrisp, McIntosh, Braeburn, Pink Lady, Jonagold, Empire and Cortland

line-height

[編集]

line-heightプロパティは、テキスト行の高さを指定します。このプロパティは、テキストの読みやすさを向上させるために使用されます。 

p {
  line-height: 1.5;
}

font

[編集]

fontプロパティは、font-style、font-variant、font-weight、font-size、line-height、およびfont-familyを一度に指定するためのショートハンドプロパティです。 

p {
  font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
}

letter-spacing

[編集]

letter-spacingプロパティは、テキストの各文字間の間隔を指定します。正の値で間隔を広げ、負の値で間隔を狭めます。 

h1 {
  letter-spacing: 2px;
}

word-spacing

[編集]

word-spacingプロパティは、テキストの各単語間の間隔を指定します。 

p {
  word-spacing: 4px;
}

フォントプロパティの使用例

[編集]

以下に、上記のフォントプロパティを組み合わせた具体的な使用例を示します。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Font Properties Example</title>
  <style>
    body {
      font-family: "Arial", "Helvetica", sans-serif;
      font-size: 16px;
      line-height: 1.6;
    }

    h1 {
      font-size: 2.5em;
      font-weight: bold;
      letter-spacing: 1px;
    }

    h2 {
      font-size: 2em;
      font-style: italic;
    }

    p {
      font-size: 1em;
      font-variant: small-caps;
      margin-bottom: 1.5em;
    }

    .highlight {
      font-weight: bold;
      color: red;
    }
  </style>
</head>
<body>
  <h1>CSS Font Properties</h1>
  <h2>Introduction</h2>
  <p>CSS provides various properties to control the <span class="highlight">appearance</span> of text on your web page.</p>
  <h2>Examples</h2>
  <p>Using different font properties can enhance the readability and aesthetics of your content.</p>
</body>
</html>

この例では、font-family、font-size、font-style、font-weight、line-height、letter-spacing、およびfont-variantを使用して、異なる見出しや段落のテキストスタイルを設定しています。また、特定のテキスト部分にクラスを適用して強調表示しています。

CSSのフォントプロパティを適切に使用することで、テキストの読みやすさやデザインの一貫性を向上させることができます。フォントの選択やスタイルの設定は、ウェブページのユーザーエクスペリエンスに大きな影響を与える重要な要素です。

マージン、パディングとボーダー

[編集]

マージンプロパティ、パディングプロパティととボーダープロパティは、要素の周囲に余白やボーダーを設定するために使用します。これにより、要素同士の間隔や要素の視覚的な区切りを明確にすることができます。以下の例のように記述します。 

body {
   margin: 20px;
   padding: 10px;
   border: 1px solid #ccc;
}

この例では、body要素に以下のスタイルを適用します。

  • 要素の周囲に20ピクセルの余白を設定します。
  • 要素の内容部分に10ピクセルの余白を設定します。
  • 要素の周囲に1ピクセルの太さの、#ccc色のボーダーを描きます。

余白プロパティとボーダープロパティには、様々なプロパティを指定することができます。それぞれについて詳しく見ていきましょう。

余白プロパティ

[編集]

余白プロパティは、要素の周囲に空白を作るために使用されます。主なプロパティは以下の通りです。

  • margin：要素の外側の余白を設定します。
  • margin-top：要素の上側の余白を設定します。
  • margin-right：要素の右側の余白を設定します。
  • margin-bottom：要素の下側の余白を設定します。
  • margin-left：要素の左側の余白を設定します。
div {
   margin: 10px; /* 上下左右すべてに10pxの余白を設定 */
}

p {
   margin-top: 20px; /* 上側の余白を20pxに設定 */
   margin-right: 15px; /* 右側の余白を15pxに設定 */
   margin-bottom: 20px; /* 下側の余白を20pxに設定 */
   margin-left: 15px; /* 左側の余白を15pxに設定 */
}

パディングプロパティ

[編集]

パディングプロパティは、要素の内容部分と境界線（ボーダー）との間の余白を設定します。主なプロパティは以下の通りです。

  • padding：要素の内側の余白を設定します。
  • padding-top：要素の上側の内側余白を設定します。
  • padding-right：要素の右側の内側余白を設定します。
  • padding-bottom：要素の下側の内側余白を設定します。
  • padding-left：要素の左側の内側余白を設定します。
div {
   padding: 10px; /* 上下左右すべてに10pxの内側余白を設定 */
}

p {
   padding-top: 20px; /* 上側の内側余白を20pxに設定 */
   padding-right: 15px; /* 右側の内側余白を15pxに設定 */
   padding-bottom: 20px; /* 下側の内側余白を20pxに設定 */
   padding-left: 15px; /* 左側の内側余白を15pxに設定 */
}

ボーダープロパティ

[編集]

ボーダープロパティは、要素の周囲に境界線を描画するために使用されます。主なプロパティは以下の通りです。

  • border：要素のボーダー全体を一括で設定します。
  • border-width：ボーダーの太さを設定します。
  • border-style：ボーダーのスタイル（例：solid, dashed, dotted）を設定します。
  • border-color：ボーダーの色を設定します。
  • border-top、border-right、border-bottom、border-left：各辺のボーダーを個別に設定します。
div {
   border: 2px solid #000; /* 全体に2pxの黒色の実線ボーダーを設定 */
}

p {
   border-top: 1px dashed #ccc; /* 上側に1pxの灰色の破線ボーダーを設定 */
   border-right: 3px solid #000; /* 右側に3pxの黒色の実線ボーダーを設定 */
   border-bottom: 1px dotted #999; /* 下側に1pxの薄灰色の点線ボーダーを設定 */
   border-left: 4px double #333; /* 左側に4pxの濃灰色の二重線ボーダーを設定 */
}

これらのプロパティを適切に使用することで、ウェブページの要素間の間隔を調整し、視覚的に魅力的なデザインを作成することができます。

余白プロパティとボーダープロパティは、要素の周囲に余白やボーダーを設定するために使用します。以下の例のように記述します。 

 body {
   margin: 20px;
   padding: 10px;
   border: 1px solid #ccc;
 }

この例では、body要素に以下のスタイルを適用します。

  • 要素の周囲に20ピクセルの余白を設定します。
  • 要素の内容部分に10ピクセルの余白を設定します。
  • 要素の周囲に1ピクセルの太さの、#ccc色のボーダーを描きます。

余白プロパティとボーダープロパティには、様々なプロパティを指定することができます。

背景

[編集]

背景プロパティは、要素の背景色、背景画像などを設定するために使用します。これにより、ウェブページの見た目を大幅にカスタマイズすることができます。以下の例のように記述します。 

body {
   background-color: #f0f0f0;
   background-image: url('image.jpg');
   background-repeat: repeat;
   background-position: center;
}

この例では、body要素に以下のスタイルを適用します。

  • 背景色を#f0f0f0に設定します。
  • 背景画像としてimage.jpgを使用します。
  • 背景画像を繰り返し表示します。
  • 背景画像を中央に配置します。

背景プロパティには、様々なプロパティを指定することができます。それぞれについて詳しく見ていきましょう。

background-color

[編集]

background-colorプロパティは、要素の背景色を指定します。色は名前、16進数、RGB、RGBA、HSL、HSLAなどで指定できます。 

div {
   background-color: lightblue; /* 名前付き色 */
}

p {
   background-color: #ff6347; /* 16進数 */
}

h1 {
   background-color: rgba(255, 0, 0, 0.5); /* RGBA */
}

background-image

[編集]

background-imageプロパティは、要素の背景画像を指定します。url()関数を使用して画像のパスを指定します。 

body {
   background-image: url('background.jpg');
}

background-repeat

[編集]

background-repeatプロパティは、背景画像の繰り返し方法を指定します。

  • repeat：背景画像を縦横に繰り返します。
  • repeat-x：背景画像を水平方向にのみ繰り返します。
  • repeat-y：背景画像を垂直方向にのみ繰り返します。
  • no-repeat：背景画像を繰り返しません。
div {
   background-image: url('tile.png');
   background-repeat: repeat-x; /* 水平方向にのみ繰り返す */
}

background-position

[編集]

background-positionプロパティは、背景画像の表示位置を指定します。値として、キーワード（例：top, right, center）、長さ（例：50px, 10%）、またはキーワードと長さの組み合わせを使用できます。 

div {
   background-image: url('logo.png');
   background-position: top right; /* 右上に配置 */
}

background-size

[編集]

background-sizeプロパティは、背景画像のサイズを指定します。値として、auto、cover、contain、または具体的な長さ（例：100px, 50%）を使用できます。

  • auto：画像の元のサイズを保持します。
  • cover：要素全体を覆うように画像を拡大または縮小します。
  • contain：画像が要素内に完全に収まるように拡大または縮小します。
div {
   background-image: url('background.jpg');
   background-size: cover; /* 要素全体を覆う */
}

background-attachment

[編集]

background-attachmentプロパティは、背景画像のスクロール動作を指定します。

  • scroll：背景画像が要素と共にスクロールします。
  • fixed：背景画像がビューポートに固定され、スクロールしません。
  • local：背景画像が要素の内容と共にスクロールします。
div {
   background-image: url('fixed-background.jpg');
   background-attachment: fixed; /* ビューポートに固定 */
}

background-clip

[編集]

background-clipプロパティは、背景が表示される範囲を指定します。

  • border-box：ボーダーの内側まで背景を表示します。
  • padding-box：パディングの内側まで背景を表示します。
  • content-box：コンテンツの内側まで背景を表示します。
div {
   background-color: yellow;
   background-clip: padding-box; /* パディングの内側まで背景を表示 */
}

background-origin

[編集]

background-originプロパティは、背景画像の位置の基点を指定します。

  • border-box：ボーダーの内側を基点にします。
  • padding-box：パディングの内側を基点にします。
  • content-box：コンテンツの内側を基点にします。
div {
   background-image: url('pattern.png');
   background-origin: content-box; /* コンテンツの内側を基点に */
}

背景プロパティの使用例

[編集]

以下に、上記の背景プロパティを組み合わせた具体的な使用例を示します。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Background Properties Example</title>
  <style>
    body {
      background-color: #f0f0f0;
      background-image: url('background.jpg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    .content {
      background-color: rgba(255, 255, 255, 0.8);
      padding: 20px;
      border: 1px solid #ccc;
      margin: 50px auto;
      width: 80%;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>Background Properties</h1>
    <p>CSS provides various properties to control the background of elements, allowing for customization of colors, images, and patterns.</p>
  </div>
</body>
</html>

この例では、body要素に背景画像を設定し、背景色や画像の配置、サイズを調整しています。また、半透明の背景色を持つコンテンツ領域を作成し、背景画像と調和させています。CSSの背景プロパティを使うことで、デザインの幅を広げ、視覚的に魅力的なウェブページを作成することができます。

サイズと配置

[編集]

CSSのサイズプロパティと配置プロパティは、要素のサイズと配置を制御するために使用されます。これには、幅や高さの設定、要素の位置合わせ、テキストの配置などが含まれます。以下に主なプロパティを紹介します。

width と height

[編集]

widthプロパティとheightプロパティは、要素の幅と高さを設定します。ピクセル、パーセント、vw（ビューポート幅の割合）などの単位で指定できます。 

img {
   width: 200px; /* 幅を200ピクセルに設定 */
   height: 150px; /* 高さを150ピクセルに設定 */
}

max-width と max-height

[編集]

max-widthプロパティとmax-heightプロパティは、要素の最大幅と最大高さを制限します。ウィンドウサイズが変更された場合などに、要素がこれ以上大きくならないように制御します。 

.container {
   max-width: 80%; /* 最大幅を親要素の80%に設定 */
}

min-width と min-height

[編集]

min-widthプロパティとmin-heightプロパティは、要素の最小幅と最小高さを指定します。コンテンツが少ない場合でも、指定した最小サイズより小さくならないようにします。 

.container {
   min-width: 300px; /* 最小幅を300ピクセルに設定 */
}

.box {
   min-height: 100px; /* 最小高さを100ピクセルに設定 */
}

marginと padding

[編集]

marginプロパティとpaddingプロパティは、要素の周囲の余白と内側の余白（パディング）を設定します。単一の値や、上下左右それぞれの値を指定できます。 

.container {
   margin: 0 auto; /* 上下の余白を0、左右の余白を自動で設定（中央配置） */
   padding: 20px; /* 上下左右のパディングを20ピクセルに設定 */
}

floatと clear

[編集]

floatプロパティは、要素を左または右に浮かせて、周囲の要素の回りにテキストを流し込む配置を行います。clearプロパティは、浮かせた要素の下に何も浮かせないように指定します。 

.image {
   float: left; /* 画像を左に浮かせる */
}

.clearfix {
   clear: both; /* 左右に浮かせた要素の下に何も浮かせない */
}

display

[編集]

displayプロパティは、要素の表示方法を指定します。ブロック要素、インライン要素、フレックスボックス、グリッドなどのディスプレイタイプを設定できます。 

.inline-block {
   display: inline-block; /* インラインブロック要素として表示 */
}

.flex-container {
   display: flex; /* フレックスコンテナとして表示 */
}

positionと top、 right、 bottom、 left

[編集]

positionプロパティは、要素の配置方法を指定します。top、right、bottom、leftプロパティと組み合わせて使用し、要素を任意の位置に配置します。 

.absolute {
   position: absolute; /* 絶対配置 */
   top: 10px; /* 上端から10ピクセルの位置に配置 */
   left: 20px; /* 左端から20ピクセルの位置に配置 */
}

.fixed {
   position: fixed; /* ビューポートに固定された配置 */
   bottom: 0; /* 下端に固定 */
   right: 0; /* 右端に固定 */
}

サイズと配置の使用例

[編集]

以下に、上記のサイズプロパティと配置プロパティを組み合わせた具体的な使用例を示します。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Size and Position Example</title>
  <style>
    .image {
      width: 200px; /* 幅を200ピクセルに設定 */
      height: 150px; /* 高さを150ピクセルに設定 */
      float: left; /* 左に浮かせる */
      margin-right: 20px; /* 右側に20ピクセルの余白 */
    }

    .content {
      width: 80%; /* 幅を親要素の80%に設定 */
      margin: 0 auto; /* 上下の余白を0、左右の余白を自動で設定（中央配置） */
    }

    .box {
      min-height: 100px; /* 最小高さを100ピクセルに設定 */
      padding: 10px; /* 上下左右に10ピクセルのパディング */
      background-color: #f0f0f0; /* 背景色を灰色に設定 */
      text-align: center; /* テキストを中央揃えに設定 */
    }
  </style>
</head>
<body>
  <div class="content">
    <img src="example.jpg" alt="Example Image" class="image">
    <div class="box">
      <p>This is an example of using CSS size and position properties to control the layout of elements on a webpage.</p>
    </div>
  </div>
</body>
</html>

この例では、画像とテキストボックスを配置し、それぞれの要素に対して幅、高さ、浮かせ、余白、パディング、背景色、テキスト配置などを設定しています。これにより、ウェブページのレイアウトを柔軟に調整することができます。

「CSS/レイアウト」も参照

テキスト装飾

[編集]

CSSのテキスト装飾プロパティを使用すると、ウェブページ内のテキストの見た目をカスタマイズできます。これには、テキストの色、文字間隔、装飾線などが含まれます。以下に、主なテキスト装飾プロパティを紹介します。

color

[編集]

colorプロパティは、テキストの色を設定します。色は名前、16進数、RGB、RGBA、HSL、HSLAなどで指定できます。 

p {
   color: #333; /* 16進数 */
}

h1 {
   color: rgb(255, 0, 0); /* RGB */
}

a {
   color: blue; /* 名前付き色 */
}
「#色」も参照

text-decoration

[編集]

text-decorationプロパティは、テキストに下線、上線、取り消し線などを追加します。

  • none：装飾なし
  • underline：下線を追加
  • overline：上線を追加
  • line-through：取り消し線を追加
a {
   text-decoration: none; /* 装飾なし */
}

u {
   text-decoration: underline; /* 下線 */
}

del {
   text-decoration: line-through; /* 取り消し線 */
}

text-transform

[編集]

text-transformプロパティは、テキストの大文字と小文字の変換を制御します。

  • none：変換しない
  • capitalize：各単語の最初の文字を大文字にする
  • uppercase：すべての文字を大文字にする
  • lowercase：すべての文字を小文字にする
p.capitalize {
   text-transform: capitalize; /* 各単語の最初の文字を大文字に */
}

p.uppercase {
   text-transform: uppercase; /* すべての文字を大文字に */
}

p.lowercase {
   text-transform: lowercase; /* すべての文字を小文字に */
}

text-align

[編集]

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

  • left：左揃え
  • right：右揃え
  • center：中央揃え
  • justify：両端揃え
p.left {
   text-align: left; /* 左揃え */
}

p.right {
   text-align: right; /* 右揃え */
}

p.center {
   text-align: center; /* 中央揃え */
}

p.justify {
   text-align: justify; /* 両端揃え */
}

text-indent

[編集]

text-indentプロパティは、テキストの最初の行のインデントを設定します。 

p {
   text-indent: 50px; /* 最初の行を50ピクセルインデント */
}

line-height

[編集]

line-heightプロパティは、行の高さを設定し、テキストの行間を調整します。 

p {
   line-height: 1.5; /* 行の高さを1.5倍に */
}

letter-spacing

[編集]

letter-spacingプロパティは、文字間のスペースを設定します。 

p {
   letter-spacing: 2px; /* 文字間を2ピクセルに */
}

word-spacing

[編集]

word-spacingプロパティは、単語間のスペースを設定します。 

p {
   word-spacing: 5px; /* 単語間を5ピクセルに */
}

text-shadow

[編集]

text-shadowプロパティは、テキストに影を追加します。影の横方向のオフセット、縦方向のオフセット、ぼかしの半径、影の色を指定します。 

h1 {
   text-shadow: 2px 2px 5px #888; /* テキストに影を追加 */
}

white-space

[編集]

white-spaceプロパティは、テキストの空白や改行の処理方法を指定します。

  • normal：デフォルト。空白を無視し、テキストを折り返す
  • nowrap：空白を無視し、テキストを折り返さない
  • pre：空白をそのまま保持し、テキストを折り返さない
  • pre-wrap：空白をそのまま保持し、必要に応じてテキストを折り返す
  • pre-line：連続する空白を1つにまとめ、必要に応じてテキストを折り返す
pre {
   white-space: pre; /* 空白をそのまま保持し、折り返さない */
}

div.nowrap {
   white-space: nowrap; /* 空白を無視し、折り返さない */
}

テキスト装飾の使用例

[編集]

以下に、上記のテキスト装飾プロパティを組み合わせた具体的な使用例を示します。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Text Decoration Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    h1 {
      color: #4CAF50;
      text-align: center;
      text-shadow: 2px 2px 4px #aaa;
    }

    p {
      text-indent: 50px;
      letter-spacing: 1px;
      word-spacing: 3px;
      margin: 20px 0;
    }

    a {
      color: #0066cc;
      text-decoration: underline;
    }

    .uppercase {
      text-transform: uppercase;
    }

    .center {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Text Decoration in CSS</h1>
  <p class="uppercase">This paragraph demonstrates various text decoration properties in CSS. You can control the appearance of text to make it more readable and visually appealing.</p>
  <p class="center">Text alignment, letter spacing, word spacing, and other properties can be customized.</p>
  <p>For more information, visit <a href="https://www.example.com">this link</a>.</p>
</body>
</html>

この例では、h1要素に色、テキスト揃え、影を設定し、p要素にインデント、文字間隔、単語間隔を設定しています。また、リンクには下線を追加し、スタイルを強調しています。CSSのテキスト装飾プロパティを活用することで、テキストの見た目を自由にカスタマイズでき、ウェブページのデザインを向上させることができます。

リスト

[編集]

リストプロパティは、HTMLのリスト要素（ul, ol, dl）の項目のスタイルを制御するために使用されます。以下に主なリストプロパティとその使用例を示します。

リストスタイル (list-style-type, list-style-image, list-style-position)

[編集]

リストスタイルプロパティは、リスト項目のマーカーの種類や位置、画像などを設定します。 

ul {
   list-style-type: disc; /* リストのマーカーを円形に設定 */
   margin-left: 20px; /* 左余白を20ピクセルに設定 */
}

ol {
   list-style-type: decimal; /* 順序付きリストのマーカーを数字に設定 */
   list-style-position: inside; /* マーカーをリスト項目の内側に配置 */
}

ul.square {
   list-style-type: square; /* リストのマーカーを四角形に設定 */
}

ul.image {
   list-style-image: url('marker.png'); /* リストのマーカーに画像を使用 */
}

リスト項目の余白 (margin, padding)

[編集]

リスト項目の周囲の余白や内側の余白を設定します。 

li {
   margin-bottom: 10px; /* 各リスト項目の下余白を10ピクセルに設定 */
   padding-left: 15px; /* リスト項目の左パディングを15ピクセルに設定 */
}

定義リスト (dl, dt, dd)

[編集]

定義リストは用語とその説明をペアで表示するためのリストです。 

dl {
   margin-top: 20px; /* 定義リストの上余白を20ピクセルに設定 */
}

dt {
   font-weight: bold; /* 定義用語を太字に設定 */
}

dd {
   margin-left: 40px; /* 定義説明の左余白を40ピクセルに設定 */
}

ネストしたリストのスタイリング

[編集]

リスト要素をネストして使用する場合、親リストと子リストのスタイルを適切に指定することが重要です。 

<ul>
   <li>List item 1</li>
   <li>List item 2
      <ul>
         <li>Nested item 1</li>
         <li>Nested item 2</li>
      </ul>
   </li>
   <li>List item 3</li>
</ul>

<style>
   ul {
      list-style-type: disc;
      margin-left: 20px;
   }
   
   ul ul {
      list-style-type: circle;
      margin-left: 20px;
   }
   
   li {
      margin-bottom: 10px;
   }
</style>

この例では、親リストと子リストそれぞれに異なるリストスタイルと余白を設定しています。リストプロパティを使って、さまざまなデザインのリストを作成することができます。

TABLE (表)

[編集]

HTMLのテーブルは、データを行と列で整然と表示するための要素です。CSSを使ってテーブルのデザインをカスタマイズすることができます。ここでは、<table>要素とその子要素・孫要素に関する主要なCSSプロパティについて解説します。

table要素

[編集]

<table>要素はテーブル全体を定義します。これに対する主要なCSSプロパティは次のとおりです。

  • width: テーブルの幅を指定します。
  • border-collapse: テーブルのセル境界線の表示方法を指定します。
    • collapse: 境界線を1本にまとめる。
    • separate: 各セルごとに境界線を表示する。
  • border-spacing: border-collapse: separateのとき、セルの間隔を指定します。
  • table-layout: テーブルのレイアウト方法を指定します。
    • auto: テーブルの幅が内容に基づいて決まる。
    • fixed: テーブルの幅が固定され、列幅が均等に配分される。
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

caption要素

[編集]

<caption>要素はテーブルのタイトルを定義します。これに対する主要なCSSプロパティは次のとおりです。

  • caption-side: テーブルキャプションの位置を指定します。
    • top: テーブルの上部（デフォルト）。
    • bottom: テーブルの下部。
caption {
  caption-side: bottom;
  font-weight: bold;
}

th および td要素

[編集]

<th>（テーブルヘッダー）および<td>（テーブルデータ）要素は、テーブルのセルを定義します。これに対する主要なCSSプロパティは次のとおりです。

  • padding: セル内のコンテンツと境界線の間隔を指定します。
  • text-align: テキストの水平方向の揃え方を指定します。
    • left, center, right
  • vertical-align: テキストの垂直方向の揃え方を指定します。
    • top, middle, bottom
  • border: セルの境界線を指定します。
th, td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

thead, tbody, tfoot要素

[編集]

これらの要素は、テーブルのヘッダー、ボディ、およびフッターを定義します。これに対する主要なCSSプロパティは次のとおりです。

  • background-color: 背景色を指定します。
  • color: テキストの色を指定します。
thead {
  background-color: #f2f2f2;
}

tfoot {
  background-color: #f9f9f9;
}

その他のプロパティ

[編集]
  • empty-cells: 空のセルの境界線の表示方法を指定します。
    • show: 境界線を表示（デフォルト）。
    • hide: 境界線を表示しない。
table {
  empty-cells: hide;
}
  • border-style: 境界線のスタイルを指定します。
  • border-width: 境界線の幅を指定します。
  • border-color: 境界線の色を指定します。
th, td {
  border-style: solid;
  border-width: 2px;
  border-color: #ccc;
}
例

以下に、上記のプロパティを適用したテーブルの完全な例を示します。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styled Table</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      margin-bottom: 20px;
    }
    caption {
      caption-side: bottom;
      font-weight: bold;
      padding: 10px;
    }
    th, td {
      padding: 10px;
      border: 1px solid #ddd;
      text-align: left;
      vertical-align: middle;
    }
    thead {
      background-color: #f2f2f2;
    }
    tfoot {
      background-color: #f9f9f9;
    }
    .highlight {
      background-color: #ff0;
    }
    table {
      empty-cells: hide;
    }
  </style>
</head>
<body>
  <table>
    <caption>Sample Table</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td class="highlight">Data 3</td>
      </tr>
      <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

この例では、テーブル全体の幅、セルのパディング、境界線のスタイル、およびヘッダーとフッターの背景色をカスタマイズしています。また、特定のセルにクラスを適用してハイライト表示を行っています。

単位

[編集]

CSSでは、スタイルを指定する際にさまざまな単位を使用して要素のサイズ、位置、間隔などを設定します。ここでは、主要なCSS単位について説明します。

絶対単位

[編集]

絶対単位は、特定の物理的な長さに基づいた単位です。絶対単位を使用すると、ブラウザやデバイスの設定に関わらず、一貫したサイズを指定できます。

  • cm (センチメートル)：1センチメートルを基準とする単位。
  • mm (ミリメートル)：1ミリメートルを基準とする単位。
  • in (インチ)：1インチ（2.54センチメートル）を基準とする単位。
  • px (ピクセル)：画面上の1ピクセルを基準とする単位。
  • pt (ポイント)：1ポイント（1/72インチ）を基準とする単位。
  • pc (パイカ)：1パイカ（12ポイント）を基準とする単位。
.element {
  width: 2cm;
  height: 50mm;
  border: 1in solid black;
  font-size: 12pt;
}

CSSにおける1pxの実際の物理的ドット数について

[編集]

CSSで指定する1ピクセル（1px）は、必ずしも画面上の1つの物理的ドットと一致するわけではありません。特に、高解像度ディスプレイやデバイスピクセル比が異なるディスプレイでは、1pxは複数の物理的ドットを使用することがよくあります。これを理解するには、デバイスピクセル比（device pixel ratio, DPR）について知っておく必要があります。

デバイスピクセル比 (Device Pixel Ratio)

[編集]

デバイスピクセル比は、物理的なピクセル数と論理的な（CSS）ピクセル数の比率を示します。例えば、DPRが2の場合、1pxは2つの物理的ピクセルに相当します。

例: デバイスピクセル比が2の場合
[編集]
  • 1pxのCSSピクセル = 2つの物理的ピクセル
  • 10pxのCSSピクセル = 20個の物理的ピクセル

高解像度ディスプレイ (Retina Display)

[編集]

高解像度ディスプレイ、例えばAppleのRetinaディスプレイは、デバイスピクセル比が通常よりも高いです。これにより、画面上の画像やテキストがより鮮明に表示されます。

DPI (Dots Per Inch) と PPI (Pixels Per Inch)

[編集]

DPI（Dots Per Inch）やPPI（Pixels Per Inch）も関係していますが、これらは物理的なドットやピクセルの密度を指します。高DPI/PPIのディスプレイは、同じサイズの画面により多くのピクセルを詰め込むことができます。

実際のケース

[編集]

1pxが複数の物理的ドットになる具体的なケースをいくつか示します。

スマートフォン
[編集]

多くの現代のスマートフォンは高解像度ディスプレイを搭載しており、DPRが2や3の場合が一般的です。

  • iPhone 11: DPR = 2
  • iPhone 12以降: DPR = 3
タブレット
[編集]

タブレットも高解像度ディスプレイを搭載していることが多いです。

  • iPad (第8世代): DPR = 2
  • iPad Pro: DPR = 2
デスクトップディスプレイ
[編集]

高解像度のデスクトップディスプレイや4KモニターなどもDPRが高い場合があります。

  • Apple MacBook Pro (Retinaディスプレイ): DPR = 2

CSSとメディアクエリの利用

[編集]

CSSでは、`@media`クエリを使用してデバイスピクセル比に基づいたスタイルを適用することができます。例えば、高解像度ディスプレイに対して特定のスタイルを適用するには、以下のようにします。 

@media only screen and (min-device-pixel-ratio: 2), 
       only screen and (min-resolution: 192dpi) {
    .high-res {
        background-image: url('image@2x.png');
    }
}

この例では、デバイスピクセル比が2以上のディスプレイに対して、高解像度の画像を背景に設定しています。

まとめ

[編集]

CSSで指定する1pxが実際の物理的ドット数個になるケースは、デバイスの解像度やデバイスピクセル比によって異なります。高解像度ディスプレイでは、1pxが複数の物理的ピクセルに相当し、これによりより鮮明な表示が可能になります。デバイスピクセル比やDPI/PPIを理解し、適切に対応することで、様々なデバイスで一貫した視覚体験を提供できます。

相対単位

[編集]

相対単位は、他の値に対して相対的なサイズを指定する単位です。相対単位を使用すると、レスポンシブデザインや柔軟なレイアウトが実現しやすくなります。

  • em：親要素のフォントサイズに基づいた相対単位。例えば、親要素のフォントサイズが16pxの場合、1emは16pxになります。
  • rem：ルート要素（通常は<html>）のフォントサイズに基づいた相対単位。
  • ex (x-height)：現在のフォントのx-height（小文字の「x」の高さ）を基準とする単位。これは、フォントサイズによって異なりますが、一般的にフォントサイズの約半分程度です。
  • rex (root x-height)：ルート要素（通常は<html>）のx-heightを基準とする単位。
  • %：親要素に対する割合を指定する単位。
  • vw (ビューポート幅)：ビューポートの幅に対する1％の値。
  • vh (ビューポート高さ)：ビューポートの高さに対する1％の値。
  • vmin：ビューポートの幅と高さのうち、より小さい方の1％の値。
  • vmax：ビューポートの幅と高さのうち、より大きい方の1％の値。
.container {
  width: 50%;
  height: 100vh;
}
.text {
  font-size: 2em;
  line-height: 1.5rem;
}

角度単位

[編集]

CSSでは、回転や傾斜のために角度を指定する単位があります。

  • deg (度)：1度を基準とする単位。
  • grad (グラッド)：1グラッドを基準とする単位（1グラッドは0.9度）。
  • rad (ラジアン)：1ラジアンを基準とする単位（1ラジアンは約57.3度）。
  • turn (ターン)：1回転を基準とする単位（1ターンは360度）。
.rotate {
  transform: rotate(45deg);
}

時間単位

[編集]

CSSアニメーションやトランジションの継続時間を指定するために、時間単位が使用されます。

  • s (秒)：1秒を基準とする単位。
  • ms (ミリ秒)：1ミリ秒を基準とする単位（1秒の1/1000）。
.animation {
  animation-duration: 2s;
  transition: all 500ms;
}

周波数単位

[編集]

周波数を指定する際に使用される単位です。

  • Hz (ヘルツ)：1秒間に1回の振動を基準とする単位。
  • kHz (キロヘルツ)：1秒間に1000回の振動を基準とする単位。

周波数単位は、主にCSSの音声プロパティで使用されます。 

.sound {
  pitch: 440Hz;
}

解像度単位

[編集]

解像度を指定する際に使用される単位です。

  • dpi (ドット毎インチ)：1インチあたりのドット数を基準とする単位。
  • dpcm (ドット毎センチメートル)：1センチメートルあたりのドット数を基準とする単位。
  • dppx (ドット毎ピクセル)：1ピクセルあたりのドット数を基準とする単位。

解像度単位は、主にメディアクエリで使用されます。 

@media (min-resolution: 300dpi) {
  .high-res {
    background-image: url('high-res-image.png');
  }
}

単位の選択

[編集]

単位を選択する際は、使用する状況やデザインの要件に応じて、適切な単位を選択することが重要です。以下にいくつかのヒントを示します。

  • 絶対単位は、印刷媒体や特定の物理サイズが必要な場合に適しています。
  • 相対単位は、レスポンシブデザインや柔軟なレイアウトに適しています。
  • 角度単位は、回転や傾斜のエフェクトに使用します。
  • 時間単位は、アニメーションやトランジションの制御に使用します。

これらの単位を理解し、適切に使用することで、より洗練されたスタイルとデザインを実現することができます。

まとめ

[編集]

以下に、CSSの主要な単位をまとめた表を示します。

CSSの主要な単位
名称 カテゴリー 説明
cm 絶対単位 1センチメートルを基準とする単位。
mm 絶対単位 1ミリメートルを基準とする単位。
in 絶対単位 1インチ（2.54センチメートル）を基準とする単位。
px 絶対単位 画面上の1ピクセルを基準とする単位。
pt 絶対単位 1ポイント（1/72インチ）を基準とする単位。
pc 絶対単位 1パイカ（12ポイント）を基準とする単位。
em 相対単位 親要素のフォントサイズに基づいた相対単位。
rem 相対単位 ルート要素のフォントサイズに基づいた相対単位。
ex 相対単位 現在のフォントのx-height（小文字の「x」の高さ）を基準とする単位。
rex 相対単位 ルート要素のx-height（小文字の「x」の高さ）を基準とする単位。
% 相対単位 親要素に対する割合を指定する単位。
vw 相対単位 ビューポートの幅に対する1％の値。
vh 相対単位 ビューポートの高さに対する1％の値。
vmin 相対単位 ビューポートの幅と高さのうち、より小さい方の1％の値。
vmax 相対単位 ビューポートの幅と高さのうち、より大きい方の1％の値。
deg 角度単位 1度を基準とする単位。
grad 角度単位 1グラッドを基準とする単位（1グラッドは0.9度）。
rad 角度単位 1ラジアンを基準とする単位（1ラジアンは約57.3度）。
turn 角度単位 1回転を基準とする単位（1ターンは360度）。
s 時間単位 1秒を基準とする単位。
ms 時間単位 1ミリ秒を基準とする単位（1秒の1/1000）。
Hz 周波数単位 1秒間に1回の振動を基準とする単位。
kHz 周波数単位 1秒間に1000回の振動を基準とする単位。
dpi 解像度単位 1インチあたりのドット数を基準とする単位。
dpcm 解像度単位 1センチメートルあたりのドット数を基準とする単位。
dppx 解像度単位 1ピクセルあたりのドット数を基準とする単位。

これらの単位を理解し、適切に使用することで、より柔軟で洗練されたウェブデザインを実現することができます。

重要度

[編集]

重要度 (specificity) は、CSSセレクタの競合が発生した場合に、どのスタイルが適用されるかを決定する指標です。重要度が高いセレクタほど、低い重要度のセレクタよりも優先的に適用されます。

重要度は、以下の3つの要素によって構成されます。

  • インラインスタイル: <style>要素またはstyle属性で直接記述されたスタイルは、最も高い重要度を持ちます。
  • IDセレクタ: #id のようなIDセレクタは、クラスセレクタや属性セレクタよりも高い重要度を持ちます。
  • クラスセレクタ、属性セレクタ: .class のようなクラスセレクタや [attribute=value] のような属性セレクタは、同じ重要度を持ちます。

重要度が同じ場合は、セレクタの記述順序によって適用されるスタイルが決まります。後の方に記述されたセレクタの方が、より優先的に適用されます。

重要度は、特定のスタイルを確実に適用したい場合にのみ使用し、基本的には重要度を意識せずにCSSを記述することをおすすめします。

まとめ

[編集]

CSSの基本について、セレクタ、宣言プロパティ、単位、重要度などについて解説しました。

この教科書では、CSSの基本から応用までを体系的に解説していきます。実践的な例や豊富な図解を用いることで、わかりやすく解説していきますので、ぜひ最後まで読んでみてください。


はじめに CSS
基本 		レイアウト
"https://ja.wikibooks.org/w/index.php?title=CSS/基本&oldid=251969" より作成