CSS【基礎】

Posted at 2025-05-23

スタイルシートについて

インラインスタイルシート

<div style="color: red; width: 100%;">あいうえお</div>

要素に対して直接styleを指定する

外部スタイルシート

<link rel="stylesheet" type="text/css" href="style.css" >

rel属性
- リンクファイルとの関係性を指定
type属性
- cssのMIMEタイプを指定
- 規定値はtext/cssなので省略可能
href属性
- 対象のcssファイルのパスを指定

内部スタイルシート

<style> h1 { color: red; } </style>

style要素はhead要素に記載する

適用優先順位

インラインスタイルシート
外部スタイルシート or 内部スタイルシート(後に記述したcssが適用される)
ユーザースタイルシート
ユーザーエージェントスタイルシート

ユーザースタイルシート...ユーザーがブラウザに設定したスタイルシート（ユーザー独自の設定が可能）
ユーザーエージェントスタイルシート...ブラウザの規定設定

セレクタ

タイプセレクタ

div { color: red; }

適用範囲は、指定したすべての要素（例でいうと、div要素すべて）

クラスセレクタ

/* css */
.message { color: red; }
/* もしくは */
div.message { color: red; }

<!-- HTML -->
<div class="message">Hello World!!</div>

適用範囲は、指定した任意の範囲

IDセレクタ

/* css */
#message {color: red;}

<!-- HTML -->
<div id="message">Hello World!!</div>

1つの要素のみ（複数の要素で共有できない）

ブラウザによっては、複数要素に同じIDを指定できる

ユニバーサルセレクタ

/* css */
*.message {
  color: red;
}

<!-- HTML -->
<div class="message">Hello World!!</div>
<text class="message">Hello World!!</div>

すべての要素に適用

属性セレクタ

要素 [ 属性名 ]

<a> 要素で、title 属性を持つもの

a[title] {
  color: purple;
}

要素 [ 属性名 = "値" ]

/* css */
/* <a> 要素で href が "https://hoge.com" と一致するもの */
a[href="https://hoge.com"]
{
  color: green;
}

<!-- HTML -->
<a href="https://hoge.com">HOGE リンク</a>

指定した属性名と値が一致する要素（完全一致）

要素 [ 属性名 ~= "値" ]

/* css */
div[class~="logo"] {
  color: red;
}

<!-- HTML -->
<!-- どちらも赤色になる -->
<div class="logo">LOGO</li> 
<div class="logo menu">LOGO MENU</li>

指定した属性名と属性値ちを持つ要素（複数の属性値の中に含まれていても可）

要素 [ 属性名 |= "値" ]

/* css */
div[class|="name"] {
color: red;
}

<!-- HTML -->
<div class="name">HOGE TARO</div>
<div class="name-a">HOGE A TARO</div>

指定した属性名、属性値、もしくはハイフン区切りの属性値に一致する要素

要素 [ 属性名 ^= "値" ]

/* css */
/* "#" で始まる内部リンク */
a[href^="#"] {
  background-color: gold;
}

<!-- HTML -->
<a href="#InSensitive">Insensitive internal link</a>

指定した属性名、値が 前方一致 する要素

要素 [ 属性名 $= "値" ]

/* css */
/* ".com" で終わるリンク */
a[href$=".com"] {
  color: red;
}

<!-- HTML -->
<a href="http://hoge.com">HOGE Link</a>

指定した属性名、値が 後方一致 する要素

要素 [ 属性名 *= "値" ]

/* css */
a[href*="hoge"] {
  color: red;
}

<!-- HTML -->
<a href="http://hoge.com">HOGE Link</a>

指定した属性名、値が 部分一致 する要素

要素 [ 属性名 = "値" i]

a[href="insensitive" i] {
  color: cyan;
}

属性値の後の「i」は、大文字、小文字の区別をしない

要素 [ 属性名 = "値" s]

a[href="insensitive" s] {
  color: cyan;
}

属性値の後の「s」は、大文字、小文字を区別する

擬似クラス

:active

マウスクリックされている間など、アクティブ状態の時

:link

未訪問のLink

:visited

