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

Programming プログラミング
この記事は約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サイト

スポンサーリンク
スポンサーリンク
プログラミング
えふめん

コスパ・効率重視の大阪人。でも口数少なめ。O型だけど割とキッチリ。心穏やかに生きていきたいと日々願っている。

特技:VBAで仕事の効率化。とりあえずググる。

えふめんをフォローする
\よかったらシェアしてね/
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

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