コース: Bootstrap 4 基本講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

テキストの大文字小文字と太さを決める

テキストの大文字小文字と太さを決める - Bootstrapのチュートリアル

コース: Bootstrap 4 基本講座

テキストの大文字小文字と太さを決める

このレッスンでは英単語の大文字・小文字と テキストのフォントの太さ、 ウェイトを決めてみたいと思います。 まずは大文字・小文字です。 どういうことかといいますと 英単語には大文字、小文字があって 頭だけ大文字にするとか 全部大文字にするとか あるいは全部小文字にすると いった区別があるわけですね。 今4つ同じテキストが置いてあります。 そしてすべて h1 要素です。 その上でクラスを設定するんですが、 一番最初のこの Text tranform、 これはクラスを設定しないでおきます。 比較のためですね。 2番目から設定したいと思いますが 2番目は class で text-lowercase 小文字ということですね。 そうするとすべて小文字になります。 今度は3番目ですね。 3番目、class で text-uppercase これは大文字です。 ということですべて大文字になります。 最後、4番目ですね。 こちらは class で text-capitalize ということにしますと 単語の頭が大文字になります。 ということでこの4番目と1番目、 差がわかりますね。 2つ目の単語 Transform の T が小文字か大文字かという違いなんですけど このように大文字・小文字を コントロールすることができます。 今度は太さですね、 weight というふうにいいますけど 文字には太字とか 細字とか書いてありますが 今はすべて同じ p 要素で 同じ設定ということになっています。 ここにまたクラスを 設定していきます。 まず標準なんですけど 標準ですから見た目変わりませんが クラスは用意されています。 いずれも font-weight で 始まりまして normal が標準の状態です。 ということで特に 変化はありません。 今度は太字ですね。 class で font-weight-bold ということで 太字に変わります。 3番目、細字というのがあるんですね。 class で font-weight-light ちょっと日本語では わかりにくいかもしれません。 英語の方で比べると 少し違ってるのがわかるでしょうか。 最後、4番目ですね。 こちらも class で、ただ font-weight の 仲間ではないものですから font-italic ということになります。…

目次