ほんっとにはじめてのHTML5とCSS3：【65-1】エレメンタルセレクター（要素名で指定するセレクター）

【65-1】エレメンタルセレクター（要素名で指定するセレクター）

最終更新日：2022年11月10日　（初回投稿日：2022年11月10日）

今回から CSSのセレクター（Selectors）を1つずつ見ていきましょう。

今回は、
・要素名（HTMLタグの名前）で指定するセレクター
・すべての要素を指定するセレクター（ユニバーサルセレクターと言います）
の2種類です。
2つ合わせて W3C仕様書ではエレメンタルセレクター（Elemental selectors）と呼んでます。

そもそもセレクターってなんだ？というかたは、前回の
【65】CSSのセレクターを整理しよう（セレクター一覧）
をご覧ください。

本日のINDEX

エレメンタルセレクター
1. タイプ（タグ名）セレクター
2. ユニバーサルセレクター（*）

参考：
・Selectors Level 4 | W3C Working Draft
・CSS セレクター | MDN

エレメンタルセレクター

エレメント（Element）とは、この場合 HTMLの要素のことです。
エレメンタルセレクターは要素そのものをセレクターにします。
CSSセレクターの歴史の中で一番古い Level 1 からあるものです。

タイプ（タグ名）セレクター

HTML文書内に書いている要素名をそのままセレクターにしたものがタイプセレクターです。要素のタイプによってセレクトするという意味ですね。
HTMLの「タグ」をそのまま使うので「タグ名セレクター」とも言います。

これを使えば、HTML文書の中の その要素すべてに同じスタイルを適用できます。
なので、そのHTML内の「ある要素」を全部同じスタイルにしたいときに使います。

例えば、HTML文書内に1コしかない要素、<body> や <h1>とかに使ったり。
また、ヘディング要素（ <h2>〜<h6>）や、段落の <p>要素とかに指定すれば、ページのデザインフォーマットを整えることができます。

<body>に使うなら、画面全体の背景色や背景画像、サイズやマージンなど、全体の見た目のフォーマットが決まります。
特にフォントや文字色などは <body>に1度書けば、中身の要素はそれを継承するので、各要素に何度も指定する必要がなくて便利。

body {
  background:#fff;
  margin: 0;
  padding: 0;
  width:100%;
  font: 1em/1.6 Verdana, "Hiragino Sans", Meiryo, sans-serif;
  color: #666;
}

<h1>要素は、そのページのタイトルなので普通1ページに1コだけ使います。
タイトルらしく上部に置くのが普通。
ブラウザであらかじめ太くでかい文字のスタイルに決められていますが、文字色やフォントサイズ、場合によっては背景画像とかを指定してオリジナルフォーマットに整えます。

h1 {
  color: #ccc;
  font-size: 1.1em;
  margin:0 auto;
  background :url(../images/image.png) center top no-repeat;
}

<p>要素に使うんだったら、段落なのでマージンを整えたりですかね。
フォントやフォントサイズやフォントカラーは <body>で指定したものが継承されていますので特に変えたくなければそのままで。

p {
  margin: 0 0 2em;
  border-top:dashed 1px #ccc;
}

ユニバーサルセレクター（*）

「*（アスタリスク）」だけのセレクターは ユニバーサルセレクター（全称セレクター）と言って、HTML文書上のすべての要素を指定できるセレクターです。

下のサンプルコードは、全要素の box-sizingプロパティを border-boxにしたもの。
これで、これ以降の width や height でのサイズ指定も快適になります。

* {
  box-sizing: border-box;
}

box-sizingプロパティについては、
【10】ボックスモデル（margin, padding, border を使いこなそう）をご覧ください。

「*」に擬似要素をつけて使うこともできます。
下のサンプルでは、「*::before」「*::after」という書き方をしていますね。

*, *::before, *::after {
  box-sizing: border-box;
}

疑似要素::before、::after は、それぞれ要素の前側、後側にコンテンツを生成します。
上のコードでは、その生成されたコンテンツのボックスモデルも box-sizing: border-box を指定して、サイジングを快適にしようというものです。

疑似要素に関しては、後日セレクターとして記事にしますが、すでにアップした関連記事はこちら↓
【3】id とか classって何？（セレクタの「種類」を知っておこう）｜疑似要素
 【22-2】要素を絶対位置に指定する position: absolute｜疑似要素を使った装飾

ところで、上のコードでは、セレクター部分で「,（カンマ）」で区切った使い方をしていますが、これは「セレクターリスト」といいます。
「セレクターリスト」はけっこう重要なので記事を分けます。次回解説します。

次回予告

というわけで、次回は「ちょっとメモ」で「セレクターリスト」についてメモります。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。