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

前置き

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

画像いろいろ

imgとbackground-imageの使い分け

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

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

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

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

width: 100%;
height: 100%; // もしくはheight: auto;

1 2	width: 100%; height: 100%; // もしくはheight: auto;

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

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

キービジュアル

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

width: 100%;
height: 100vh;

1 2	width: 100%; height: 100vh;

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

background-image: url();
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;

background-image: url();

background-position: center;

background-size: cover;

width: 100%;

height: 100%;

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

<body>
  <section class="top-kv">
    <div class="top-kv-bg">
      <div class="top-kv-bg-img"></div>
    </div>
  </section>
</body>

<body>

</div>

</section>

</body>

.top-kv {
    position: relative;
    width: 100%;
    height: 100vh;
}

.top-kv-bg {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
}

.top-kv-bg-img {
  background-image: url();
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.top-kv {

position: relative;

width: 100%;

height: 100vh;

}

.top-kv-bg {

width: 100%;

height: 100vh;

position: absolute;

top: 0;

}

.top-kv-bg-img {

background-image: url();

background-position: center;

background-size: cover;

width: 100%;

height: 100%;

}

grid-template-rowsの場合

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

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

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

要素の左端がずれる

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

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

赤線のところです。

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

position: relative;
left: -1px;

1 2	position: relative; left: -1px;

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

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

赤線のところです。

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

text-align: justify;

1	text-align: justify;

space-betweenの問題

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

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

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

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

<body>
   <ul class="lists">
        <li class="-list">
          <a class="list-link" href="/">
            <img class="img" src="product.jpg" alt="">
          </a>
        </li>
        // <li></li>が続く
   </ul>
</body>

<body>

</a>

</li>

// <li></li>が続く

</ul>

</body>

.lists {
  display: flex;
  flex-wrap: wrap;
  margin-left: -5px;
  margin-right: -25px;
}

.list {
  max-width: calc((100% - 20px) / 3);
  margin-top: 20px;
  width: 100%;
  padding: 0 5px;
}

.lists {

display: flex;

flex-wrap: wrap;

margin-left: -5px;

margin-right: -25px;

}

.list {

max-width: calc((100% - 20px) / 3);

margin-top: 20px;

width: 100%;

padding: 0 5px;

}

まとめ

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

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