background: linear-gradient(transparent 60%, #63A0DA 0%);
display: inline;
padding: 5px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
CSS 2025.5.23
CSS 2025.5.23
background: linear-gradient(transparent 60%, #63A0DA 0%);
display: inline;
padding: 5px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
<section class="scroll">
<div class="first">
テキスト1 テキスト2 テキスト3 テキスト4 テキスト5
</div>
<div class="last">
テキスト1 テキスト2 テキスト3 テキスト4 テキスト5
</div>
</section>
.scroll {
display: flex;
overflow: hidden;
}
.scroll .first,
.scroll .last {
flex-shrink: 0;
width: auto;
height: auto;
display: inline-block;
text-wrap: nowrap;
white-space: nowrap;
}
.scroll .first {
animation: ani-first 10s infinite linear 0.1s both;
}
.scroll .last {
animation: ani-last 10s infinite linear 0.1s both;
}
@keyframes ani-first {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes ani-last {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
HTML
<div class="scroll">
<a href="#about">
SCROLL
</a>
</div>
<!-- /.scroll -->
SCSS
.scroll {
bottom: 180px;
font-family: 'Volkhov', serif;
font-size: 13px;
letter-spacing: .2em;
position: absolute;
right: 80px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: sideways;
a {
&:before,
&:after {
content: "";
display: block;
height: 150px;
width: 1px;
position: absolute;
right: 50%;
top: 120%;
transform-origin: top;
background-color: rgba(0, 0, 0, 0.5);
}
&:before {
background-color: rgba(0, 0, 0, 0.1);
}
&:after {
transform: scaleY(0);
animation: anim-scroll 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
}
}
@keyframes anim-scroll {
0% {
transform: scaleY(0)
}
35% {
transform: scaleY(1);
transform-origin: top
}
40% {
transform-origin: bottom
}
50% {
transform: scaleY(1)
}
85% {
transform: scaleY(0);
transform-origin: bottom
}
100% {
transform-origin: top
}
}
<div class="tab-area">
<div class="tab active">
タブ1
</div>
<div class="tab">
タブ2
</div>
<div class="tab">
タブ3
</div>
</div>
<div class="content-area">
<div class="content show">
タブ1コンテンツ
</div>
<div class="content">
タブ2コンテンツ
</div>
<div class="content">
タブ3コンテンツ
</div>
</div>
.tab-area {
display: flex;
.tab {
align-items: center;
border: 1px solid #000;
color: #000;
cursor: pointer;
display: flex;
justify-content: center;
}
.tab.active {
background-color: #000;
color: #fff;
}
}
.content-area {
.content {
display: none;
}
.content.show {
display: block;
}
}
$(function () {
let tabs = $(".tab");
$(".tab").on("click", function () {
$(".active").removeClass("active");
$(this).addClass("active");
const index = tabs.index(this);
$(".content").removeClass("show").eq(index).addClass("show");
});
});
<div class="link"> <a href="#"> <div class="text">LINK</div> <div class="line"></div> </a> </div>
.link a { color: rgba(77,77,77,1); display: block; font-size: 14px; letter-spacing: .15em; overflow: hidden; padding: 0 0 8px; position: relative; width: fit-content; } .link a .line { background-color: rgba(77,77,77,.2); bottom: 0; height: 1px; left: 0; position: absolute; width: 100%; } .link a .line:before { -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1); transition: -webkit-transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1); -o-transition: transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1); transition: transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1); transition: transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1), -webkit-transform 0.6s cubic-bezier(0.45, 0.25, 0.15, 1); -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); content: ''; display: block; height: 100%; width: 100%; top: 0; left: 0; background-color: rgba(77,77,77,1); -webkit-transform: scale(0,1); -ms-transform: scale(0,1); transform: scale(0,1); } .link a:hover .line:before { -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }
<div class="group"> <div class"image"><img src="画像ファイル"></div> <div class"image"><img src="画像ファイル"></div> <div class"image"><img src="画像ファイル"></div> </div>
.group { display: flex; } .group .image { position: relative; } .group .image::before { content: ''; display: block; padding-top: 100%; } .group .image img { border: 1px solid rgba(0,0,0,1); height: 100%; position: absolute; top: 0; width: 100%; } .group .image img { background: rgba(255,255,255,1); object-fit: contain; }
CSS 2020.8.7
display: inline-block; transform: scale(0.8, 1);
.my-element { min-height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */ min-height: calc(var(--vh, 1vh) * 100); }
const setFillHeight = () => { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } let vw = window.innerWidth; window.addEventListener('resize', () => { if (vw === window.innerWidth) { // 画面の横幅にサイズ変動がないので処理を終える return; } // 画面の横幅のサイズ変動があった時のみ高さを再計算する vw = window.innerWidth; setFillHeight(); }); // 初期化 setFillHeight();
CSS 2019.5.12
@font-faceに、font-display: swap;を書く。
@font-face {
font-family: ‘font’;
src: url(‘font.woff’) format(‘woff’);
font-display: swap;
}
Google Fontsの場合はパラメータを使用できます。
https://fonts.googleapis.com/css?family=Lato&display=swap
CSS 2017.9.26
<script> if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) { $('body').on("mousewheel", function () { event.preventDefault(); var wd = event.wheelDelta; var csp = window.pageYOffset; window.scrollTo(0, csp - wd); }); } </script>