特定のIDのスタイルを設定する - IDセレクター - CSS

特定のIDのスタイルをスタイルシートで設定するコードを紹介します。

書式

IDのスタイルを設定する場合は

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

と記載します。ID名の先頭に"#"を記述します。

コード例

IdSelector.css

#MyID1 {
  font-size:20px;
  color:#404040;
  background-color:#ffe466;
}

#MyID2 {
  font-size:18px;
  color:#404040;
  background-color:#98cdff;
}

#MyID3 {
  font-size:16px;
  color:#404040;
  background-color:#f5b0ff;
}

IdSelector.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 type="text/css" rel="stylesheet" href="IdSelector.css" />
</head>
<body>
    <div id="MyID1">ペンギンは空を飛べない</div>
    <div id="MyID2">シロクマも空を飛べない</div>
    <div id="MyID3">イルカも空を飛べない</div>
</body>
</html>

表示結果

上記のHTMLをWebブラウザで表示すると下図の画面が表示されます。

このページのキーワード

特定のIDのスタイルを指定する - IDセレクター
特定のIDのスタイルを適用する - IDセレクター

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

特定のIDのスタイルを設定する - IDセレクター - CSS

書式

コード例

IdSelector.css

IdSelector.html

表示結果

関連するページ