width単位

指定色々

.w_wrap {
  & .w_stretch {
    width: stretch;
  }
  & .w_p100 {
    width: 100%;
  }
  & .w_p100_calc {
    width: calc(100% - 60px - 2rem);
  }
  & .w_auto {
    width: auto;
  }
  & .w_inherit {
    width: inherit;
  }
  & .w_fit-content {
    width: fit-content;
  }
  & .w_max-content {
    width: max-content;
    background: #aca;
  }
  & .w_min-content {
    width: min-content;
    background: #aca;
  }
  & .w_clamp {
    width: clamp(200px, 50%, 600px);
    background: #caa;
  }
  & .w_max {
    width: max(60%, 600px);
    background: #caa;
  }
  & .w_min {
    width: min(520px, 50%);
    background: #caa;
  }
}

ネガディブマージン

• 基本は子要素に margin-inline: calc(50% – 50vw);
• 親要素にdisplay: blockを指定、display:gridなどは表示がおかしくなる（safari）
• ブラウザ下部に横スクロールバーを出さない場合はbodyにoverflow-x: hiddenを追加

.over {
  display: block;
  margin-inline: auto;

  & div {
    padding: 1rem;
    border-right: 10px solid #ccc;
    border-left: 10px solid #aaa;
    transform: translateX(190px);
    @media screen and (max-width: 1200px) {
      transform: translateX(160px);
    }
    @media screen and (max-width: 992px) {
      transform: translateX(0);
    }
    &:not(:first-of-type) {
      margin-top: 1em;
    }
  }

  & .over_1 {
    margin-inline: calc(50% - 50vw);
  }

  & .over_2 {
    margin-inline: calc(50% - 50vw);
    width: calc(50% + 50vw);
  }

  & .over_3 {
    flex: 1;
    margin-right: calc(50% - 50vw);
  }

  & .over_4 {
    padding-inline: calc(50vw - 50%);
    margin-inline: calc(50% - 50vw);
  }

  & .over_5 {
    position: relative;
    left: 45%;
    width: 90vw;
    transform: translateX(-45%);
  }

  & .over_6 {
    margin-inline: 0 calc(50% - 50vw);
  }
}

ビューポートの設定 : タブレット、モバイル用 UIの単位

• vw : Viewport Width
• vh : Viewport Height
• vmin : Viewport 縦横で小さい単位
• vmax : Viewport 縦横で大きい単位
• lvw, lvh, lvmin, lvmax : Large Viewport
• svw, svh, svmin, svmax : Small Viewport
• dvw, dvh, dvmin, dvmax : Dynamic Viewport ページスクロールで画面表示エリアが変化する（アドレス表示で狭い / 表示なしで広い）
• vw, vh, vmin, vmax : DefaultのViewport

高さの単位：svh / lvh / dvh / vh

svh : ヒーローエリアを端末高を基準
.hero {
  height: 100svh; 
}

lvh : ラージビューポート高を基準（1画面を見るにはスクロールが必要な場合あり）
.hero {
  height: 100lvh; 
}

dvh : 画面状況に応じたビューポートサイズに切替わり
.hero {
  height: 100dvh; 
}

vh : ユーザーが利用しているOSやブラウザのデフォルトサイズ
.hero {
  height: 100vh; 
}

最適なのは : 自動で切り替わるdvh。height: 100dvh;

幅の単位：svw / lvw / dvw / vw

幅はビューポートサイズが変わることがあまりないので、どれを指定しても同じ

• svw : Small Viewport Width : スモールビューポートの幅を基準
• lvw : Large Viewport Width : ラージビューポートの幅を基準
• dvw : Dynamic Viewport Width : 画面状況に応じたビューポートサイズに切替わり
• vh : ユーザーが利用しているOSやブラウザのデフォルトサイズ

比較単位：svmin / svmax / lvmin / lvmax / dvmin / dvmax / vmin / vmax

svmin : Small viewportのwidthとheightの小さい方が基準
svmax : Small viewportのwidthとheightの大きい方が基準

lvmin : Large viewportのwidthとheightの小さい方が基準
lvmax : Large viewportのwidthとheightの大きい方が基準

lvmin : lvh or lvw 小さい数値
lvmax：lvh or lvw 大きい数値

dvmin : dvh or dvw 小さい数値
dvmax : dvh or dvw 大きい数値

vmin : vh or vw 小さい数値
vmax : vh or vw 大きい数値

幅の単位：vi / vb

• vi：ルート要素のインライン方向（横）に最初に含まれるブロックの大きさの1%を定義した相対単位
• vb：ルート要素のブロック方向（縦）に最初に含まれるブロックの大きさの1%を定義した相対単位

幅 1000px / 高 500px
.vi {
  width: 1vi; // width:10px
}
.vb {
  width: 1vb; // width:5px
}

幅 2000px / 高 500px
.vi {
  width: 100vi; // width:2000px
}
.vb {
  width: 100vb; // width:500px
}