よく使うテキスト、フォントに関するCSS

 
今回はCSSではよく使われる文字に関するCSSを書いていこうと思います。

CSSの書き方や色の指定の方法はこちらを参考にしてください。


 

結耶

結耶

今回はCSSの中の基本的なテキストに関するCSSです。私の備忘録も兼ねて書いていきます。

 

文字の色を変える

CSScolor: 色 ;

colorで文字の色を変えます。

<span style=”color:#ff0000;”>>これはサンプルです</span>
これはサンプルです

 

スポンサーリンク

 

 

文字を太くする

CSSfont-weight 太さ ;

font-weightで太文字にしたり細文字にしたりできます。

  • nomal
    標準の太さ(初期値)
  • bold
    太字くす
  • bolder
    相対的に1段階太くする
  • lighter
    相対的に1段階細くする
  • light
    細字
  • 100から900までの100単位の数値
    400が標準、700がboldと同じ。400以下の数値で細くなり、400以上で太くなる。
これはnomalです
これはboldです
これはbolderです
これはlighterです
これはlightです
これは400です
これは700です

 

 注意!お使いのフォントによって数値を変えても太さが変化しないことがあります。

 

 

文字の大きさを変える

CSSfont-size: 大きさ ;

font-sizeで文字の大きさを変更します。値には数値やキーワードを入れます。
数値の単位はいくつかありますが、em(エム)、px(ピクセル)が一般的に使われます。

キーワードxx-small、x-small、small、medium、large、x-large、xx-largeの7種類。
mediumが標準サイズになります。
これはxx-smallです
これはx-smallです
これはmediumです
これはsmallです
これはmediumです
これはlargeです。mediumより1.2倍大きくなります。
これはx-largeです
これはxx-largeです

 

 

文字を斜体にする

CSSfont-style: italic または oblique;

font-styleで文字を斜体にします。値はnomal(初期値)、italic、obliqueのいずれかを入れます。

これはnomalです
これはitalicです
これはobliqueです

 

 注意!obliqueはブラウザによって斜体になりません。

 

 

文字に線をつける

CSStext-decoration: キーワード;

  • none   何もなし(初期値)
  • underline   下線
  • overline   上線
  • line-through   取り消し線
  • blink   文字が点滅(NetScapeのみ)
これはnoneです
これはunderlineです
これはoverlineです
これはline-throughです

キーワードを複数指定

キーワードを半角スペースで区切ると複数指定できます。

<span style=”text-decoration:underline overline;”>これはunderlineとoverlineを半角スペースで区切って指定しています</span>
これはunderlineとoverlineを半角スペースで区切って指定しています

 

色と線種を変える

CSStext-decoration-color: 色 ;
text-decoration-style: 線種

text-decoration-color(色)とtext-decoration-style(線種)を追加すると色と線種を変えることができます。

<span style=”text-decoration:underline; text-decoration-color:blue; text-decoration-style:dashed;”>これはサンプルです</span>
これはサンプルです

 

 

 

フォントを変える

CSSfont-family: “フォント名”;

font-familyを使うとフォントを変えることができます。
フォント名にスペースがある場合は半角スペースを入れてください。またフォント名は ” (ダブルクォーテーション)または ‘ (シングルクォーテーション)で囲んで指定します。

<span style=”font-family:’MS P明朝’;”>これはサンプルです。『MS P明朝』にしています</span>
これはサンプルです。『MS P明朝』にしています

 

 

文字の間隔を指定する

CSSletter-spacing: 間隔(数値) ;

letter-spacingを使うと文字の間隔を指定することができます。
値はpx(ピクセル)などの単位で指定します。初期値はnomalです。

これはnomalです
これは5pxです
これは1emです

 

 

行間を指定する

CSSline-height: 間隔(数値) ;

line-heightを使うと行間を指定することができます。
値はpx(ピクセル)なとの単位や比率(単位は付けない)で指定します。初期値はnomalです。

ポイント
line-heightは文字の大きさを含めた数値で指定します。line-heightで指定した数値から文字の大きさを引いた残りが行間となります。
例えば、文字サイズが16pxでline-heightを20pxにした場合、20pxから文字サイズ16pxを引いた残りの4pxが行間となります。
フォントサイズ16px
line-height:20px;
で指定するとこんな感です。
フォントサイズ16px
line-heightを 1
で指定するとこんな感です。
フォントサイズ16px
line-heightを 1.2
で指定するとこんな感です。
フォントサイズ16px
line-heightを 2
で指定するとこんな感です。

 

 

位置を指定する

CSStext-align: 位置 ;

text-alignで文字の位置を指定します。
値はキーワードで指定します。

  • center   中央寄せ
  • left   左寄せ(初期値)
  • right   右寄せ
これは中央寄せです
これは左寄せです
これは右寄せです

 

 

 

最後に

今回テキストやフォントに関するCSSをまとめてみました。
みなさんもよく知っているものばかりだったとは思います。

他にもテキストやフォントに関するCSSはありますが、それらは必要に応じてご紹介していこうとおもいます。

きらり

きらり

結耶さんどうして途中で『令和』の文字が出てくるの?
結耶

結耶

なんとなく「文字」「フォント」と考えてたら『令和』しか思いつかなかった(^^; w

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトをはじめた駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。