【TailwindCSS】「アスペクト比」を設定するクラス（アスペクト比に関する基礎など）

TailwindCSSのバージョン3からですが、アスペクト比を設定できるクラスが登場しました。

aspect-ratio

アスペクト比を設定することができるクラス群になります。

aspect-auto

自動調整です。

aspect-video

「16:9」で設定できる。

aspect-square

「1:1」で設定できる。

使う際のポイント

アスペクト比を設定したいタグに対しては横幅を設定します。（例えば「w-full」などと言ったように。）そうしたら、縦幅に関してはアスペクト比を計算して自動設定してくれます。

アスペクト比や画素に関する基礎知識

一応、少しテクニカルな内容も含まれますが、参考までにアスペクト比関連の用語もまとめておきます。

ドット、ピクセル、画素

• 現在はほぼ同じ意味として捉えても良い。
• 解像度によって大きさが変わってくる。
• 印刷された写真などは小さな四角の集合体だが、その四角のこと。
• 色と明るさのデータを持っている。
• ドットは印刷物に使われる。
• ピクセルはPC、スマホなどに使われる。

画素数

• 縦✖️横のピクセル数を掛け算した値
• 例えば、6000✖️4000の画像であれば、2400万画素になる。
• 多いと逆に画質が劣化する。
• 画素数が上がるとファイルサイズが大きくなってしまうので注意。

アクペクト比

• 現在の主流は16:9
• 2005年頃から、ハイビジョンや映画のサイズに近いこのアスペクト比が主流になり始めました。
• それ以前は、テレビのサイズに合わせた4:3が主流でした。

画面解像度

解像度は二つの意味があります。「スマホやモニターの画面を表す画面解像度」と「印刷などに使われる解像度」です。

デバイスごとに決まっているディスプレイに表示される総画素数のことです。（もし、画像制作で解像度を高めに作ったとしても古いデバイスなどで見たさいは表現できないので、はみ出た部分は無視されてしまう。）

800万画素〜1000万画素が人間の目の到達点。なので、4K(3840✖️2160(829万4400画素))で十分。

4:3

VGAなど。2005年以前に主流だったテレビのアスペクト比。

16:9

今の主流のアスペクト比。ただ、Apple製品はなぜか採用していない。

4K

「3840✖️2160(829万4400画素)」のこと。youtubeの画質の設定でもできる。(2160)

フルハイビジョン

4Kではない通常のテレビ。「1920✖️1080」のこと。（207万3600画素）、Blu-rayはこのサイズに対応している。（なお、DVD(720✖️480)をこのサイズで見ようとすると、小さいものを引き伸ばしてみることになるので荒さが目立つようになる。）

Retina

Apple独自のディスプレイ。iPhone4から導入されました。通常の画面の2倍のピクセルを表現できる。画像がめちゃめちゃ綺麗。なので、Web制作において500px✖️500pxに表示させる際も、2倍の1000✖️1000で作らなければならない。

解像度(dpi(dot per inch)、ppi(pixel per inch))

• インチの中に何ドット（ピクセル）入るか。
• 解像度を高くしても画像の容量は変わらない。（容量に関係するのは「サイズ」）
• 高いほど滑らかできめ細やかな画像になります。
• 例えば、1インチに14ピクセルを含む場合は「14ppi」になります。
• 例えば、6000pxの横幅の画像を350dpiとかでプリントした場合は、17.14インチになる。

インチ

1インチは2.54cm

印刷物

300ppi or 350ppi

これが適している。

スマホやPC

ppiの数が多ければ多いほど高画質な画像になります。

72ppi

144ppi

• 高画質の液晶ディスプレイの場合（Retinaディスプレイなど）
• ファイルサイズが大きくなります。