CSSの要素タイプセレクターとは？基本構文と実例をわかりやすく解説
CSSの要素タイプセレクターは、指定した種類の要素をすべて一括で選択するためのセレクターです。たとえば「li」と指定すれば、ページ内のすべてのリスト項目に同じスタイルが適用されます。HTML文書全体に共通のデザインを設定したい場合に非常に便利な、CSSの基本的なセレクターです。
構文
要素タイプセレクターの書き方は以下のとおりです。セレクター名として要素名をそのまま記述します。
element {
/*declarations*/
}
サンプルコード1：リストとdiv要素への適用例
次の例では、li 要素と div 要素に対してそれぞれスタイルを指定しています。
<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style: none;
margin: 5px;
border-bottom-style: dotted;
}
div {
box-shadow: inset 0 0 8px plum;
padding: 36px;
}
</style>
</head>
<body>
<div>
<pre> \(╪)(╪) /</pre>
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
出力結果
このコードを実行すると、次のような表示になります。
リストマーカーが非表示になり、各リスト項目の下に点線（dotted）が引かれ、div要素には内側にプラム色の影（box-shadow）が付いていることが確認できます。
サンプルコード2：テキストや角丸を組み合わせた応用例
続いて、テキストの中央揃えや角丸（border-radius）などを組み合わせた例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
li {
text-align: center;
list-style: none;
margin: 5px;
padding: 5px;
box-shadow: inset 0 0 15px yellowgreen;
}
div {
box-shadow: inset 0 0 8px orange;
padding: 36px;
width: 30%;
border-radius: 50%;
}
</style>
</head>
<body>
<div>
<ul>
<li>Hello</li>
<li>Guys</li>
</ul>
</div>
</body>
</html>
出力結果
このコードを実行すると、次のような表示になります。
このように要素タイプセレクターを使うことで、同じ種類の要素すべてに対して効率よくスタイルをまとめて適用できます。まずは基本となるタイプセレクターをしっかり理解し、その後クラスセレクターやIDセレクターなどと組み合わせていくと、より柔軟なスタイリングが可能になります。
-
CSSで要素を垂直方向に中央揃えする方法
CSSで要素を垂直方向に中央揃えする基本の考え方 CSSで要素を垂直方向に中央揃えにしたい場合、最もシンプルな方法の一つが上下のパディング（padding）を利用する手法です。要素の上部と下部に均等なパディングを設定することで、中身のテキストや画像が視覚的に中央に配置されているように見せることができます。 この方法は単純なレイアウトには手軽で有効ですが、高さが固定されたコンテナ内で厳密にセンタリングしたいケースでは、Flexboxなどのモダンな手法の方が適しています。まずは基本的なpaddingを使った例から見ていきましょう。 サンプルコード 以下のコードを実行すると、paddingプロパテ
-
CSSの子孫セレクタとは？基本の書き方と実行例をわかりやすく解説
CSSの子孫セレクタ（descendant selector）は、指定した要素の「内側にあるすべての子孫要素」にスタイルを適用するためのセレクタです。親要素と対象要素を半角スペースで区切って記述するのが特徴で、直下の子要素だけでなく、孫要素やそれ以降の階層にある要素もすべてマッチします。 子孫セレクタの基本的な書き方 構文は以下のように、親となるセレクタの後に半角スペースを空けて、対象となるセレクタを続けて記述します。 親セレクタ 対象セレクタ { プロパティ: 値; } たとえば div p と書けば、「div要素の中に存在するすべてのp要素」がスタイル適用の対象になります。divの直下