Atomでプレビュー画面にCSSを反映させる方法

テキストエディター「Atom」でCSSをプレビューに反映させる方法について説明しています。

プレビュー画面にCSSを反映させたい

テキストエディターで有名な「Atom」。ホームページなりブログなりを運営してる人の中にはこれを使って下書きをしてる人がいると思う。特に使いやすさを求めてる人とか。

しかしAtomは初期設定ではCSSが設定されていないためプレビュー画面を開いてもただの文章が並ぶだけの味気ないものとなっている。

ホームページやブログで独自にCSSを設定してる人は「コードがどういう風に表示されてるのかAtom上で確認したい」と思うところだろう。そこでAtomにCSSを反映させる方法について説明していく。

デフォルトで搭載されているMarkdownプレビューを使っている場合。

上のメニューから「ファイル」→「設定」を選択する。

左のメニューから「テーマ」を選択し、「スタイルシート」の部分をクリックする。

スタイルシートが出てくるのでCSSコードを書き込んで保存する。

コードに間違いがあるとエラーが出て反映されないので注意。

「atom-html-preview」というHTMLプレビューを使っている場合。

まず新規ファイルを開いてそこにCSSコードを書き込み、CSSファイルとして保存する。コードに間違いがある場合は反映されないので注意（エラーが出る）。

CSSを反映させたいHTMLファイルを開き、一番上の行に以下のコードを追加する（どこでもいいらしいが誤操作で消えたりするのはめんどくさいので一番上推奨）。***.cssが先ほど作成したCSSファイル。

CSSファイルとCSSを反映させたいHTMLファイルは同じフォルダ上にある必要があるので注意。

おまけとして載せておきます。

こちらの「HTML&CSS->Webデザイン入門」または「HTML&CSS->リファレンス」が参考になります。