buttonタグでボタンが表示されない

題名の通りbuttonタグを使ってもプレビューに何も表示されません。本に書かれてあるコードをそのまま書き写しています。特に影響を及ぼすようなcssはなにもかけていません。
この現象を再現できるhtmlを提示します。
<button type="button" class="nav-button">
<span class="sr-only">MENU</span>
</button>

ちなみにspanタグを外してみるとMENUの文字だけ表示されました。
何か見落としているだけかもしれないと思って、スペルチェックや書き直すなど試してみましたがうまくいきませんでした。教えていただけると幸いです。

Lhankor_Mhy

2020/12/21 05:46

「現象を再現できるhtmlを提示します」とのことですが、当方では再現しませんでした。

k-nirvana-69

2020/12/21 05:48

追記・修整依頼ありがとうございます。それはボタンがうまく表示されたということでしょうか？

Lhankor_Mhy

2020/12/21 05:51

はい、そのとおりです。

k-nirvana-69

2020/12/21 05:56

質問に提示したものは、実際のコードをコピペしたものなんです。もしLhankor_Mhy様がうまくいったというのであれば、コード自体に間違いはないはずですよね？cssも見直しましたが、buttonタグやspanタグにはなにも掛かっていないんです。何か他に考えられる原因はありますでしょうか。

Lhankor_Mhy

2020/12/21 05:58

CSSの影響が考えられないのであれば、JavaScriptの影響でしょうか。

Lhankor_Mhy

2020/12/21 06:00

あるいは、環境の違いかもしれません。また、「表示されない」という言葉について、私とk-nirvana-69さんの認識が異なっている、ということも考えられます。

k-nirvana-69

2020/12/21 06:10

ご返信ありがとうございます。 JavaScriptに関しては全く知識がなく使用もしていないので何とも言えません。また環境についてエディタはatomを使用し、プレビューはchromeで見ています。今回の質問について「表示されない」というのは、htmlをchromeで開いたときにボタンがあるはずの場所に要素自体がないことを指しています。

k-nirvana-69

2020/12/21 06:11

もう少し考えてみます。ありがとうございました。

Lhankor_Mhy

2020/12/21 06:14

yambejpさんのご回答にある通り、開発者ツールのご使用を検討されてみてはいかがでしょうか。 https://developers.google.com/web/tools/chrome-devtools?hl=ja

Lhankor_Mhy

2020/12/21 06:19

コピペした、とのことなので考えにくいと思いますが、ダブルクォーテーションが全角だった、などの打ち間違いでもボタンのテキストが消えるはずです。