[CSS] FAQ¶

配置¶

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

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

他にも色々な方法がある。

web.dev

Centering in CSS

Follow 5 centering techniques as they go through a series of tests to see which one is the most resilient to change.

テキストを中央寄せしたい¶

横方向中央なら text-align: center
縦方向中央なら height と line-height を同じにする (1行なら)

縦の一番下に配置したい¶

flexboxを使って、flex: 1の透明な壁をつくる。

<div style="display: flex; flex-flow: column; width: 100px; height: 150px;>
  <div>hoge</div>
  <div>huga</div>
  <div style="flex: 1"></div>
  <div>last</div>
</div>

要素に一定の間隔を開けたい¶

display: flexかdisplay: gridでgapを使う。

<div style="display: flex; gap: 30px">
  <div>hoge</div>
  <div>hoga</div>
  <div>hoho</div>
</div>

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>

表現¶

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

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

www-creators.com

filter - CSSリファレンス | WWWクリエイターズ

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

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

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

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

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

object-fit: containを使う。

【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。

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

transformを使う。

.inline-page {
  height: 600px;
  width: 1920px;
  transform: scale(0.55);
  transform-origin: 0 0;
  overflow: scroll;
}

<iframe src="..." class="inline-page">

外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 | アシアルブログ

アニメーション¶

透過率をゆっくり変更したい¶

transitionを指定すると、styleが適応されたときに指定秒数で変更される。

opacity: <opacity>,
transition: 'opacity 1.0s',

ホバーされたら背景をグレーにしたい¶

backdrop-filterを使ってTransitionする。

backdrop-filter

:hover {
    transition: backdrop-filter 0.5s;
    backdrop-filter: brightness(75%);
}

構造¶

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

TODO: リンク先が消えた..