※※本記事は、プログラミング超初心者の方に向けた記事となります。Atomの不具合等によるプレビュー表示については、別記事をご参照ください。
また、私はAtomの不具合もあってVisual Studio Codeに変えたところ、かなり使いやすいのでそれからはそちらを使用しています。
AtomやVisual Studio Codeのダウンロード方法、コーディングしていくまでの設定方法などはProgate、ドットインストールがかなり親切に書いてくださっているので、そちらご確認ください！
では、本記事スタートします!
「よし、プログラミングの基礎は大体覚えたぞ。早速、テキストエディタをダウンロードして実践だ！！・・・と思ったけど、プレビュー画面に文字が表示されないんですけど。。いろいろな記事を見てみたけど、全然わからない・・・」
という方向けの記事です。
正直、プログラミングをある程度分かっている人であれば、この悩み自体意味がわからないかもしれません。
でも、私自身、超絶初心者の頃にテキストエディタをダウンロードしてしまったもので、なかなか苦戦してしまいました。
なので、この記事は、同じような「どこでつまずいているかすらまだわからない、という悩みをもつような初心者の方」に向けて書いています。ご了承ください。
私自身、atomというテキストエディタで実際にこの悩みを抱えていましたが、多分他のテキストエディタでも同じような悩みであれば解決できると思います。
それでは、どうぞ！
Q１（atom、その他テキストエディタで）プレビューが全然表示されません。ちゃんと色々なサイトみて、html previewをインストールしたし、画面にもプレビュー画面自体は表示されている。なのに文字を打っても白い画面のまま。なぜ！？
A１．headの<title></title>の中に文字を入れていませんか？
これは、サイトのタブの部分に表示される部分の文字になるので、プレビュー画面には表示されません。何か文字を打って試したい場合は、別途<title>の下の行に
<h1></h1>と打ってみてください。これで解決した場合は、
プレビュー画面ではなく「打つ場所が間違っていた（表示されないところに打っていた）」ということです。
Q２ cssのプレビュー画面が表示されない。。フォントの大きさとかを変えたのに、なぜ！？
A2 htmlとcssの紐づけ、忘れていませんか？
Progate（プログラミング学習サービス）などの初級の基礎で勉強しましたが、Progateは予め別々のファイルにhtmlとcssを書き込めるようになっていますが、
本当はこれは紐づけを行わないといけません。
そのため、cssでフォントサイズ等を変える前に、htmlのheadのtitleの下の行あたりに、必要な情報を書いて、リンクさせましょう。
参考コード：
<link rel=”stylesheet” href=”stylesheet.css”>
これで、htmlとcssの紐づけができたので、
cssでフォントサイズ等を変えてみてください。反映されましたか？
※Ctrl+Sで上書きするとプレビューに反映されるかと思います。
終わりに
いかがでしたでしょうか。
私がこの問題にぶちあたったのはプログラミングを初めて2日目の時だったので、本当に当たり前すぎて恥ずかしいのですが、もし万が一同じような問題に悩んでいる方がいたら・・・！という思いで記事にさせていただきました。
ぜひ参考になれば嬉しいです。
コメント