[CSS] 文字スタイル

Study / Javascript, Jquery, Css 作成日付 : 2019/12/11 21:13:22 修正日付 : 2019/12/11 21:13:45

こんにちは。明月です。

CSSはHTMLタグでスタイルを付ける言語です。

Webの構造は基本文字でなっているドキュメント形式です。そこでCSSで文字スタイルを付けるのが基本ではないかと思います。

<!DOCTYPE>
<html>
  <head></head>
  <body>
    <div class="test">Hello World!!!!</div>
  </body>
</html>

html {
  font-size: 12px;
}
body {
  font-size: 12px;
}
div.test {
  /*fontサイズ設定*/
  font-size: 1em;
  /*fontスタイル*/
  font-style: italic;
  /*font種類*/
  font-family: arial;
  /*font太さ*/
  font-weight: 800;
  /*font色*/
  color: red;
  /*font整列方法 left, center, right*/
  text-align: center;
  /*font効果 - underline, 取り消し線など。*/
  text-decoration: line-through;
  /*fontの影効果*/
  text-shadow: 1px 2px 4px;
  /*文字列の折り返し設定*/
  white-space: nowrap;
}

実はfontのスタイルは上よりもっと多いですね。でも筆者も使ったことがないし、よく使うことは上の以外にはないかと思います。

font-sizeは文字のサイスのスタイルです。文字単位では、「px」、「pt」、「em」、「rem」があります。

「px」の場合はピクセルの単位で文字のサイズを幅、縦がモニターの12ピクセルサイズになることです。

「pt」の場合はフォントサイズの単位ですが、基準としては筆者もよく知りません。でもWordやメモ帳でよく使うフォント単位なので大体にどのサイズかは分かると思います。

「em」と「rem」は比率サイズですが、「em」の場合は違いところで設定したサイズによって倍率、「rem」の場合は「root」のサイズ、つまり「html」で設定したサイズの倍率です。

上の例は「em」で定義しました。「div.test」は「body」の派生位置になっているので、bodyタグの「font-size:12px」の「1倍」で設定されます。

「font-style」はイタリックなどの設定です。「font-family」はフォントの種類を設定することですね。

「font-weight」はフォントの太さを設定するところです。数値は何の意味かを詳しくしらないですが、「100」単位で大きい数字だと太くなります。boldやbolder、lighterでも設定ができます。

font-colorはフォントの色の設定ですが、代表的な色は英語で設定してもいいです。でも細かい色はHEXの色値で設定ができます。

HEXの色は下記のリンクを参照してください。

link - https://htmlcolorcodes.com/

text-alignはテキストの整列設定です。text-decorationの場合は取り消し線やアンダーラインなどの設定ができます。