CSS テキスト基本

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

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

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

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

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

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

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

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

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