[CSS] CSSを定義する場所

2019年1月18日2019年3月23日

CSS定義の記述する場所は以下３つの方法があります。

直接タグに記述する方法

HTMLのタグにCSSを直接指定するサンプルです。

<p style="border:1px solid #808080;background:yellow;padding:3px;">
  あいうえお
</p>

あいうえお

</p>

【結果】

あいうえお

部分的にスタイルを指定したい場合などには便利ですが、メンテナンス性は悪いです。

HTMLヘッドタグ内に記述する方法

HTMLのヘッド部分にCSSを直接指定するサンプルです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <script>
      .hoge{
        border:1px solid #808080;
        background:yellow;
        padding:3px;
      }
    </script>
  </head>
  <body>
    <p class="hoge">あいうえお<p>
  </body>
</html>

<!DOCTYPE html>

<head>

.hoge{

border:1px solid #808080;

background:yellow;

padding:3px;

}

</script>

</head>

<body>

<p class="hoge">あいうえお<p>

</body>

</html>

【結果】

あいうえお

別ファイルに記述して参照する方法

このような感じで別ファイル（cssファイル）に記述したCSSをHTMLに読み込ませることができます。（HTML5）

@charset "utf-8";

.hoge{
  border:1px solid #808080;
  background:yellow;
  padding:3px;
}

@charset "utf-8";

.hoge{

border:1px solid #808080;

background:yellow;

padding:3px;

}

charsetは省略可です。指定する場合はcssファイルの文字コードを指定してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <p class="hoge">あいうえお<p>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p class="hoge">あいうえお<p>

</body>

</html>

【結果】

あいうえお

この方法だとスタイルを変更したい時には、１か所直すだけで一括でスタイル変更できるので管理がとても楽です。

CSS

Posted by tora