便利なcssテンプレート
2021-7-25
mekoアニメーション
子要素を:hoverで表示する
<p class="over">
マウスオーバーする部分
<p class="pushed">出てくるとこ</p>
</p>
.pushed {
display: none;
}
.over:hover + .over .pushed {
display: block;
}
隣接したものを:hoverで表示する
<p class="over">マウスオーバーする部分</p>
<p class="pushed">出てくるとこ</p>
.pushed {
display: none;
}
.over:hover + .pushed {
display: block;
}
はみ出すコンテンツ
親要素の横幅を超えて最大幅にする
<div class="parent">
<div class="child">
<img src="sample.png">
</div>
</div>
.parent {
margin: 0 auto;
max-width: 900px;
position: relative;
padding-top: 45vw; //(画像の横幅に対する高さの比率x100)vw
}
.child {
position: absolute;
width: 100vw;
margin: 0 calc(50% - 50vw);
top: 0;
}
.child img {
width: 100%;
}
接頭辞 prefix
同じ接頭辞の時にはアスタリスク(*)を使います。
<div class="sample-1">SAMPLE 1</div>
<div class="sample-2">SAMPLE 2</div>
[class*="sample-"] {
height: 20px;
width: 20px;
background: #333;
margin: 5px;
}
idの場合は[id*="sample-"]です。
縦書きにする
<div class="sample">縦書き</div>
.sample {
writing-mode: vertical-rl;
}
蛍光ペン
比率固定
Sarariで画像の縦伸び
<div class="image">
<img src="sample.png" />
</div>
.image {
height: auto;
align-items: flex-start;
}
.image img {
width: 100%;
}
テーブルをレスポンシブにする
おまけ
cssではないけれどstyleに関係するものです。
拡大禁止
<head>
...
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
...
</head>
追従するヘッダー
<header id="header"></header>
header {
height: 50px;
width: 100%;
}
header.follow {
position: fixed;
}
const header = document.getElementById("header");
if (header) {
window.addEventListener("scroll", (e) => {
e.preventDefault();
if (window.pageOffsetY > 50) {
header.classList.add("follow");
} else {
header.classList.remove("follow");
}
})
}
