CSSでテキストにスタイルを設定する方法

2020年12月6日CSS

CSSを使ってテキストにスタイルを設定する方法をまとめました。

よく使うものに厳選しているので、確認してみてください。

CSSでテキストにスタイルを設定する方法

<h1>CSSでテキストにスタイルを設定する方法</h1>
<p>こんにちは。CSSでテキストにスタイルを設定する方法のサンプルテキストです。</p> 
<a>href=“#”>リンク</a>
h1 {
  
color: grey;

  font-size: 30px;

  text-align: center;

  font-weight: normal;

  text-decoration: line-through;

}
 
p {

  font-weight: bold;

  text-decoration: underline;

}

 
a {

  text-decoration: none;

}

よく使うプロパティをおさえておきましょう。

  • フォントサイズの変更→ font-size: ◯◯px(em)
  • 文字色の変更→ color: 色名orカラーコード
  • 文字を太くする→ font-weight: bold
  • 行間を変える→ line-height: 値 (1.6など)
  • 字間を変える→ letter-spacing: ◯◯em(0.1emなど)
  • 文字に下線を引く→ text-decoration: underline
  • 取り消し線を引く→ text-decoration: line-through
  • 実線の枠で囲む→ border: solid 太さ 色
  • 点線の枠で囲む→ border: dashed 太さ 色
  • 文字の上下に線を引く→border-topとborder-bottomを指定
  • 中央寄せ→ text-align: center
  • 文字に影をつける→ text-shadow

参考になるサイト

スタイルシートリファレンス（目的別）
http://www.htmq.com/style/

このひとはcordpenを使ってちゃんとまとめていて素晴らしい。

テキスト周りで使えるCSSの小技いろいろ

CSS

Posted by devsakaso