今回は、HTMLのh1やpなどのテキスト要素の、
太さやサイズの変更などを行うCSSコードを紹介します。
なお、今回は、実戦でよく使うCSSコードの紹介になります。
目次
HTMLテキスト要素の太さやサイズを変えるCSSコード集
それでは、テキスト要素に変更を加えるコードをざっと紹介します。
| color | 文字の色を変えるコード |
| background-color | 文字の背景の色を変えるコード |
| font-size | 文字のサイズを変えるコード |
| font-weight | 文字の太さを変えるコード |
| font-family | 文字の書体を変えるコード |
| letter-spacing | 文字同士の間隔を調整するコード |
| line-height | テキストの行間を調整するコード |
| box-shadow | 文字に影を作るコード |
以上が、テキスト要素に対してよく使うCSSコードになります。
それでは、これから1つずつ使用例を紹介していきたいと思います。
テキスト要素に使うCSSコードの使用例
color
こちらは、文字の色を変えるCSSコードになります。
See the Pen wvGXrZB by ryu (@ryu-no-sss) on CodePen.
以上のように、colorの後に、#〜またはrgbaで文字色を設定してください。
また、rgbaに関する説明は、以下のリンクの記事で詳しく説明しているため、気になる方は、ぜひ！
background-color
こちらは、文字の背景を変えるCSSコードになります。
See the Pen xxVzPGJ by ryu (@ryu-no-sss) on CodePen.
こちらもcolorと同様に、#〜またはrgbaで背景色を設定しましょう！
font-size
こちらは、文字の大きさを変更するCSSコードになります。
See the Pen BaKVmjo by ryu (@ryu-no-sss) on CodePen.
以上のように、font-sizeの後に、〜pxまたは〜emのように、大きさを設定します。
ちなみに、font-sizeの設定がない場合、16pxで標準設定されます。
（h要素は除く）
font-weight
こちらは、文字の太さを変えるCSSコードになります。
See the Pen abNKVNj by ryu (@ryu-no-sss) on CodePen.
以上のように、数字またはboldなどのキーワードで太さを変えます。
値の設定数値は以下をご覧ください。
数字・・・100、200、300、400、500、600、700、800、900
キーワード・・・normal、bold、lighter、bolder
font-family
こちらは、文字の書体を変えるCSSコードになります。
See the Pen XWdYzRY by ryu (@ryu-no-sss) on CodePen.
以上のように、書体を変える際は、書体名を記入します。
この時、標準で搭載されていない書体を使う時は、書体の読み込みが必要になリます。
書体の読み込み方は、以下のリンクの記事にまとめてますので、気になる方はぜひ！
letter-spacing
こちらは、文字同士の間隔を調整するCSSコードになります。
See the Pen yLOEPzp by ryu (@ryu-no-sss) on CodePen.
以上のように、〜pxまたは〜emのように、文字同士の間隔を調整します。
line-height
こちらは、テキストの行間を調整するCSSコードになります。
See the Pen yLOEPKv by ryu (@ryu-no-sss) on CodePen.
以上のように、〜pxまたは〜emのように、テキストの行間を調整します。
また、テキストの行間は、文字の1.5〜2倍が、見やすいとされているため、
line-heightを設定する際は、1.5〜2emにすることをオススメします。
box-shadow
こちらは、文字に影を作る際に使われるCSSコードになります。
See the Pen poyKdxL by ryu (@ryu-no-sss) on CodePen.
以上のように、pxによって影の距離を変えることができ、rgbaによって影の色も変更することが可能です。
また、影の値の設定は、
1つ目の値・・・水平方向の影に対する設定
2つ目の値・・・垂直方向の影に対する設定
3つ目の値・・・影のぼかしに関する設定（マイナスの値は設定できません）
4つ目の値・・・影の広がりを設定（値が大きいほど全方向に影が伸びます）
※insetを追加すると、影が内側に変更されます。
まとめ
今回は、HTMLテキスト要素の太さやサイズを変えるCSSコード集の使用例を紹介させていただきました。
他にも、実戦でよく使うCSSコード（テキスト要素）を以下のリンクの記事にまとめているので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
