CSSの文字装飾：フォント、サイズ、太さ、下線、配置
ホーム CSS文字装飾プレイグラウンド
CSSの文字装飾：フォント、サイズ、太字、下線、中央揃え | We.Inc
CSSの文字スタイルを1つのライブプレイグラウンドで確認できます。フォントの種類、px・rem・clamp()によるサイズ、文字の太さ、下線のスタイル、配置、行の高さ、文字間隔を、Tailwindのクラスと一緒に調整できます。
CSSで文字を装飾するときに使うプロパティは、ほんの数種類です。書体はフォントファミリーの指定で選び、大きさはフォントサイズで決めます（単位にはルート基準のremがおすすめです）。太字にするには太さを700に、下線を付けるにはテキストの装飾を、中央揃えにするにはテキストの配置をcenterにします。行の間隔と文字の間隔は、行の高さと字間の指定で調整します。下のプレイグラウンドでは、これらのどれでも自由に変更して、できあがったCSSをそのままコピーできます。
特によく使うプロパティ
下線 text-decoration: underline 文字を中央に揃える text-align: center 文字を大きくする font-size: 1.25rem 行と行の間隔を広げる line-height: 1.6 leading-relaxed (1.625) 6つの別々のリファレンスページを何度も行き来する代わりに、このプレイグラウンド1つでフォント、サイズ、太さ、スタイル、下線の細かな設定、配置、行の高さ、文字間隔をまとめて扱えます。設定を変えるたびに、それに対応するCSSとTailwindのクラスがその場で書き出されます。さらに、文字の中央揃え、フォントスタック、ウェブフォントの読み込みについては、実際に動作を確認したレシピも用意しています。
まず、プレイグラウンドに自分の文章を入力します。サンプルの文章をそのまま使ってもかまいません。 次に、フォント、サイズの単位、太さ、装飾、間隔の各設定を変更します。変更するとすぐに、プレビューとCSSの両方が更新されます。 できあがったCSSのブロックをコピーするか、同じ設定に対応するTailwindのクラスをコピーして使います。 文字の中央揃え、フォントスタック、独自フォントの読み込みについては、ページの下のほうにあるレシピを参考にしてください。 本文の文字は、大きさを16から18ピクセル程度にし、行の高さは1.5から1.7、1行あたりおよそ60から75文字にすると、最も読みやすくなります。 フォントサイズをルート基準の単位で指定しておくと、読み手のブラウザーの設定に合わせて大きさが変わります。画面の幅に合わせて大きくしたい見出しには、範囲を指定できる関数を使いましょう。 読み込むフォントの太さは、実際にページで使うものだけに絞ります。ウェブフォントの太さが1つ増えるごとに、ダウンロードしなければならないファイルも1つずつ増えていきます。 リンクではない普通の文字には、下線を引かないようにしましょう。読み手は、下線の付いた言葉を見るとクリックできるものだと考えるからです。 よくある質問
CSSで文字を太字にするにはどうすればよいですか？
太さの指定にboldを使うか、600や700のような数値を指定します。100から900までの数値を指定すると、そのフォントがあらかじめ用意している太さの中から、指定に近いものが選ばれます。フォントに標準の太さしかない場合、ブラウザーは文字を太らせて疑似的な太字を作りますが、本物の太字のファイルに比べると重たく、輪郭もくっきりしない見た目になります。
文字を縦方向にも中央揃えにするにはどうすればよいですか？
テキストの配置で中央揃えになるのは、横方向だけです。ボックスの中で縦方向にも中央に揃えたい場合は、そのボックスをフレックスコンテナかグリッドコンテナにします。表示方法をグリッドにして、アイテムの配置をcenterにすれば、たった1行で、文字を縦と横のどちらにも中央揃えにできます。高さが固定されたバーの中に1行だけ文字を置く場合なら、行の高さをバーの高さと同じにする方法でも中央に揃います。
下線の色や太さを変えるにはどうすればよいですか？
下線の色、下線の太さ、下線と文字の間隔を指定する3つの装飾用プロパティを使います。たとえば下線を付けたうえで、色を#4F98FB、太さを2px、文字との間隔を4pxに指定すると、文字の下に少し間隔を空けた、太めの青い下線を引くことができます。
行の高さを指定するとき、単位は付けるべきですか？
通常は付けないほうがよいでしょう。1.5のような単位のない値は、それぞれの要素自身のフォントサイズに掛け合わされます。そのため、ブロックの中にある見出しや小さな注記でも、それぞれに適した間隔が保たれます。一方、24pxのような固定値はそのままの値で子要素に引き継がれるため、見出しのような大きな文字では、行と行の間が窮屈に詰まってしまうことがあります。
そもそもフォントスタックとは何ですか？
フォントファミリーの指定に、カンマ区切りで並べたフォントのリストのことです。ブラウザーはリストの先頭から順に確認して、使える最初のフォントで表示します。そのフォントが見つからなければ、次の候補へと進みます。リストの最後には、ゴシック体を表すsans-serifや明朝体を表すserifのような、どの環境にも必ず存在する汎用的なファミリーを置いておきます。
サイズの単位：px、rem、clamp()
ピクセルを使えば正確なサイズを指定できますが、その代わりに、読み手が好みに合わせて設定した文字サイズは無視されてしまいます。一方のremは、ルート要素のフォントサイズ（初期値は16px）を基準にした相対的な単位です。そのため1.125remはほとんどの人の環境で18pxになり、既定の文字サイズを大きく設定している読み手の環境では、それに合わせて大きく表示されます。 clamp(最小値, 推奨値, 最大値)は、ウィンドウの幅に合わせてなめらかに変化させたいサイズに使います。clamp(1.75rem, 1.2rem + 2.5vw, 3rem)は28pxより小さくも48pxより大きくもならず、その範囲の中で、画面幅に応じてなめらかに変化します。ブラウザーの拡大表示や文字サイズの設定がきちんと効くように、真ん中の値にはルート基準の単位の部分を必ず残しておきましょう。 読みやすい初期設定
ウェブページの文章が読みにくいと感じる原因のほとんどは、文字が小さすぎる、1行が長すぎる、行が詰まりすぎている、という3つの設定にあります。段落の最大幅をおよそ65文字分、フォントサイズを少なくとも1rem、行の高さを1.6前後にするだけで、細かな装飾を始める前に、その大部分が解決します。 一方で、大きな見出しではその逆の設定が求められます。行の高さは1.1から1.2程度まで詰め、さらに文字間隔もわずかにマイナスにすることがよくあります。一方、大文字だけで書かれた小さなラベルは、文字間隔を少しだけプラスにすると読みやすくなります。 ページの表示を遅くせずにウェブフォントを読み込む方法
ウェブフォントはどれもダウンロードが必要なため、文字の表示を遅らせてしまう可能性があります。フォントの表示方法をswapにすると、まず代替フォントがすぐに表示され、ウェブフォントのダウンロードが終わった時点で自動的に入れ替わります。そのため、読み手が何も見えない画面の前で文字の表示を待たされることはありません。また、WOFF2のファイルを自分のサーバーから配信すれば、別のドメインへ接続する必要もなくなります。 Google Fontsを使う場合は、必要なファミリーと太さだけを1つのリンクにまとめて読み込み、あわせて、そこで案内されている事前接続のヒントもページに追加しましょう。スタックの代替フォントに文字の縦横の比率が近いものを選んでおくと、フォントが入れ替わる瞬間に起きる表示のずれを、小さく抑えることができます。 文字を横方向と縦方向の両方で中央揃えにする
横方向：text-align
テキストの配置を指定すると、ブロックの中にある各行がそれぞれ中央に揃います。ブロックそのものをページの中央に置きたい場合は、ブロックに幅を指定したうえで、左右のマージンを自動にします。
縦横両方：グリッドとアイテムの配置
親となるコンテナにCSSを2行書くだけで、中身の大きさに関係なく、どんなコンテンツでも縦と横の両方向で中央に揃えられます。
きちんとデザインされた下線を作る
下線の色、太さ、文字との間隔、スタイル
装飾用のプロパティを使うと、文字の色はそのままで下線だけを変えられます。インクを避ける指定を使えば、アルファベットの下に伸びる文字の部分を線が横切らないようにできます。
@font-faceやGoogle Fontsでフォントを読み込む
@font-faceを使って自分のサーバーからフォントを配信する
読み込み先には、自分で用意したWOFF2ファイルを指定します。このブロックは、実際に使う太さとスタイルの組み合わせごとに1つずつ書きます。
Google Fontsのリンク
読み込むのは、実際に使う太さだけにしましょう。URLにdisplay=swapを付けると、フォントの表示方法を自動で設定してくれます。
デザインの出発点にできる、読みやすい初期設定
小さくまとまった、実用的な文字の基本設定
本文の文字サイズ、行の高さ、1行の長さを一度だけまとめて設定し、見出しについては行間を詰めています。色やサイズは、自分のサイトのデザインに合わせて自由に調整してください。
Tailwindで同じ指定をするときの書き方
CSSと、それに対応するTailwindのクラス（デフォルトのテーマの場合）
font-weight: 400 / 500 / 600 / 700 font-normal、font-medium、font-semibold、font-bold text-decoration: underline text-decoration-thickness: 2px text-underline-offset: 4px text-align: center / right / justify text-center、text-right、text-justify line-height: 1.25 / 1.5 / 1.625 leading-tight、leading-normal、leading-relaxed letter-spacing: -0.025em / 0.025em tracking-tight、tracking-wide text-transform: uppercase font-family: ui-monospace, … システムのゴシック体
ヒューマニスト系ゴシック体
クラシックな明朝体
書籍向けの明朝体
等幅
丸ゴシック
毎朝焼きたてのパンをお届けします。道の先にある製粉所の小麦粉を使い、少量ずつ丁寧に焼き上げています。
文字装飾のプレイグラウンド
サンプルの文章を入力
使うフォントスタック
文字サイズの単位
サイズ：{n}px
（画面が最も広いとき）
太さ：{n}
装飾
下線などの装飾のスタイル
下線などの装飾の色
太さ：{n}px
下線の間隔：{n}px
配置
変換
大文字・小文字の変換
行の高さ：{n}
文字間隔：{n}em
斜体
CSSをコピー
Tailwindのクラス
クラスをコピー
そのままコピーして使えるフォントスタック
いろはにほへと ちりぬるを わかよたれそ つねならむ
コピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る