30DAYSトライアルのBootstrap動画を見終わって、イチから自分でやってみようと思ったら、最初からつまづいた…。ヘッダー画像に文字が表示されないんだけど、何が悪いのかな?
30DAYSトライアルのYouTube動画の模写(というか写経)をし終わって、ゼロからコーディングしようと思ったら、序盤も序盤のヘッダーでつまづいたよ…っていうお話。
↑この部分ですね。
ゼロからコーディング
まず、「ゼロからコーディング」の前提は「白紙のindex.html」と「白紙のcss」からはじめる、ということです。
Bootstrap固有のタグは、Bootstrap 4 Cheat Sheet からコピペします。
動画では、ヘッダー部分にBootstrapの「Carousel」クラスを使っていたので、Bootstrap 4 Cheat Sheet からテキスト表示のある「carousel-caption」をコピペ。
…したのだけど、テキストが表示されない!!
なんでなんで!?
と思って、元動画のHTMLと比較すると、コピペした方のタグには「d-none d-md-block」というクラスがついていることに気づいた…。
d-none d-md-block
これ、「基本的に非表示。でも、指定幅(今回はmd)以上の時は表示」っていう指示らしい。
試しに、画面幅を広げてみたら確かにテキストが表示された…。
まとめ
そんなわけで、「d-none d-md-block」を削除。
どの画面幅でも、ヘッダー画像内にテキストが表示されるようになりました。