目次

アルファチャンネル
position
transition
transform
background
GoogleFonts

アルファチャンネル

重要度：重要

アルファチャンネルとは：rgbaのaのこと。
aの役割：不透明度

例：

index.html

<div class="default">
  <p>デフォルト</p>
</div>

<div class="rgba-box">
  <p>背景だけが透明なボックス (RGBA)</p>
</div>

<div class="opacity-box">
  <p>ボックス全体が透明なボックス (Opacity)</p>
</div>

index.css

/* デフォルトのボックス */
.default {
  background-color: red;
}

/* RGBAを使用した背景色 */
.rgba-box {
  background-color: rgba(255, 0, 0, 0.5); /* 背景のみ半透明 */
  color: black;
}

/* opacityを使用して要素全体に透明度を適用 */
.opacity-box {
  background-color: red;
  opacity: 0.5; /* 全体を半透明にする */
  color: black;
}

rgbaの使い方：cssで色を指定する時に、rgbに加えてaも0~1の範囲で指定する。（1が不透明、つまり見える状態）
　
- 例では、真ん中の四角に対して、背景に不透明度を指定している。
  　
rgbaの特徴：逆に、背景にしか不透明度が設定できない！ 文字にも設定したい時はその都度、書かないといけない。

要素全部に不透明度を設定したいとき

opacityを使う！

例の、3つ目のボックス。

cssにopacity: 0.5;と指定するだけで、その要素全体に不透明度を設定できる。

position

重要度：超重要

positionとは：要素をどのように配置するか設定するプロパティ

static

デフォルト
topとか効果がない

例：

index.html

<section id="static">
  <h2>Static</h2>
  <div></div>
  <div class="middle"></div>
  <div></div>
</section>

index.css

#static .middle {
  position: static;
  top: 50px;
}

コードの説明：cssにtop: 50px;を書いても反映されない。

relative

staticのtop, right , bottom , leftの効果があるバージョン

もっと細かい説明

relative は、要素の元の位置を基準にして動かす。

元の位置（通常配置される場所）はそのままキープされていて、要素はそこから指定された分だけ移動する。
例えば、top: 50px を指定すると、その要素は元の場所から下に50pxだけ動くけど、要素が元々あった場所のスペースはそのまま残る。

例：

index.html

<section id="relative">
  <h2>Relative</h2>
  <div></div>
  <div class="middle"></div>
  <div></div>
</section>

index.css

#relative .middle {
  position: relative;
  top: 50px;
}

コードの説明：cssのtop: 50px;が反映されて、真ん中の図形が少し下にずれている。

つまり、元の位置は保持されたまま、その位置を基準に動くのが relative の特徴。

absolute

absolute をつけると要素はその場で空間を作らない。
動く基準が親要素にあるか、画面全体にあるかで配置される場所が変わる。

どう配置される場所が変わるか
cssにtop: 1px, left: 1pxを設定したとする

親や祖先に position が指定されていない場合（基準がない場合）：
- 要素は画面全体（body）の左上に配置される。
親や祖先に position が指定されている場合（基準がある場合）：
- その要素は、その親や祖先の左上に配置される。

例：親や祖先に position が指定されている場合（基準がある場合）

index.html

<section id="absolute">
  <h2>Absolute</h2>
  <div></div>
  <div class="middle"></div>
  <div></div>
</section>

index.css

section {
  position: relative; /* 基準となる要素 */
}

#absolute .middle {
  position: absolute;
  top: 1px;
  left: 1px;
}

コードの説明：真ん中にあったはずの青色の図形は、 section を基準にして、上から1px、左から1px の位置に配置されている。

fixed

fixed をつけると、要素を画面全体に固定して、スクロールしてもその場所から動かないようにできる。
fixed を使った要素は、absolute同様、その場で空間を作らない。

例：

index.html

<section id="fixed">
  <h2>Fixed</h2>
  <div></div>
  <div class="middle"></div>
  <div></div>
</section>

index.css

#fixed .middle {
  position: fixed;
  top: 1px;
  left: 1px;
}

コードの説明：position: fixed;を設定した青色の図形は、画面の左上に固定され、スクロールしてもその場所に居続ける。

sticky

スクロールでその場所を超えるまでは通常のレイアウトとして動き、そこを超えたら画面内に居続ける

MDN

transition

重要度：超重要

説明

対象の要素に対して、何秒アニメーションかけるか、どういう動きをかけるかを指定できる。
transition-timing-functionを使うと、個別にどういう動きかを指定できる。
transition-timing-functionを使う時の、アニメーションの参考サイト

使用例

ボタンにホバーすると、1秒かけて色が変わる
デフォルト

ホバー後

index.html

<body>
    <button class="transition-button">Hover Me</button>
</body>

index.css

/* 初期のボタンスタイル */
.transition-button {
    transition: background-color 0.3s ease; /* 背景色の変化に0.3秒のトランジションを適用 */
}

/* ホバー時のボタンスタイル */
.transition-button:hover {
    background-color: lightcoral; /* 背景色が赤系に変化 */
}

書き方

transition: background-color 0.3s ease;
transition: プロパティ名 | 再生時間 | イージング関数 ;

「どのプロパティに、何秒かけて、どういう動きをさせるか」を設定
「どのプロパティに」は必ず書く
待ち時間を付け足すと、ホバーして1s待ってから動くみたいなのもできる
詳しくはMDNの構文を参考に

メモ

cssだけでこんなにアニメーションつけれるのにびっくり

MDN

transform

重要度：知っておくといい

説明

回転させたり、歪ませたり、スケールをいじったりできる。
詳しくはMDNの構文を見る。
transformの特徴：要素に入ってる全部のコンテンツにtransformが適応される。

使用例

ホバーした時に、ボックスを45度回転、1.5倍に拡大、右に50px・下に50px移動、20度横方向・10度縦方向に傾ける

index.html

<body>
    <div class="rotate">Rotate</div>
    <div class="scale">Scale</div>
    <div class="translate">Translate</div>
    <div class="skew">Skew</div>
</body>

index.css

/* 回転 */
.rotate:hover {
  transform: rotate(45deg); /* 要素を45度回転 */
}

/* 拡大縮小 */
.scale:hover {
  transform: scale(1.5); /* 要素を1.5倍に拡大 */
}

/* 移動 */
.translate:hover {
  transform: translate(50px, 50px); /* 要素を50px右、50px下に移動 */
}

/* 傾斜 */
.skew:hover {
  transform: skew(20deg, 10deg); /* 要素を20度横、10度縦に傾ける */
}

書き方

rotate(45deg)：要素を45度回転させる
scale(1.5): 要素を1.5倍に拡大する
translate(50px, 50px): 要素を右に50px、下に50px移動させる
- translate（X軸 , Y軸）
skew(20deg, 10deg): 要素を20度横方向に、10度縦方向に傾ける

メモ

これにtransitionでアニメーションつけたら、ホバー時に動きがついたボタンが作れる。

MDN

background

背景色の代わりに、画像を背景にできる
coverにすると縦横比は保ったまま、画面を埋めてくれる
画像のどこを基準に表示するかも指定できる。下が基準とか

おしゃれな画像が得られるサイト

MDN

GoogleFonts

説明

ユーザーがフォントを持ってなくても、開く時にフォントをダウンロードするから誰にでもそのフォントが適応されちゃう。便利。
しかも無料
複数のフォントを一文でダウンロードできるけど、フォントが多すぎると重くなるから注意

使い方

「Get font」＞「Get embet code」＞画像の画面

この画面になったらコードをコピーして貼れば使える。