宣言

テキストを折り返しさせない

.example {
    white-space: nowrap;
}

テキスト1行で表示幅に合わせて…で省略

.example {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 00px;
}

表示幅に合わせて指定します。

左右反転

.example {
    transform: scale(-1, 1);
}

セレクタ

最後以外を指定

li:not(:last-child) {
    Property: Property value
}

2行目以降も中点分のスペースを確保するため、CSSで調整を行います。

p.example {
padding-left: 1em;
text-indent: -1em;
}

インデントを適用させたい部分に上記2行のCSSを記述すると2行目以降の行頭に1文字分の空白ができます。

レスポンシブなサイトでは必須な設定ですね。

この記事が役に立ちそうな方

・WordPressのCSSをシンプルに読み込んでいるテーマを使っている
・自作テーマ等でCSS読み込み部分を直接記述している
・クライアントのサイトをWordPressで制作している

<link rel="stylesheet" type="text/css" media="screen" href="<?php $filepath='/css/ファイル名.css'; echo esc_url( get_theme_file_uri( $filepath )); echo '?='.date('YmdHi',filemtime( get_theme_file_path( $filepath ))); ?>">

CSSを読み込んでいるところを上記PHPコードに変更すると、CSSファイルが更新される度にCSSファイルのファイルパス末尾に新たなクエリが付与され過去のキャッシュを参照しなくなります。

プラグイン等でキャッシュを生成し読み込み速度を改善するものを入れられていた場合は、
CSSファイル更新後、都度管理画面からキャッシュを削除する必要はあります。

しかしある時、「ウェブフォント読み込み中のテキストの表示」という診断とその症状に悩まされる事になるのです…

それはローディングアニメーションを作っていた時でした。
JSでローディング画面をフェードアウトさせるタイミングを調整するため、
ブラウザの再読み込みを何度か行っていると、Webフォントを使っているテキストが表示されずにローディングアニメーションが終わってしまうのです。
なんだこれ！？とても焦りました。
すぐにGoogle先生に助けを求め、Webフォントが読み込まれるまでにテキストを表示するという設定を行えば解決できると分かりました。

Ensure text remains visible during webfont load  |  Lighthouse  |  Chrome for Developers

Learn how to use the font-display API to make sure your web page text will always be visible to your users.

developer.chrome.com

先生！いつもありがとうございます！

解決方法

とても簡単です。
CSSに1行追記するだけスピード解決です。

font-display: swap;

上記をCSSファイルでWebフォントを読み込ませている「@font-face」内に追記するのです。

追記例

@font-face {
  font-family: 'フォント名';
  src: ローカル・Webフォントパス指定;
  font-display: swap;
}

再度「PageSpeed Insights」を使って確認すると解決できているかと思います。

Google Fonts の場合

こちらも簡単で、Google Fontsを読み込んでいるURLの末尾に「&display=swap」を追記するだけ。

追記例

<link href="https://fonts.googleapis.com/css?family=フォント名:400,700&display=swap" rel="stylesheet">

まとめ

さて、この方法でページ読み込み時にフォントが表示されない問題は解決できたのですが、ローディング中のテキストは一瞬システムフォントが表示されてしまいます。。
これは美しくない…
結局、ローディング画面に表示するテキストは画像にして対応することと相成りました。

ページ読み込み時に一瞬システムフォントが表示されてWebフォントに切り替わると「ガクッ！」とする現象（このブログがそうですね）があるので、これが気になる方はページ読み込み時にローディングアニメーションを入れたりすると良いですね。

最近はいろいろなWebフォントが使えるようになってとっても便利になりました。
Webフォントって良いですね。