テキスト・文字を左右反転表示する

CSS,CSS テキスト 基本

文字やテキストを左右反転表示するCSSのサンプルコードです。 See the Pen CSS | Flip the text horizontally by yochans (@yochans) on CodePen. テキスト・文字を左右 ...

日本語に対応したGoogleフォントの表示サンプル一覧

2021-02-05CSS,CSS テキスト 基本

日本語に対応しているGoogleフォントの表示サンプル一覧です。 フォント別に@importと、フォントファミリー指定のCSSも紹介しています。 最終更新日 2021/2/4 See the Pen CSS | How to use Goo ...

Googleフォントの使い方

CSS,CSS テキスト 基本

See the Pen CSS | Adjust the size and position of the checkbox by yochans (@yochans) on CodePen. Googleフォントを選択する Browse ...

overflow-wrapとword-breakの全パターン比較

CSS,CSS テキスト 基本

overflow-wrapとword-breakの全パターン比較 CSSで自動折り返し処理を行うoverflow-wrapとword-breakの全パターンを日本語、英文での比較を紹介しています。 以下に比較用ページを用意しました。可変幅な ...

テキストの字間と行間を変更する方法

2021-02-09CSS,CSS テキスト 基本

CSSで指定したフォントサイズが大きくなると、どうしてもデフォルトのままでは表示される字間と行間で納得いく形にならなくなってきます。 そんな時に「letter-spacing」で字間、「line-height」で行間を調節・変更する方法を紹 ...

テキストに合わせて画像を切り抜く方法

CSS,CSS テキスト 基本

CSSだけで画像をテキストに合わせて切り抜く方法の紹介です。 この記事では、テキストの文字色を透過して「background-clip」で「text」を指定する方法と「mix-blend-mode」で「screen」を指定して画像を切り抜く ...

要素のサイズでテキストを丸めて末尾に3点リーダーを付与する方法

2021-02-08CSS,CSS テキスト 基本

CSSだけで要素のサイズに合わせてテキストを丸めて(省略して)末尾に3点リーダーを付与する方法の紹介です。 テキストを丸める処理は、head内のdescriptionに使う事も多くPHPの出力で行うケースもありますが、コンテンツ要素内であれ ...

文字毎・行ごとにテキストの色を変える

2020-09-30CSS,CSS テキスト 基本

ピュアなCSSの機能では要素に対してはn番目でのスタイル割り当てができるものの、n文字目やn行目の指定してスタイルを割り当てる事はできません。 通常CSSだけでn文字目、n行目毎にスタイルを当てる場合はspanタグなどを使って要素として反映 ...