CSS

Nuxtから離れてHTML/CSS/JavaScriptを書いて気づいたこと③

前置き

前回の続きです🍀
だいぶ困りごとは減ってきたので
よく使う基本的なものを
書いておきます✍️
今回はNuxtあってもなくても
関係ないのですが、
シリーズとしてまとめちゃいます💡


画像いろいろ

imgとbackground-imageの使い分け

imgは読み込みで負荷がかかり、
ページ速度に大きく影響します。
svgにしたり、遅延読み込みをするなど
対策はいくつかありますが、
pictureタグで出し分けると⭕️

ただ画像自体に意味がある場合、
例えば商品画像や地図画像などはimg
それ以外の装飾目的はbackground-image
といった使い分けをすると良さそうです💫
imgタグ(HTML)とbackground-image(CSS)の使い分け
background-imageの使い方、imgタグの使い方【画像の使い分け】


アスペクト比を固定したい

画像の縦横比率を固定するために
この設定が必要です。

つまりimgでも
divbackground-imageでも
親の枠でサイズを指定して、
その中の画像は幅いっぱい
縦はその画像に合わせます。
デザインでheight: 100px;
とか出てても設定しない。

なので親では
max-width, width
pxvw, %で指定をしておき
heightは未指定🍀

キービジュアル

こちらも考え方は同じです。
LPでよく使うやつ💡
親で画面いっぱいにしたいので、
heightvhを使います。

そして装飾になるので
background-imageが一般的。

あとはヘッダーと重なることも多いので
positionを使って
全体を見るとこんな感じ👀

grid-template-rowsの場合

gridで画像を使用している場合、
アスペクト比を考えると、
縦幅を指定しないことになります。

ただgrid-template-rows
値を正確にあてないと
余計な余白ができたり、
足りなくなったりして
デザイン通りにいかなくなってしまいます🌀

そこで使えるのがmin-content⭕️
grid-template-rows: 1fr min-content;
こう指定した場合は下記の図になります。
min-contentで最小の高さにし、
残りを1frにすれば綺麗になります✨
(ちょっとメモ)サイズ指定で使う値について (min-content, repeat( ) )


要素の左端がずれる

通常、要素は左から右に向かって置かれるので
左端は揃うはずですが、物によってずれました。
marginpositionでずらした場合は別ですが。

これはおそらくテキストと画像を縦に並べた場合です。
テキストだけを並べると
微妙に左に少しだけ余白があります。
ただ画像を置くと幅いっぱいになるので
若干のずれを感じました🤔💭

赤線のところです。

テキストを左に寄せて揃えます。


テキストを幅いっぱいにする

テキストが微妙に1文字入らず
改行されて余白が気になる問題🌀

赤線のところです。

これは簡単です🌟
テキスト自体に1文だけ。


space-betweenの問題

flexboxの
justify-content: space-between;
結構つかっていたのですが、
折り返しを前提とする場合は
基本的に使わない方が良いみたいです😵

最後の1行に2つの要素が並んだ時など
ずれて変な表示になります🌀

space-aroundは使った記憶がありませんが、
こちらも同様に設定しない方が良さそうですね。

となると、
これらはもう諦めて、
要素それぞれにpadding設定し
間隔を空けていくしかないですね💡
paddingで全体の左右に余白ができてしまうので、
marginにマイナスを設定して調整🍀
justify-content:space-betweenで折り返し時に両端に配置されちゃう問題


まとめ

CSS慣れてきました🙌✨
Nuxtのコンポーネントで
多少やっていたので
全く訳わからなくて泣きそう…
みたいなことがなかったです!笑
慣れって大事ですよね…❣️

まだtab表示の意識が浅いので、
そちらも別記事にしようかと思います🎈🧸

-CSS
-,

© 2021 aLiz Nuxt