CSSのtransform:scale()とテキストを並べてみたときの感想

scale()とテキストを並べたときの使用感

文字とscale()した画像を並べてみる

たまに文字と画像を並べたいことがあります。今回は、scale()の使用感を確認してみました。

テキストとimgタグを並べる

テキストとimgタグ

divの中に、テキストとimgタグを置いた例です。

画像は100×100。行高は108px位。ディセンダーの幅分行高が高くなっていますね。

imgタグにvertical-align: middle などを当てると画像下の隙間は消えます。

transform: scale(0.3) を当てる。

.test1 {
    transform: scale(0.3);
    vertical-align: middle;
}
<div class="div1">Helllo<img src="./cat2-blue.png" alt="cat" class="test1" /></div>

imgタグにtransform: scale(0.3)を当てました。

フォントサイズが16pxです。縮小した画像とのバランスはそこそこでしょうか。

行高が高いですね。scale前の画像サイズがそのまま生きています。

scaleした後の画像でレイアウトするのは難しい印象。

この場面ではwidth:20px;を指定したほうが簡単ですが、いまはscale()の使用感の調査です。

imgタグをabsoluteにして文字と並べる。相対参照。

.test2 {
    position: absolute;
    top: -41px;
    left: 30px;
    transform: scale(0.3);
}

我々は、画像を通常のレイアウトフローから外せば、高さが消失することを知っています。

position: absolute;を指定するがよいですね。親コンテナにはrelativeを設置します。

良き結果ですね。並べることができました。

画像の中心は100pxのときのcenterですので、思ったよりtop値をマイナス方向に引っ張りますね。

width,heightで拡縮

.test3 {
    height: 1.2rem;
    margin-left: 8px;
    vertical-align: -10%;
}

一応、scaleじゃなくて、width、heightの確認もしてみましょう。小さい例と大きい例を2つ用意しました。

サイズの指定はheightとwidthです。片方だけでもアスペクト比が保持できます。

縦位置の調整はvertical-alignの「%」指定が便利と感じます。

良き結果ですね。簡単です。

::afterの中のcontentで画像をscale()してみる。Scale to content in ::after

ここから少し面倒だった

::afterの中のcontentで画像を表示してみる。

after領域は発生元要素の領域です。規定はinline要素です。

親要素高さが108pxくらいになっているのは、ディセンダ（descender）高さが含まれていると推測。

（これを排除するには、::afterにinline-block, height:100pxを当てて、vertical-align:bottom位置調整。）

::after領域にも背景色

::afterの領域はテキストと同じ幅でその延長と解ります。contentの画像がはみ出しています。

afterでscale()使用

scaleで縮小。scale()前の領域の影響で行高さはそのままです。

scale()の効果は、inline-blockにしないとでません。

inline要素はscale()できません。

widthで縮小。

vertical-align:-65px;width:40px;height:40px;

上部にできてしまうpaddingが気になりますね。

少しごちゃごちゃしてきたかな？

positionでレイアウト分離

さて、scale()だけだと相性が悪そうなので、positionでレイアウトフローを分離してみます。

left, topはscale()前のサイズの大きさを意識すること。

結果良きですね。

scale()した画像と文字列を並べる時の感想

• 制約なく単純に並べるだけなら、width、heightを使用するのが適切でしょう。
• scale()で拡縮した結果でデザインする場合、scale()前の領域サイズが生きているので、positionを使用して一旦レイアウトを分離してから調整するのが良きかも。
• scale()の使いどころは、マウスがhoverしたときに少し拡大するなどのinteractive性かなと思います。

雑記

• 画像はサイズを調整済みが良き。いつもそうとは限りませんけどね。
• 画像と文字列と並べたときunderlineに並ぶことを覚える。
• inline要素は文字という認識を忘れずに。
• 高さにはディセンダーが含まれている。
• 画像下部の隙間は、vertical-alignの調整で削除可能。
• contentの画像にはwidthが効きません。規定がinlineだからですね。
• しかし、inline-blockにしてもだめですね。ただ、その背景領域に対しては影響があるみたいです。背景色のサイズ変化で確認できます。
• width,heightを指定すると、contentの背景領域に効くが、url()で指定した画像には影響せず。
• widthがcontentの描画物に影響しないのはバグだね。嫌、置換領域なのでこんな感じなのかな？
• scale()を指定すると、contentの画像と背景領域に影響するが、サイズには影響しない。
• scale()を指定すると、描画物に影響する。見た目のみ変化する。確保したエリアはそのまま。
• contentでscale()込みのレイアウトは、postionで調整するのが良きかも。
• 突き詰めるとContentで示した画像に対するサイズ調整はちょっと難しいと思ったほうがいいかな。
• contentで表示されている画像は虚ろな感じ。触れない。
• まぁでもposition:absoluteで分離すればなんとか。色々ですね。
• contentの場合は、background-color:url()のほうがいいですね。
• 新しいフォントを作るという発想も面白い。FontAwesomeとかありますよね。

おわり