kdcsライブラリー

通常のnew WP_Query内にpost_per_pageで取得するpost数を指定してもダッシュボード>設定>表示設定で指定した表示数になってしまうので以下の記述で対応。

<?php
$query = new WP_Query(
    $args = array(
        'post_type' => 'post',
        'post_per_page' => 3,
    )
);
$query->post_count = 3;
if ( $query->post_count > count( $query->posts ) ) :
	$query->post_count = count( $query->posts );
endif; ?>

<?php if($query -> have_posts()): while($query -> have_posts()): $query -> the_post(); ?>
// ループさせる内容
<?php else : ?>
// 記事が無い場合の記述
<?php endif; wp_reset_postdata(); ?>

ios15のsafari15.4からcssの「svh」が使用できるようになり、画面に表示されたアドレスバーを除いたビューポートの高さで表示できるようになっている。
「dvh」を使用するとアドレスバー有り無しでの切り替えも自動で行う。

ios14以前では「svh」が使えないためjavascriptを使って対応する

css

.hogehoge {
  height: 100vh; /* CSS変数をサポートしていないブラウザ用のフォールバック */
  height: calc(var(--vh, 1vh) * 100);
}

javascript

const setVh = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
};

window.addEventListener('load', setVh);
window.addEventListener('resize', setVh);

javascript 別パターン

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

「-webkit-fill-available」を使ってcssのみで対応する方法もあるが、ネストされた要素には適用されないなどの問題もあるのであまり実用的ではない。

html{
  height: -webkit-fill-available;
}
body{
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

@supports (-webkit-touch-callout: none) {
html{
  height: -webkit-fill-available;
}
 
  body {
    min-height: 100vh;
    height: -webkit-fill-available;
  }
}

cssのtransitionでopacityを変化させるとAndroidのChiromeでちらつきが発生する対応策

will-changeを使用
「will-change プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。」

will-change: opacity;
will-change: transform;

※will-changeを多用するとページのパフォーマンス低下につながります。

色の変化だけならopacityを使用せず、background-colorをrgbaで指定する方がよい

その他の対処法

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

要素内で文字数がバラバラな場合、高さが揃わず見た目が悪いので、一番文字数が多い要素の高さに合わせる方法

最下部、「matchHeight」に高さを揃えたい要素のクラスを指定

function matchHeight(targetElement) {
  const targetElements = document.querySelectorAll(targetElement)

  if (targetElements.length > 1) {
    let heightArray = []
    targetElements.forEach((element) => {
      const height = element.clientHeight
      heightArray.push(height)
    })
    const maxHeight = Math.max(...heightArray)

    targetElements.forEach((column) => {
      column.style.height = maxHeight + 'px'
    })
  }
}
window.addEventListener('load', () => {
  matchHeight('.thumText h3', '.thumText p')
})

文字列を分割して1文字ずつcssアニメーションで動かしたい場合、javascriptを使用してspanタグで1文字ずつ囲む方法。
文字列にスペースがあるときは、そのままスペースを出力させる。

$.fn.letterSpan = function() {

$(this).each(function() {
    var text = $.trim(this.textContent),
        html = "";

    text.split("").forEach(function(v) {
    if (v == ' ') {
        html += "<span> </span>";
    } else {
        html += "<span>" + v + "</span>";
      }
    });

    this.innerHTML = html;
    });
};

$(".hogehoge").letterSpan();
$(".popupText").letterSpan();
$("#dummy h6").letterSpan();