CSSの記事一覧｜あめぞう

CSS 2025.5.23

[CSS]背景マーカー改行

background: linear-gradient(transparent 60%, #63A0DA 0%);
display: inline;
padding: 5px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;

CSS HTML 未分類 2025.1.12

テキスト無限スクロール

<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%);
    }
}

CSS HTML 2023.5.23

スクロールバーが伸びたり縮んだり

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
  }
}

CSS HTML jQuery 2023.5.8

タブ

HTML

<div class="tab-area">
 <div class="tab active">
   タブ１
 </div>
 <div class="tab">
   タブ２
 </div>
 <div class="tab">
   タブ３
 </div>
</div>
<div class="content-area">
 <div class="content show">
   タブ１コンテンツ
 </div>
 <div class="content">
   タブ２コンテンツ
 </div>
 <div class="content">
   タブ３コンテンツ
 </div>
</div>

SCSS

.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;
  }
}

jQuery

$(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");
  });
});

CSS HTML 2022.2.10

リンク下線ホバースライド

<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);
}

CSS HTML 2021.4.23

バラバラサイズの画像をきれいに正方形で一覧表示する

<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);

CSS jQuery 2019.7.20

【CSS】height: 100vh;を確実にする

.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

Webフォントの表示遅延をなくしたい

@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

【CSS】IEでposition: fixed;をやったらガタガタ揺れる場合の対応策

<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>

参考: https://social.msdn.microsoft.com/Forums/ie/ja-JP/9567fc32-016e-48e9-86e2-5fe51fd67402/new-bug-in-ie11-scrolling-positionfixed-backgroundimage-elements-jitters-badly?forum=iewebdevelopment

CSS

[CSS]背景マーカー改行

テキスト無限スクロール

スクロールバーが伸びたり縮んだり

タブ

HTML

SCSS

jQuery

リンク下線ホバースライド

バラバラサイズの画像をきれいに正方形で一覧表示する

文字を縦長横長にする

【CSS】height: 100vh;を確実にする

Webフォントの表示遅延をなくしたい

【CSS】IEでposition: fixed;をやったらガタガタ揺れる場合の対応策

Category

Recent posts

Category