コンテンツにスキップ

[CSS] FAQ

画像の色合いを変化させたい

filterを使って画像や要素の色合いをさせる。

  • 背景を暗くするなら filter:brightness(...)

親要素の中央に配置したい

親要素に text-align: center を追加する。

リンク(aタグ)の範囲を親要素まで広げたい

Linkの色を変更せずにaタグを使いたい(リンクしたい)

inheritで親のスタイルを引き継げばOK.

a {
  color: inherit;
  text-decoration: inherit;
}

縦横比を維持したまま画像の大きさを調整したい

object-fit: containを使う。

iframeのコンテンツを拡大/縮小したい

transformを使う。

.inline-page {
  height: 600px;
  width: 1920px;
  transform: scale(0.55);
  transform-origin: 0 0;
  overflow: scroll;
}
<iframe src="..." class="inline-page">

HTMLの記載順とDOMの配置順を変えたい

display: flex;orderを使う。

<div style="display: flex;">
  <div style="order: 2;">2つ目</div>
  <div style="order: 3;">3つ目</div>
  <div style="order: 1;">1つ目</div>
</div>

↓ 結果

2つ目
3つ目
1つ目