30DAYSトライアル

【30DAYSトライアル×Bootstrap】ヘッダー画像にタイトルが表示されない…

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」を削除。

どの画面幅でも、ヘッダー画像内にテキストが表示されるようになりました。