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

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】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】蛍光マーカーを引きたい

50%は太さ、
rgbはカラー、#123abcのように書いてももちろんOK、
最後の0%はお約束でそのまま。

background: -webkit-linear-gradient(transparent 50%, rgb(253,236,237) 0%);
background: -o-linear-gradient(transparent 50%, rgb(253,236,237) 0%);
background: linear-gradient(transparent 50%, rgb(253,236,237) 0%);