CSSのリアルタイムプレビュー

レポート · Mar 08, 2021

CSSのリアルタイムプレビューってできないのでしょうか？

HTMLとPHPファイルのみプレビューできますと表示されるのですが。。

レポート · Mar 09, 2021

優也5C58 さん、こんにちは。

CSSは、HTML文書の見ためを修飾するために存在します。

CSSはHTMLとつないではじめて、表示に関わってくるコードです。

CSSファイル単体では、リアルタイムプレビュー（←ブラウザ表示を確認する機能）が使えないのはそのためです。

つぎの、cssで本文中のp要素の文字を赤色にしている例を使って補足します。

HTMLのlink要素でcssファイルを自身につなぎ、「p要素内の文字色を赤にする／p{color:red;}」という修飾命令を受け取っています。

CSSコード単体では、何を修飾するかが書かれておらず、ブラウザで本文が表示されません。

[例]

【HTMLコード】※htmlファイルに記述します。

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p>今日は天気です</p>
</body>
</html>

【CSSコード】※cssファイルに記述します。この例ではファイル名がtest.cssです。

p{color:red;}

ご参考になれば幸いです。
(^_^)

レポート · Mar 15, 2021

ご丁寧にありがとうございます。

htmlにcssのリンクを
href="test.css">こちらのように、内に書き込んだのですが、うまく適用されません。

もし原因が分かりましたら、御指南いただければと思います。

よろしくお願いいたします。

レポート · Mar 16, 2021

優也5C58 さん、こんにちは。

順を追っていくつか、状況の確認をお願いいたします。

次の3つを確認できれば、CSSファイルをHTMLにリンクする方法についても解決すると思います。

もしそれでも、解決の糸口が見つからないということでしたら、優也5C58さんが作成されている、HTMLファイルとCSSファイルのコードを見せていただければと思います。

（現状、こちらにいただいている情報だけでは、優也5C58さんのところでなにが起こっているのかも想像できないでおります。）

1）そもそもの、優也5C58さんのご質問「CSSのリアルタイムプレビューってできないのでしょうか？」についてですが、

● CSSファイルを開いた状態では「Dreamweaverのリアルタイムプレビュー」がつかえない

という理屈については、ご理解いただけましたでしょうか？※最初に私が解説した内容です。

2）「htmlにcssのリンクを
href="test.css">こちらのように、内に書き込んだのですが、うまく適用されません。」という、今回の新しいご質問ですが、

● href="test.css"> ではなく、<link rel="stylesheet" href="test.css"> と記述します。

linkタグを用いてCSSファイルをHTMLファイルにつなげる構文です。
タグの構文については、下記を参照ください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/link

● 優也5C58さんが、HTMLファイルにつなげようとしているCSSファイルのファイル名は test.css で合ってますか？CSSファイルのファイル名が test でなければ、ご自身のCSSファイル名に合わせてください。

● <link rel="stylesheet" href="test.css"> と書く場合、CSSファイルである test.css とこれを書き記す HTMLファイルは、同じフォルダ内に存在しなければなりません。

ファイルのパス指定、という部分のお話ですが、CSSファイルが別のフォルダにある場合は、書き方が異なります。ファイルのパス指定については、次のページの「URL とパスに関する簡単な入門」をご覧ください。

3）（余談です。）

ここまでの確認事項については、Dreamweaverの使い方というよりは、HTMLやCSSの記述ルール（構文）を理解しておく必要があります。

こちらは、Dreamweaverの操作について、ユーザー同士が解決し合うコミュニティですので、コーディングの基礎知識、HTMLやCSSの基礎知識が前提として必要になると思います。

まずは、今回の部分に該当する所のHTMLやCSSの記述ルールを、文法書などでお復習いいただければ幸いです。

わたしは、YouTubeチャンネルでHTMLやCSSのライブ授業を公開しているのですが、もしよろしければ、ご参考までに紹介いたします。

『 CSSの記述ルールとCSSを用いて修飾する仕組み』：2019年秋冬【いまどきのHTML＆CSSコーディングにチャレンジ】第4回
https://youtu.be/RYDJjw986ag?t=1192　

YouTubeで公開している、ライブ授業の途中19分54秒から、CSSの記述場所という項目で、外部のCSSファイルとのリンクについて解説しています。

Adobe Community