iPentec.com / Document / カテゴリ: HTML / タグ: CSS CSSセレクター

指定したHTMLタグかつ、指定したIDが設定されているタグのスタイルを設定するコードと表示結果

概要

特定のHTMLタグでIDが特定の値を持つタグに対して画面表示時のスタイルを設定したい場合があります。この記事では、HTMLタグで指定したIDの場合にスタイルを設定するCSSの記述方法を紹介します。

Tips

特定のクラスが設定されているHTMLタグにスタイルを設定する方法はこちらの記事を参照してください。

書式

(タグ名)#(ID名){
  (スタイル記述)
}

例

コード

下記のコードを記述します。

TagAndIdSelector.css

h1#main {
  font-size:20px;
  color:#FF8080;
}

TagAndIdSelector1.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="TagAndIdSelector.css" />
</head>
<body>
    <h1 id="main">見出しABCD</h1>
    <p>段落1234567890</p>

</body>
</html>

TagAndIdSelector2.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="TagAndIdSelector.css" />
</head>
<body>
    <h2 id="main">見出しABCD</h2>
    <p>段落1234567890</p>
</body>
</html>

解説

h1タグでかつIDが"main"であった場合に限りスタイルを設定します。上記の例ではフォントサイズを20pixelにし、フォントカラーを"#FF8080"(ピンク)に設定します。

表示結果

上記のHTMLファイルをWeb表示します。下図の結果となります。

TagAndIdSelector1.html

H1タグでIDが"main"で記述された部分の文字色がピンクになっています。

指定したHTMLタグかつ、指定したIDが設定されているタグのスタイルを設定するコードと表示結果:画像1

TagAndIdSelector2.html

IDが"main"でもH2タグで記述されている場合はスタイルが適用されません。

指定したHTMLタグかつ、指定したIDが設定されているタグのスタイルを設定するコードと表示結果:画像2

このページのキーワード

指定したHTMLタグかつ、指定したIDが設定されているタグのスタイルを指定するコードと表示結果
指定したHTMLタグかつ、指定したIDが設定されているタグのスタイルを適用するコードと表示結果

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。最近は生成AIの画像生成の沼に沈んでいる。

作成日: 2013-01-23

目次

指定したHTMLタグかつ、指定したIDが設定されているタグのスタイルを設定するコードと表示結果

目次

概要

書式

例

コード

解説

表示結果

TagAndIdSelector1.html

TagAndIdSelector2.html

関連するページ