CSSの簡易確認用のひな型ファイル

CSS

いきなり本番用のソースコードで試すのではなく、まずは小さいコードで動作を確認してから本番用のソースコードに反映した方が作業がスムーズになることがあります。

本記事では簡易的にCSSの動作を確認するためのテンプレートを用意しました。

HTMLファイル

下記はhtmlファイルの内容です。ファイル名はなんでもかまいません。

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div class="A B C qaz">
            <p>test1</p>
        </div>
        <div class="D qaz">
            <p>test2</p>
        </div>
    </body>
</html>

CSSファイル

下記はcssファイルの内容です。上記のHTMLファイルと同じフォルダーに配置してください。

ファイル名は”style.css”にしてください(または別のファイル名にする場合は、上記HTMLファイルの中の参照するCSSファイル名前を適宜修正してください)。

.D.qaz{
    background-color: tomato;
}

以上となります。参考になれば幸いです。

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