CSSの記述方法（HTML内埋め込みと外部ファイル）

プログラミング

2014.01.272018.12.27

この記事は約1分で読めます。

HTMLとCSS。

いざコーディングしようと思ったときに、いつも忘れているのでメモ。

HTML内に埋め込む場合は、「head」タグ内あたりに「style」タグで書く。

CSS（拡張子「.css」）ファイルを外部ファイルと読み込む場合は、「link」タグで、「href」属性でパスを指定する。

HTML本体はこんな感じ。

「style」タグ内がHTMLに影響しないようコメントアウトとしておく方がよいみたい。

<html>
<head>
  <!-- 外部ファイル読込 -->
  <link rel="stylesheet" type="text/css" href="example.css">

  <!-- HTML内埋め込み -->
  <style type="text/css">
  <!--
    /* 青 */
    p {
      color : blue;
      border : 1px solid;
    }
    /* 赤 */
    .red {
      color : red;
      border : 1px solid;
    }
  -->
  </style>
</head>
<body>
  <p>段落（青）</p>
  <p class="red">段落（赤）</p>
  <p id="green">段落（緑）</p>
</body>
</html>

CSSファイルはこんな感じ。

/* 緑 */
#green {
  color : green;
  border : 1px solid;
}

クラス指定の場合は「.」（ドット）を、ID指定の場合は「#」（シャープ）をつける。

なお、HTMLとJavaScriptのコメントアウトは以下のよう。

<!-- HTMLのコメントアウト -->

/* CSSのコメントアウト */

参考サイト

スタイルシート［CSS］/CSSの基本 – TAG index Webサイト