Open12
【フロントエンド編】Sass
まさきちセレクタの適用範囲を設定できる、@scopeの基礎知識
まさきち疑似クラス:is()と:where()
まさきち8の倍数ルール
まさきちmixinでline-heightの余白に対処する
まさきちリセットCSS
CSS -A (more) Modern CSS Reset
リセットCSS 一覧
まさきちモダンCSSまとめ
- コンテナクエリの登場
container-type: inline-size;でコンテナのタイプを指定することで、コンテナの幅（inline-size）に基づいてクエリが適用される。
.product-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
container-type: inline-size; /* コンテナタイプを設定 */
}
/* @containerを使って、クエリを設定 */
/* 幅が500px以上のときのスタイル */
@container (width >= 500px) {
.product-card {
background-color: lightblue; /* 背景色を青に変更 */
flex-basis: calc(33.333% - 10px); /* 幅を変更 */
font-size: initial; /* フォントサイズをリセット */
}
}
- カスケードレイヤー @layer
CSSの詳細度とスタイルの順番を明示的に階層化することが可能。
※ カスケードレイヤーで当てたスタイルは、!importantで指定するより優先度が低い。
/* 1.レイヤー名を定義する */
@layer レイヤー1, レイヤー2;
/* 2.レイヤーを利用する */
@layer レイヤー1 {
/*任意のスタイルを記述する*/
}
@layer レイヤー2 {
/*任意のスタイルを記述する*/
}
まさきちカードレイアウト
カードレイアウトをデザインする際にFlexboxを使用した場合
<ul class="flex">
<li>
<img src="https://placehold.jp/200x200.png" />
<p>
タイトルがはいります。タイトルがはいります。タイトルがはいります。タイトルがはいります。タイトルがはいります。
</p>
</li>
<li>
<img src="https://placehold.jp/200x200.png" />
<p>
タイトルがはいります。タイトルがはいります。タイトルがはいります。タイトルがはいります。タイトルがはいります。
</p>
</li>
</ul>
.flex {
display: flex;
flex-wrap: wrap;
gap: 20px;
> li {
width: calc(100% / 4 - 60px / 4);
outline: solid 1px;
> img {
width: 100%;
}
}
}
- 4列の場合のgapの個数：3個 → 一つのgap値は20pxなので、20px × 3 = 60px。
- gap値（60px）を1行における列数（今回は4）で割る。
- 親要素全体の大きさ（100%）から、4分割分の大きさとgap分の差し引きをした値をwidthに指定する。親要素に対して100%となる。
処理の共通化
@mixin row-items($gap, $count) {
display: flex;
flex-wrap: wrap;
gap: $gap;
> li {
width: calc(100% / $count - ($gap * ($count - 1) / $count));
}
}
.flex {
@include row-items(20px, 4);
> li {
outline: solid 1px;
> img {
width: 100%;
}
}
}
z-indexの値は「無限」と「2147483647」どちらが強いか
z-indexの上限値は「2147483647」
どちらも同じ値の扱いで、calc(infinity)を指定しても上限値の2147483647でカンストする
スタッキングコンテキストについて
z-indexの重なりの順序が必ずしもそのまま当てはまる訳ではなく、親要素にz-index: 1;を足すと、順序が変わってくる。これは親要素にスタッキングコンテキストが生成される為 = CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められる。
まさきち:not()と:last-of-typeの組み合わせ
最後ではない要素にborder-bottomのスタイルを適用する。
li:not(:last-of-type) {
border-bottom: 4px dotted tomato;
}
まさきち末尾の1文字を…で置き換える処理
.sample {
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: N;
overflow: hidden;
}
map-get(map,
Sassにおけるmap処理
$btn-sizes: (
sm: 20px,
md: 30px,
lg: 40px,
);
@each $modifier, $size in $btn-sizes {
.btn--#{$modifier} {
width: $size;
height: $size;
}
}
$breakpoints: (
sm: 768px,
md: 992px,
lg: 1200px,
);
@debug map-get($breakpoints, lg); //1200px
まさきち@use と@forwardの違い