コース: Bootstrap 4 基本講座

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

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

引用のスタイルを定める

引用のスタイルを定める - Bootstrapのチュートリアル

コース: Bootstrap 4 基本講座

引用のスタイルを定める

このレッスンでは引用の blockquote 要素に スタイルを与えてみます。 今開いているドキュメントなんですけど blockquote の要素に p 要素、段落が2つですね。 チャールズ・チャップリンの ライムライトの一節が書いてあるんですけど これにスタイルを設定していきましょう。 blockquote について さらに class で Bootstrap のクラスですね。 文字通り blockquote というクラスがあります。 これを設定しましょう。 そうすると文字が少し 大きくなりましたね。 それからこの「チャールズ・チャップリン 『ライムライト』」という部分なんですが これは footerに変更しましょう。 footer にして footer を閉じます。 あとその作品については cite という要素がありますので cite というタグで 囲むことにします。 この footer に対しては今度は やはり Bootstrap のクラスを与えます。 class で blockquote-footer というものですね。 そうすると少し文字が小さくなって グレーになりましたね。 あと cite の設定の部分というのは 斜体にイタリックになっています。 cite に対してはタイトルを 与えておきましょうか。 これは特にスタイルには 影響していませんけど title で Cinema Source とします。 こんな感じで blockquote の設定、 スタイルを与えることができるんですけど さらにこの blockquote に対して 位置揃えですね、 alignment を設定することができます。 では alignment は テキストのクラスですので text-center としましょう。 そうすると全体が center によります。 さらにもう1つ、 今度は right ですね。 right ということで 右寄せにすることができます。 このレッスンでは引用の blockquote 要素に スタイルを与えました。 blockquote に対しては クラス blockquote、 それから footer に対しては class blockquote-footer ですね。 あと cite のタグも設定しました。 位置揃えについては text- のクラスで…

目次