スポンサーリンク

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

2019年6月2日HTML・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明朝』にしています</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   右寄せ
これは中央寄せです
これは左寄せです
これは右寄せです

 

スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]
¥2,178 （2024/04/11 17:26時点 | 楽天市場調べ）
Amazon
楽天市場
Yahooショッピング

いきなりはじめるPHP ワクワク・ドキドキの入門教室 [ 谷藤賢一 ]
¥1,980 （2024/04/16 03:13時点 | 楽天市場調べ）
Amazon
楽天市場
Yahooショッピング

最後に

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

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

きらり

きらり

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

結耶

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

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶 フォロー
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM