CSSメモ　レスポンシブ　

確認するサイズ

最大サイズ：1920px
最小サイズ：320px
どこまで担保するか確認は必要

innerの指定

max-width

・広げた時にめいっぱい広がってほしい時　
　max-width:100%
・広げた時に指定した余白分(ex. 15px)を残して広がってほしい時
　max-width:calc(100% - 15px * 2 )
・最大コンテンツ幅(ex. 1280px)を指定する時
 max-width:1280px
・最大コンテンツ幅(ex. 1280px)に余白(ex. 15px)をつけたい時
max-width:calc(1280px ＋ 15px * 2 )

innerの中身を中央揃えする時

margin-left:auto
margin-right:auto
も追加で記述

---

画像

imgタグとbackground-imageプロパティの違い

HTMLのimgタグ：
文書の内容上、必要不可欠な画像で、その画像がないと文書の意味が通じなくなる場合に指定する。

CSSのbackground-imageプロパティ：
装飾目的に使用する画像で、その画像が仮になくても文書の意味を損なわない場合に指定する。

画像に対するCSSの指定する場所

img要素にはなるべくサイズ指定をせず、imgを<p>や<figure>、<div>、<li>、<dt>、<dd>などのblock要素の囲ってそこにサイズ指定。
ただし、img タグと親要素タグにmax-width：100％　
　　　　imgタグにheigth: auto　 vertical-align: bottomを指定し、
画面サイズを超えた場合でも最大幅で表示されるようにする
★imgタグにはリセットCSSで設定されている
★pictureタグを使っている場合はCSSが効かないので直接imgタグに指定する

画像の中央揃え

親要素ではなくimgタグにwidth指定した時：
親要素にtext-aline:centerを指定することで真ん中になる

親要素にwidth指定した時：
親要素にtext-aline:centerを指定しても真ん中にはならない
margin-left:auto  margin-right:autoで真ん中になる

画像のトリミング

imgタグの親要素タグに対してwidthやheightを指定する。
imgタグに対してobject-fitプロパティーを指定する。

object-fit：cover 縦横比はそのままで画像の中央を基準にトリミングされる
object-fit：cotain 縦横比はそのままで縦と横の大きい方だけが表示枠にフィットするよう画像サイズが調整される

---

各コンテンツの幅指定

比率で配置を決めレスポンシブ時に崩れないようにする

最大コンテンツ幅を決めその中での割合を決める
 
２つのコンテンツが入っているタグに
コンテンツ幅を決め（max-width:920px)、
2つのコンテンツの余白（gap: 50px;）を指定し
display:flexで横並びにする。
１つ目のコンテンツの親要素にwidth: calc(350px / 920px * 100%);
2つ目のコンテンツの親要素にwidth: calc(520px / 920px * 100%);
★imgタグの場合はimgタグに要素の大きさをwidthで指定

---

flex-growでサイズを決める

画像はwidthでサイズを固定し、
コンテンツのサイズをレスポンシブ時に小さくする

・画像にwidth指定とflex-shrink: 0;
・gap指定
・コンテンツにflex-grow：０；
この指定により、画像のサイズ・gap幅の残りがコンテンツ幅になる