空白と大文字小文字の指定した文字装飾
本日の教材動画はこちら
今回はCSSで文字に空白を指定したり、大文字小文字を指定してみましょう。
text-indet で空白を指定する
text-indetを使うと、1行目のインデント（字下げ）を指定することができます。使い方は text-indet：数値（5emなど）；となります。
text-transform で大文字・小文字をコントロールする
text-transformを使えば、以下の様に大文字・小文字のコントロールをすることができます。
- normal … 通常
- capitalize … 単語の先頭文字を大文字にする
- lowercase … すべて小文字で表示する
- uppercase … すべて大文字で表示する
以前習った font-variant の場合、文字を縮小拡大していましが、text-transformなら大文字なら大文字サイズを、小文字なら小文字サイズのフォントをきちんと使ってくれます。
実際にどんな感じに表示されるのか見ていきましょう。
上記のようなソースとを用意しました。表示はご覧の通り何の変哲もないページになります。ここに、先ほど習ったCSSを全部詰め込んでみます。
ここに今回習った全てをCSSにぶっこんでみました。h1はインデントを指定しているので、少し字下がりしていることがわかると思います。あとは全て赤文字で書いた通りです！capitalizeは英語で人名を書くときとかに便利そうですね！
【復習記事】
【参考サイト】
