2020年1月22日こんにちは、Kosei(https://twitter.com/pompom_stk)です。今回は文字サイズと文字の太さの指定方法について、初心者向けに解説していきます。け】」を先に読むと、この記事をより理解できます。文字サイズを変更するには「font-size」プロパティを使用する。pxで指定pxで文字サイズを指定するのはオススメしない。個人的に文字サイズは%で指定するのがベスト。元のサイズより大きくする場合は「lager」、小さくする場合は「smaller」を使用。文字の太さを変更するには「font-weight」を使用。文字サイズって変える意味あるの?もちろん!そのサイトやブログに合った文字サイズや、ターゲットに合わせた文字サイズを指定する必要があるよ。ヒナ文字サイズを変更するには、「font-size」プロパティを使用します。値には指定したい文字サイズを記述します。この文字サイズの値は、「単位を指定」「%で指定」「絶対サイズで指定」「相対サイズで指定」する4つの方法があります。この中で単位や絶対サイズには数種類あります。これを全て説明していくと長くなってしまうので、また別の記事で説明していきます。今回はこの中から抜粋して簡単にご紹介します。文字サイズの値の指定方法として、以下のものを抑えておけば問題ありません。pxで指定まずは「px」という単位を指定した方法をご紹介します。pxは「ピクセル」と読み、web制作ではよく使用される単位です。サイズの単位と聞くと「cm」などが一般的で、「1pxは何cm?」と思われるかもしれません。これに答えることは難しく、1pxのサイズは使用するデバイスの画面サイズや規格によって変わってきます。これを説明するには画面の解像度の説明からする必要がありますが、CSSをする上でこの知識はとりあえずは必要ありません。この記事では簡単に説明しますので、記憶の片隅にでも置いてください。今これを見ているPCやスマホの画面は「小さな点の集合体」でできています。この小さな点一つが1pxで、「画素」と呼ばれます。画素数(それぞれのデバイスを構成する画素(px)の数)は、画面のサイズによって異なります。わかりやすい例としてスマホでは綺麗に見える画像でも、PCでは荒く見えることがあります。これは「スマホに適した画素数のものを、PCで無理やり拡大」することによって起こる現象です。文字サイズをpxで指定するのは「一文字に対して何個の画素を使用して表示するか」という指定をするということです。察しの良い方はもう気づいたかもしれませんが、「自分の使用デバイスで最適サイズに指定しても、別デバイスで見ると文字が大きい、もしくは小さい」という問題が発生することがあります。僕もブログを始めたばかりの頃は、よくわからず文字サイズをpxで指定していました。このような問題を避けるためにも、pxで文字サイズを指定することはオススメしません。前章で「pxで文字サイズを指定することはオススメしない」といいました。何で指定すればいいのかとなりますが、僕はこの「%で指定する」方法をオススメします。%は、「それぞれのデバイスで表示されている基本的なサイズの何%のサイズで表示する」というものです。基本サイズは100%で、それよりも大きくしたい場合は100%以上、小さくしたい場合は100%以下で指定します。ある文字のサイズから大きさを指定するので、pxのように別デバイスで見たときに画面サイズに対して大きい、小さいと言った問題は発生しません。相対サイズで指定これは%に近い指定方法です。「何%でもいいけどとりあえず文字を大きくしたい、小さくしたい」という人はこちらの方がいいかもしれません。120%」のように値にサイズを指定しますが、サイズを指定せず、もとのサイズよりも大きいか小さいかだけで指定する方法です。もとの文字サイズよりも1段階大きくしたい場合は「lager」、小さくしたい場合は「smaller」を指定します。大切なポイントの文字を太くしたり、よくするよね。文字の太さを変更するには「font-weight」プロパティを使用します。値には指定したい太さを記述しますが、数値で指定する方法とキーワードで指定する方法があります。数値で指定するには、100、200、300〜900まで、の9段階で行います。数値が大きくなれば文字も太くなります。1/10や1/100での指定はできないので、注意しましょう。キーワードで指定する場合は以下の通りです。どれも数値で表すこともでき、どのキーワードがどの数値に該当するかも参考までに載せておきます。現状の数値+100僕は普段boldで指定していますが、下のCodePenを作るのに初めて数値で指定してみました。文字を細く指定するのも初めてですが、100と400ってあまり変わったように見えませんね(笑)400と700は明らかに違い、700と900はよく見れば違うというレベルです。文字の太さに対するこだわりが強い方以外は、太字に指定する値はboldだけでいいんじゃないかなと思います。久しぶりだね、このコーナー。記事の終わらせ方に悩んだんじゃないかな。ヒナハリボーなるほどね、そんなことはいいとして、文字のサイズと太さの指定する方法がわかったよ!そこまで難しくなかったでしょ。サイズも太さもサイトを見やすくするのに大切だから、状況に応じて変えて行こうね。ヒナ※ヒナとハリボーの部屋は僕が以前、動物ブログをしていたとき、記事の最後に設けていたコーナーです。記事の最後は二人に会話してもらった方が楽しくまとめられるかなと思って、今回このブログで初めて使用しました。け】この記事ではCSSの基本書式について、初心者向けにわかりやすく解説しています。...p要素、div要素、span要素の違いを初心者向けに解説【HTML】p要素、div要素、span要素の違いについて初心者向けに解説した記事です。...CSSでできることと組み込み方【初心者向け】CSSでできること、組み込み方を初心者向けに記述した記事です。...初心者向けリストの作成方法【HTML】HTMLでリストを作成する方法を、初心者向けにわかりやすく解説していきます。...文字・背景の色を変える方法【CSS】CSSで文字色・背景色を初心者向けに解説した記事です。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。