【CSS】テキストに関するcss

テキストに関するcss

css適応前

css適応後

index.html

<h1>CSS-TEXT</h1>
<a href="/">リンク</a>
<p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur,
    qui! Dolor accusamus quas repellendus, nemo iste a doloribus, assumenda
    cupiditate excepturi temporibus adipisci. Totam, possimus? Magnam quidem
    nulla itaque? Quas?
</p>

index.css

h1 {
  text-align: center;
  font-weight: 100;
  text-decoration: #f3a3b3 underline wavy;
  letter-spacing: 15px;
  font-size: 80px;
  font-family: "Segoe UI", Futura, Arial, sans-serif;
}

a {
  text-decoration: none;
}

p {
  line-height: 2;
}

css一覧

css	説明	例のどこに使われているか
text-align	文字の配置位置	h1
font-weight	文字の太さ	h1
text-decoration	下線を引いたり打ち消し線を引く	h1とa
line-height	一行の高さ	p
letter-spacing	文字と文字の間	h1
font-size	文字の大きさ	h1
font-family	フォント	h1

補足説明

• text-decorationのいちばんの使い道：リンクの下線を消す時
• line-height：line-height: 2;の場合、フォントサイズの2倍の高さに設定できる
• font-sizeの大きさの書き方：pxは絶対単位（何があってもその大きさ）
• font-family：
  • カンマ区切りで複数フォントを書いておくことで、そのフォントがなかった時に、代わりのフォントを表示してくれる
  • 一番最後に総称ファミリー書いとくのがベスト
  • 総称ファミリーはフォントのまとまりみたいなもので、そのなかから適応できるものを選んで表示してくれる（sans-serifとか）
  • macとwinがそのフォントをどれだけ持ってるかを一覧で表示しているサイト（ https://www.cssfontstack.com/ ）