見出し画像

【CSS】テキストのスタイル

Naoki Saito

少し久しぶりなnote投稿です。Udemyコースを２月中に終わらせようと頑張っていたら、note投稿が疎かになっていました。Udemyコースの目処がついたので今日からnote投稿も頑張っていきます。
前回、HTMLのnote投稿が終了したので、今回からCSSの方へと入っていきます。今日は「テキストのスタイル」というお題で学んだことを記事にまとめていきます。


font-family

font-familyとは、主に文字のフォントを設定する際に使用するプロパティです。この設定をしていない場合、ブラウザが持つデフォルトのフォントが読み込まれます。

記述方法

フォントの指定する際、２つの方法があります。

  • ファミリ名を指定する場合

  • 総称フォントを指定する場合

※ファミリ名・・・フォントの名前の事
※総称フォント・・・ゴシック系、明朝系といったフォントの事

font-family: "Meiryo";   ・・・①
　
font-family: serif;   ・・・②
 
font-family: "Meiryo" , serif;   ・・・③

①ファミリ名のみを指定した場合
Meiryoといったフォントを指定する場合、ダブルクォーテーションで"Meiryo"を囲む必要があります。

②総称フォントのみを指定した場合
総称フォントを指定する場合、そのまま総称フォント名を記述するだけで適用されます。

③ファミリ名と総称フォントを指定する場合
この指定の仕方が一般的だと言えます。ファミリ名を指定し、カンマで区切り、総称フォントを指定するという方法です。ユーザーが使用しているPCにMeiryoがインストールされていない場合、２つ目に指定したserif（明朝系）が適用されます。このように、表示できないフォントだった場合どうするかも指定する必要があります。


Google web fonts

web fontとは、ネットワーク上からフォントデータを読み込みWebサイトやブログに表示するといったものです。
Google web fontsはGoogleが提供している、Webフォントのサービスです。これを使用することで、どのデバイスで閲覧しても指定したフォントで表示させることができます。

設定方法

①Google web fontsのWebページへ行きます。


②使用したいフォントを検索します。
（今回はLobsterというフォントを検索します）


③Lobsterをクリックし、「＋　Select this style」をクリックします。


④右の<link>タグの全文をコピーし、HTMLの<head>タグの中に貼り付けます。font-familyの文もコピーし、CSSファイルへ貼り付けます。

この手順でGoogle web fontsを使用することができます。


font-size

font-sizeとは、文字通りフォントのサイズを変更することのできるプロパティです。

記述方法

font-size: 〇px;

上記のようにpx指定で、フォントサイズを変更します。


大きさの指定

先程のfont-sizeではpxを使用して大きさの指定をしました。そもそも、大きさの指定には２種類あります。

  • 絶対単位・・・mm , cm , pt

  • 相対単位・・・em , ex , px , %

この２つを簡単にまとめたものを紹介します。

絶対単位の表


相対単位の表

私達が日常でよく見るのは絶対単位ですが、CSSでは必ず相対単位を使用して記述します。


font-weight

font-weightとは、文字の太さを変更することのできるプロパティです。

記述方法

100~900(100が細く、900が太い)の数字で指定する方法と「bold」「normal」といった英語で指定する方法の２つがあります。

font-weight: 300;
 
font-weight: bold;

上記のように記述します。


text-decoration

text-decorationとは、テキストの装飾をすることのできるプロパティです。例えば下線、上線、取り消し線などがあります。テキストに元々ついている装飾を消すこともできます。

text-decoration: underline solid black;
 
text-decoration: none;

このように記述することで、黒色の下線を引いたり、装飾を消すといったことができます。


line-height

line-heightとは、行間の指定ができるプロパティです。

line-height: 30px;
 
line-height: 1.5;

上記のように、pxや数字で指定します。他にも、％やemといった単位も使用することができますが、あまり使用しないのでここでは省略します。

  • pxだとそのまま指定したpx値で行間が設定されます

  • 数字のみの指定だと、フォントサイズに対する倍率で行間が設定されます。フォントサイズが30pxであった場合、1.5倍の45pxに行間が設定されます


感想

今回はテキストの大きさやフォント、太さなどを変更する方法について学びました。ここでまとめたすべてのプロパティは、Webページを作成する際に必ず使用するものだと思います。さらに正しい使い方、一般的な使い方をマスターして、実践などに生かしていきます。

この記事が気に入ったらサポートをしてみませんか？