kdcsライブラリー

ページがレスポンシブ対応の場合、フォントサイズも可変させたい場合がある。
cssのclamp関数を使うと画面幅に応じてフォントサイズを可変させることができる

font-size: clamp(最小値, 基準値, 最大値);

基準値はvwでフォントサイズを指定し、その計算方法はこちら
例：コンテンツの幅が1200pxの時にフォントサイズを16pxで表示させる

vwの計算方法
（基準となる文字サイズ）÷（基準となる幅）× 100

16 ÷ 1200 × 100 = 1.33...

この基準値に合わせてフォントサイズの最小値13px、最大値16pxとすると以下の通り

font-size: clamp(13px, 1.33vw, 16px);

min() max() clamp()のサポートブラウザを見る

WordPressでadvanced custom fieldsを使う場合、投稿編集画面に表示される入力フィールドの幅が100%指定で見た目が悪い。
この入力フィールドの幅をcssでカスタマイズする方法。

advanced custom fieldsのバージョンは6.3
カスタマイズ用のcssファイルを作成し、functions.phpで特定の投稿ポストの編集時に読み込ませるcssを指定する。

以下は特定のカスタム投稿タイプ用にcssフォルダ内にadmin-style.cssを作成し「your_custom_post_type」にカスタム投稿タイプを指定としている。
functions.php

function custom_admin_styles() {
    global $post_type;
    if ($post_type === 'your_custom_post_type') { // カスタム投稿タイプを指定
        wp_enqueue_style('custom-admin-css', get_template_directory_uri() . '/css/admin-style.css');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_styles');

admin-style.cssの記述
入力フィールドのdata-nameにフィールド名が入っているのでそれぞれ入力し、widthを!important指定する

/* inputの場合 */
div[data-name="フィールド名"] input {
  width: 300px !important;
}
/* selectの場合 */
div[data-name="フィールド名"] select {
  width: 300px !important;
}

cssファイルを作らずにfunctions.phpだけで行う方法

function custom_admin_css() {
    global $post_type;
    if ($post_type === 'your_custom_post_type') {
        echo '<style>
            #poststuff .acf-field { background-color: #f9f9f9; padding: 10px; }
            #post-body-content { max-width: 800px; }
        </style>';
    }
}
add_action('admin_head', 'custom_admin_css');

(続きを読む…)

iphone（ios14.8）で確認。
横向きにするとフォントサイズが大きくなり、縦向きに戻しても文字が大きいままになってしまう現象があった。

cssで自動調整を無効にできる

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

※値を「none」ではなく「100%」にする

cssとjavascript「infiniteslide」で無限ループスライダーを作成したがpcとspどちらとも左右動作できるパターン無しという結果。

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