諸々最初に設定
1. cssをreset
各タグに個別対応する手間を省き、表現を一元化
A (more) Modern CSS Resetを改造して「reset.css」を先頭に設置、あるいはcssファイルの先頭に配置
Header内に<link href=”reset.css” rel=”stylesheet” />と記述
入れておくと便利なCSSセレクタ
1.margin、padding などの計算が不要に
*, ::after, ::before { box-sizing: border-box; }
2.purecssでスクロール
html {
scroll-behavior: smooth;
/* scroll-padding-top: 100px; :MENUが100px固定*/
}
3.文字詰め
.mojitume {
font-family: 'Gothic MB101 medium', sans-serif;
font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
-moz-font-feature-settings: "palt";
}
※メイリオ・Noto Sans・MS ゴシック・MS 明朝など、OTF以外では使えない2. @media
スタイルシートを適用する条件を指定。pc / tablet / smartphoneで区分け
480pxより小さい
@media screen and (max-width: 480px) {}
737pxより大きい
@media print,screen and (min-width: 737px) {}
481px〜768px
@media screen and (min-width: 481px) and (max-width: 768px) {}
@media screen and (481px〜768px < =width < 768px) {}
ホバーアクションがある場合
@media (any-hover: hover) {}3. リンク
a.d1 {
color: red !important;
}a.d2 {
text-decoration-color: purple;
text-decoration-line: underline;
text-underline-offset: 5px;
}
4. image
レスポンシブ切り替え
viewprot あるいは container レイアウトにおける pc / tablet / smart phoneの変更
.tabletは状況によって.spとまとめる
.pc {
display: inline-block;
}
.sp, .tablet {
display: none;
}
@media screen and (max-width: 768px) {
.pc {
display: none;
}
.sp {
display: inline-block;
}
}
@media screen and (max-width: 435px) {
.tablet {
display: inline-block;
}
}画像サイズを100%に
baseで設定
vertical-align: bottom;
画像の下にできる隙間を隙間を防ぐ
img{
max-width: 100%;
heigth: auto;
border: none;
vertical-align: bottom;
}picture要素
サイズで変更
1280px以上でdummy-c.jpg
768px以上でdummy-b.jpg
上記以外でdummy-a.jpg
種類で変更
サイズだけではなくsvgなどの種類にも対応
<picture>
<source srcset="dummy-c.jpg" media="(min-width: 1280px)" />
<source srcset="dummy-b.jpg" media="(min-width: 768px)" />
<img src="dummy-a.jpg" alt="代替テキスト" />
</picture><picture>
<source srcset="dummy.svg" type="image/svg+xml" />
<source srcset="dummy.png" type="image/png" />
<img src="dummy.gif" alt="代替テキスト" />
</picture>
イメージ均一化
サイズの違うイメージを16 : 9で均一
親 : display: grid;
grid-template-columns: repeat(3, 1fr);
.sam21 img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: contain;
}
4. ビューポートの設定 タブレット、モバイル用 UI
高さの単位：svh / lvh / dvh / vh
スモールビューポート / ラージビューポート
ページスクロールで画面表示エリアが変化する時、アドレス表示で狭い / アドレス表示なしで広い
ヒーローイメージを端末高と同じサイズ : svh
.hero {
height: 100svh;
}
ラージビューポート高と同じサイズ : lvh
.hero {
height: 100lvh;
}
画面状況に応じたビューポートサイズに切替わり : dvh
.hero {
height: 100dvh;
}
ユーザーが利用しているOSやブラウザのデフォルトサイズ : vh
.hero {
height: 100vh;
}幅の単位：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
幅 1000px / 高 500pxのwindow
lvmin / lvmax
lvmin : lvh or lvw 小さい数値 例：font-size: 2lvmin の場合はfont-size:10px
lvmax：lvh or lvw 大きい数値 例：font-size: 2lvmax の場合はfont-size:20px
dvmin /dvmax
dvmin : dvh or dvw 小さい数値
dvmax : dvh or dvw 大きい数値
vmin / vmax
vmin : vh or vw 小さい数値
vmax : vh or vw 大きい数値
幅の単位：vi / vb
- vi：ルート要素のインライン方向（横）に最初に含まれるブロックの大きさの1%を定義した相対単位
- vb：ルート要素のブロック方向（縦）に最初に含まれるブロックの大きさの1%を定義した相対単位
幅 1000px / 高 500px
.vi {
width: 1vi; // width:5px
}
.vb {
width: 1vb; // width:10px
}幅 2000px / 高 500px
.vi {
width: 100vi; // width:2000px
}
.vb {
width: 100vb; // width:500px
}