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

ブログ運営

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

 

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

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

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

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

 

Markdownプレビューの場合

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

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

 

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

 

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

 

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

 

HTMLプレビューの場合

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

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

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

<link rel=”stylesheet” href=”***.css”>

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

 

おまけ:CSSのカスタマイズに参考になりそうなサイト

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

サルワカ | サルでも分かる図解説明マガジン
サルワカはあらゆることを分かりやすく解説するメディアです。何か分からないことがあったときはサルワカへどうぞ!

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

コメント

タイトルとURLをコピーしました