訪問済のLink

:nth-child(n)

(親)要素内にある、すべての(子)要素の先頭からn番目の要素
nにはodd, even, 加算, 減算が設定可
- add...奇数番目
- even...偶数番目
:nth-last-child(n)の擬似クラスもあるが、これは末尾の子要素からn番目の要素となる

/* CSS */
li:nth-child(3) {
  border: 2px solid orange;
}
li:nth-last-child(2) {
  border: 2px solid blue;
}

<!-- HTML -->
<ul>
  <li>One</li>
  <li>Two</li>
  <li>three</li> <!-- この子要素にorage borderが当たる -->
  <li>four</li> <!-- この子要素にblue borderが当たる -->
  <li>five</li>
</ul>

:nth-of-type(n)

子要素内にある、指定した要素の中で先頭からn番目の要素
nにはodd, even, 加算, 減算が設定可
:nth-last-of-type(n)の擬似クラスもあるが、これは末尾の指定した子要素からn番目の要素となる

/* CSS */
dd:nth-of-type(even) {
  border: 2px solid orange;
}

<!-- HTML -->
<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd> <!-- border orange -->
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd> <!-- border orange -->
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd> <!-- border orange -->
  <dd>7. Oranges</dd>
</dl>

:first-child

:nth-child(1)の状態
:nth-last-childもあり、これは末尾の子要素となる

/* CSS */
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

<!-- HTML -->
<div>
  <p>このテキストは選択されます。</p>
  <p>このテキストは選択されません。</p>
</div>

<div>
  <h2>このテキストは選択されません。: `p` ではありません。</h2>
  <p>このテキストは選択されません。</p>
</div>

:first-of-type

:nth-of-type(1)の状態
:nth-last-childもあり、これは:nth-last-of-type(1)の状態となる

/* CSS */
article :nth-of-type(1) {
  background-color: pink;
}

<!-- HTML -->
<article>
  <div>これは最初の `div` です。</div>
  <div>これは<span>内側で最初の `span`</span> です。</div>
  <div>
    これは<em>内側で最初の `em`</em>で、一方これは<em>最後の `em` </em>です。
  </div>
  <div>これは<span>スタイル付けされた内側の `span`</span>です</div>
  <p>これは `p` で修飾しています。</p>
  <div>これは最後の `div` です。</div>
</article>

出力結果

:only-child

兄弟要素がない要素にstyleが当たる

/* CSS */
li:only-child { color: red; }

<!-- HTML -->

<!-- この li 要素には color: red があたる -->
<ol>
  <li>Robert Downey, Jr.</li>
</ol>

<!-- この li 要素は、兄弟要素があるので、styleはあたらない -->
<ol>
  <li>Robert Downey, Jr.</li>
  <li>Robert Downey, Jr.</li>
</ol>

:empty

子要素を持たない要素

/* CSS */
div:empty {
  height: 1em;
  background-color: red
}

<!-- HTML -->
<p>コメントがある場合でもcsssが適用される</p>
<div><!-- Simple Comment --></div>

<p>子要素 p があるのでcssが適用されない</p>
<div><p></p></div>

:target

URL のフラグメントに一致する id を持つ固有の要素
Playgrounf | MDN

:lang

言語が一致する要素

*:lang(ja) {
  outline: 2px solid deeppink;
}

<!-- HTML -->
<p lang="ja">
  この要素が赤枠で囲まれます。
</p>

擬似要素

::aftere

指定された要素の末尾にコンテンツを追加

::before

指定された要素の先頭にコンテンツを追加

::first-letter

指定した要素の先頭文字

::first-line

指定した要素の先頭行

使用例

/* 先頭に☆が付く */
div::before {content: "☆"; }

結合子

A > B

Aの子要素Bにstyleが適用(例で言うと、順序なしアイテムのli要素に対してstyleが適用)

/* css */
ul > li { border: 5px solid red; }

<!-- HTML -->
<ul>
  <li>順序なしアイテム</li>
  <li>
    順序なしアイテム
    <ol>
      <li>アイテム 1</li>
      <li>アイテム 2</li>
    </ol>
  </li>
