CSS3の概要
CSS3は、Webページのデザインやレイアウトを制御するためのスタイルシート言語で、HTMLで作成された要素に対して、色、サイズ、間隔、配置などの視覚的なスタイルを適用します。CSS3は、以前のバージョンに比べて新機能が多数追加され、より高度で表現力豊かなデザインが可能です。このガイドでは、CSS3の基本から応用までを、具体的なコード例とともに解説します。
1. remを使ってみよう
remとemの違い
CSSでのフォントサイズ指定には、remとemという単位があります。remはルート要素（通常はhtmlタグ）のフォントサイズを基準とし、emは親要素のフォントサイズを基準とします。これにより、remは一貫したスケーリングを提供し、emは相対的なスケーリングを提供します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 - rem vs em</title>
<style>
html {
font-size: 16px;
}
.container {
font-size: 1.5rem;
}
.text {
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="container">
<p class="text">これは1.2emのテキストです。</p>
</div>
</body>
</html>
caniuse.comの見方
caniuse.comは、CSS3のプロパティや機能が各ブラウザでどの程度サポートされているかを確認できる便利なサイトです。各プロパティについて、サポート状況を緑（サポートあり）、赤（サポートなし）などの色で表示しています。
2. rgba()､hsla()を使ってみよう
rgba()とhsla()とは
rgba()は、赤(Red)、緑(Green)、青(Blue)の色成分に加えて透明度(Alpha)を指定できるカラー表現方法です。hsla()は色相(Hue)、彩度(Saturation)、輝度(Lightness)、透明度(Alpha)を指定する方法です。どちらも背景色やテキスト色などに使用されます。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 - rgbaとhsla</title>
<style>
.rgba-box {
background-color: rgba(255, 0, 0, 0.5);
padding: 20px;
color: white;
}
.hsla-box {
background-color: hsla(120, 100%, 50%, 0.3);
padding: 20px;
color: white;
}
</style>
</head>
<body>
<div class="rgba-box">これはrgbaを使ったボックスです。</div>
<div class="hsla-box">これはhslaを使ったボックスです。</div>
</body>
</html>
3. opacity()で透明度を操作しよう
opacityとは
opacityプロパティを使用すると、要素全体の透明度を指定できます。値は0（完全に透明）から1（不透明）までの間で設定します。opacityは、背景、テキスト、画像など、要素内のすべてのコンテンツに適用されます。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 - Opacity</title>
<style>
.transparent-box {
opacity: 0.5;
background-color: blue;
padding: 20px;
color: white;
}
</style>
</head>
<body>
<div class="transparent-box">このボックスは半透明です。</div>
</body>
</html>
4. 属性セレクタを使ってみよう
属性セレクタとは
CSSの属性セレクタは、特定の属性を持つ要素を選択するために使用されます。以下のように、指定された属性値に基づいて要素を選択できます。
-
a[href^="foo"]:href属性が「foo」で始まるリンクを選択します。 -
a[href$="foo"]:href属性が「foo」で終わるリンクを選択します。 -
a[href*="foo"]:href属性に「foo」が含まれているリンクを選択します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 - 属性セレクタ</title>
<style>
a[href^="https"] {
color: green;
}
a[href$=".pdf"] {
color: red;
}
a[href*="example"] {
color: blue;
}
</style>
</head>
<body>
<a href="https://example.com">HTTPSリンク</a><br>
<a href="document.pdf">PDFリンク</a><br>
<a href="https://www.example.com/page">Exampleリンク</a>
</body>
</html>
5. nth-childなどを使ってみよう
nth-childなどとは
CSSのnth-childやlast-childは、要素が兄弟要素の中で特定の位置にある場合にその要素を選択するために使用されます。
-
:nth-child(n): n番目の子要素を選択します。 -
:last-child: 最後の子要素を選択します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 - nth-child</title>
<style>
li:nth-child(2) {
color: blue;
}
li:last-child {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2 (Blue)</li>
<li>Item 3</li>
<li>Item 4 (Bold)</li>
</ul>
</body>
</html>
6. nth-of-typeなどを使ってみよう
nth-of-typeなどとは
nth-of-typeやfirst-of-typeは、同じタイプの兄弟要素の中で特定の位置にある要素を選択します。
-
:first-of-type: 最初の要素を選択します。 -
:last-of-type: 最後の要素を選択します。 -
:nth-of-type(n): n番目の要素を選択します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 - nth-of-type</title>
<style>
p:first-of-type {
color: red;
}
p:last-of-type {
color: blue;
}
</style>
</head>
<body>
<p>最初の段落 (Red)</p>
<p>中間の段落</p>
<p>最後の段落 (Blue)</p>
</body>
</html>
7. もっと擬似クラスを見てみよう
擬似クラスとは
擬似クラスは、要素の特定の状態や条件に基づいてスタイルを適用するために使用されます。いくつかのよく使われる擬似クラスを見てみましょう。
-
:not(): 特定の要素を除外します。 -
:empty: 要
素が空の場合に適用されます。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 - 擬似クラス</title>
<style>
p:not(.special) {
color: gray;
}
p:empty {
display: none;
}
</style>
</head>
<body>
<p>この段落は灰色です。</p>
<p class="special">この段落は除外されています。</p>
<p></p> <!-- この段落は表示されません -->
</body>
</html>
おわりに
CSS3は、Webデザインをより魅力的でインタラクティブにするための強力なツールセットを提供します。今回学んだ各プロパティやセレクタを活用して、スタイリッシュでレスポンシブなデザインを実現してください。実践を重ねることで、より洗練されたデザインができるようになりますので、ぜひコードを試して学びを深めていきましょう。