カテゴリー: CSS
  • 【CSS入門】文字を太字にする方法|font-weightの使い方をわかりやすく解説

    Webページで文字を太く強調したいとき、どのように設定すれば良いのでしょうか? CSSを使えば、簡単に見出しやキーワードを太字(bold)にすることができます。 この記事では、CSSによる太字指定の基本から、フォントウェイトの細かい調整方法まで、初心者にも分かりやすく解説していきます。 太字にするには「font-weight」を使う CSSでテキストを太字にするには、font-weightプロパティを使います。最もシンプルな指定方法は次のとおりです: .bold-text { font-weight: bold; } HTMLでは以下のように使います: <p class="bold-text">この文章は太字です。</p> font-weight: bold;は、実際にはフォントの太さを「700」に設定しているのと同じ意味になります。 数値での指定も可能 font-weightは、数値でも指定できます。代表的な例を以下にまとめます: 100:極細(thin) 300:細め(light) 400:標準(normal) 700:太字(bold) 900:極太(black) 例: .heavy-text { font-weight: 900; } ただし、使用するフォントによっては「400」と「700」の2段階しか効かないこともあります。 normalとboldを使い分けよう CSSでは、font-weightの値にキーワードも使えます: normal:通常の文字(=400) bold:太字(=700) bolder:親要素より太く lighter:親要素より細く bolderやlighterは、階層的なデザインをする際に便利です。 HTMLのタグだけでは不十分? HTMLには<strong>や<b>タグもありますが、CSSでしっかり管理することで、スタイルの統一性が高まります。 <strong>この部分は重要です。</strong> このようにマークアップして、CSSで以下のように上書きすることも可能です: strong { font-weight: 600; } 文章構造(意味)と見た目の分離を意識しましょう。 フォントの種類によって太さは変わる フォントによっては「bold」が極端に太く見えたり、「900」指定が効かないこともあります。たとえば Google Fonts で読み込んだフォントでは、多くの太さバリエーションが用意されていることがあります。 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap'); body { font-family: 'Noto Sans JP', sans-serif; } このようにすれば、複数のウェイトを利用できるようになります。 まとめ font-weightを使えば、テキストの太さを自由に調整できます。キーワード(normal, bold)だけでなく、数値指定(100~900)を活用すれば、より細かなデザイン調整が可能になります。 見出し、強調、ボタンラベルなど、太字の使い方を意識することで、Webサイト全体のメリハリが生まれ、読みやすさが向上します。

  • 【CSS入門】文字のサイズを変更する方法|font-sizeの使い方とおすすめ単位を解説

    Webページの文章が「小さくて読みづらい」「大きすぎてバランスが悪い」などと感じたことはありませんか? そんなときに使えるのが、CSSによるフォントサイズ(font-size)の調整です。 この記事では、文字サイズの基本的な指定方法から、レスポンシブ対応やおすすめの単位まで、初心者にも分かりやすく解説していきます。 フォントサイズは「font-size」で設定する CSSで文字の大きさを指定するには、font-sizeプロパティを使用します。基本の書き方は次のとおりです: p { font-size: 16px; } このコードは、段落の文字サイズを16ピクセルに設定します。 代表的な単位と使い方 フォントサイズはさまざまな単位で指定できます。それぞれの特徴を理解して使い分けましょう。 px(ピクセル):固定サイズ。見た目が安定するが、拡大縮小に弱い。 em:親要素のサイズを基準にする。柔軟だが扱いに慣れが必要。 rem:ルート要素(html)のサイズを基準にする。レスポンシブ対応におすすめ。 %:親要素に対する割合指定。emと似た使い方。 h1 { font-size: 2rem; } .small-text { font-size: 80%; } rem単位を使うと、全体のバランスが取りやすくなります。 見出しと本文のバランスを意識しよう 文字サイズは、階層構造に応じて調整することが大切です。 h1:2.0rem(タイトル) h2:1.6rem(セクション見出し) p:1.0rem(本文) .note:0.875rem(注釈など) サイズを揃えることで、読みやすく整ったページに仕上がります。 画面サイズに合わせてサイズを変える レスポンシブデザインを考えると、スマホとPCでフォントサイズを切り替えることも有効です。 body { font-size: 16px; } @media screen and (max-width: 768px) { body { font-size: 14px; } } こうすることで、スマートフォンでも見やすい文字サイズに調整できます。 初期設定(root)のサイズを意識する rem単位を使う場合、htmlタグでベースのサイズを定義しておくと便利です。 html { font-size: 16px; } これにより、1rem = 16pxとして、計算しやすくなります。 まとめ CSSのfont-sizeプロパティを使えば、文字の見やすさや読みやすさを自由に調整できます。 単位の特徴を理解して使い分けることで、見た目も美しく、レスポンシブ対応にも強いWebデザインが可能になります。 Webサイトの文字サイズを一度見直して、より快適な読みやすさを目指してみましょう!

1 6 7