</ul>

A + B

隣接する兄弟要素に適用される(Bに適用される)

/* css */
h1 + p {
  font-weight: bold;
  background-color: #333;
  color: red;
  padding: 0.5em;
}

<!-- HTML -->
<article>
  <h1>見出し</h1>
  <p>ここに適用される</p>
  <p>ここには適用されない</p>
</article>

A ~ B

後続する兄弟要素に適用される。（Bの要素に適用）

/* css */
h1 ~ p {
  font-weight: bold;
  background-color: #333;
  color: red;
  padding: 0.5em;
}

<!-- HTML -->
<article>
  <h1>見出し</h1>
  <p>これに適用</p>
  <div>適用されない</div>
  <p>これに適用</p>
</article>

プロパティ

color

rgba(255, 0, 0, 0)の時、4つ目の値が「0」の時は透過する
color: #000000;で表現する際、2桁毎にcolor: #赤緑青 となる。
- 例：#000000 (黒)、#FFFFFF (白)、＃FF0000（赤）

transform

要素を移動、回転、拡大・縮小、傾斜させる事ができる

設定値

translate(X軸、Y軸)...要素を移動する(translateX, translateYもある)
rotate...要素を回転する(rotateX, rotateYもある)
scale...要素を拡大・縮小する(scaleX, scaleYもある)
skewX, skewY...要素を傾斜する

#div {
  translate: 5px 10px 20px; /* 右に5px, 下に10px, 20px拡大する */
}

Table関連

border-collapse

セルの枠線を繋げる or 切り離す
設定値
- collapse...繋げる（共有する）
- separate...切り離す(初期値)

border-spacing

隣り合うセルの境界同士の間隔を設定

caption-side

キャプション(タイトルみたいなもの)の位置（上下）を設定する

empty-cells

空セルの表示 / 非表示の設定
設定値
- show...表示
- hide...非表示

table-layout

テーブルの列幅の自動 / 固定を設定
設定値
- auto...自動
- fixed...固定

transition

cssプロパティの変化速度を制御するショートハンドプロパティ
例

/* colorプロパティが5秒かけて変化する */
div { transition: color 5s; }

/* colorプロパティが10秒後に5秒かけて変化する */
/* transition-property transition-duration transition-deray */
div { transition: color 5s 10s; }

transition-duration

変化にかかる時間を　秒 s, ミリ秒 msで設定

transition-deray

変化が開始するまでの時間を秒 s, ミリ秒 ms で設定

transition-property

transitionを適用させるプロパティ名の設定

transition-timing-function

変化のタイミングを3次ベジェ曲線で設定
おm設定値
- ease...トランジションの半ばまで変化量が増加し、最後にはまた遅くなる
- linear...トランジションは均等の速度になる
- ease-in...最初は遅く、トランジションの速度は完了まで増加する
- ease-out...速い速度で始まり、速度を次第に遅くなる

アニメーションと @ keyframes

@ keyframes

@keyframes slidein {
  from { transform: translateX(0%); }
  to { transform: translateX(100%); }
}

@ keyframesの後は、animation-nameと一致させる必要がある
設定値
- from...アニメーションの始まりである 0% と同じ
- to...アニメーションの終わりである 100% と同じ
- from, toの部分は % で表現することも可能

animation-name

アニメーションのキーフレーム名の指定

animation-deray

アニメーションの開始時間

animation-duration

アニメーションの実行時間を指定する

animation-iteration-count

アニメーションの繰り返し回数を設定。
infinityで無限に繰り返す。

animation-timing-function

変化のタイミングを3次ベジェ曲線で設定。
ease-in...徐々に加速する
ease-out...徐々に減速する

animation-direction

アニメーションの実行方向を指定。

normal...通常実行
reverse...逆実行
alternate...通常と逆実行の両方

animation-play-state

アニメーションの実行状態。

running...実行中
paused...停止

animation-fill-mode

アニメーションの実行前後に適用するスタイルを設定。

fowards...実行後のスタイル
backwards...実行前のスタイル
both...両方

animation

アニメーション関連のショートハンドプロパティ

/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up