Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Haru369(はるな)

【CSS】その他のcssプロパティ

Posted at

目次

  1. アルファチャンネル
  2. position
  3. transition
  4. transform
  5. background
  6. GoogleFonts

アルファチャンネル

重要度：重要

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

例：
スクリーンショット 2024-10-08 14.29.04.png

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とか効果がない

例：
スクリーンショット 2024-10-08 16.52.26.png

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だけ動くけど、要素が元々あった場所のスペースはそのまま残る。

例：
スクリーンショット 2024-10-08 17.03.30.png

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 が指定されている場合（基準がある場合）

スクリーンショット 2024-10-08 18.42.30.png

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同様、その場で空間を作らない。

例：

スクリーンショット 2024-10-08 21.04.23.png

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秒かけて色が変わる
デフォルト
スクリーンショット 2024-10-09 18.08.38.png
ホバー後
スクリーンショット 2024-10-09 18.08.46.png

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度縦方向に傾ける

スクリーンショット 2024-10-10 10.44.38.png

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

説明

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

使い方

スクリーンショット 2024-10-10 10.58.18.png

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?