デザイン

DESIGN

公開：2024-05-03

CSS3とは？意味をわかりやすく簡単に解説

text: XEXEQ編集部

CSS3とは

CSS3はCascading Style Sheets(カスケーディングスタイルシート)の最新バージョンです。CSSはHTMLやXMLなどのマークアップ言語で記述されたドキュメントのスタイル(見た目)を指定するための言語になります。

CSS3では従来のCSSの機能に加えて、新しいセレクターや効果、レイアウト機能などが追加されています。これにより、よりリッチで柔軟性の高いWebデザインを実現できるようになりました。

また、CSS3ではアニメーションやトランジションといった動的な効果も実装可能です。これらの機能を活用することで、Webサイトのインタラクティブ性を高められます。

CSS3の登場により、JavaScriptに頼らずともCSS単体で多彩な表現が可能になりました。これによって、Webサイトのパフォーマンス向上にも寄与しているのです。

ただし、CSS3の新機能は古いブラウザでは対応していない場合があります。そのため、様々なブラウザで確認しながら使用していく必要がありますね。

CSS3のセレクター

CSS3のセレクターに関して、以下3つを簡単に解説していきます。

• 属性セレクター
• 疑似クラス
• 結合子

属性セレクター

属性セレクターはHTML要素の属性値に基づいて要素を選択するセレクターです。例えば、特定のclass属性を持つ要素だけにスタイルを適用したい場合に使用します。

属性セレクターを使うことで、より細かな要素の指定が可能になります。複数の属性値を組み合わせることもできるため、柔軟なスタイリングが実現できるのです。

/* id属性がexampleで始まる要素を選択 */
[id^="example"] {
color: blue;
}

疑似クラス

疑似クラスは要素の状態に基づいてスタイルを適用するためのセレクターです。リンクの未訪問状態や、マウスホバー時の状態などを指定できます。

CSS3では:not()や:empty、:targetなどの新しい疑似クラスが追加されました。これらを活用することで、より動的なスタイリングが可能になっています。

/* リンクの未訪問状態 */
a:link {
color: blue;
}

/* マウスホバー時 */
a:hover {
text-decoration: underline;
}

結合子

結合子は複数のセレクターを組み合わせるための記号です。要素間の階層関係や隣接関係を指定することができます。

CSS3では隣接兄弟結合子や一般兄弟結合子が追加されました。これにより、より詳細な要素の関係性に基づいたスタイリングが可能になったのです。

/* divの直下にあるpを選択 */
div > p {
font-weight: bold;
}

/* h1の後ろにあるpを選択(隣接兄弟結合子) */
h1 + p {
margin-top: 10px;
}

CSS3のレイアウト機能

CSS3のレイアウト機能に関して、以下3つを簡単に解説していきます。

• Flexboxレイアウト
• Gridレイアウト
• マルチカラムレイアウト

Flexboxレイアウト

Flexboxはフレキシブルなボックスレイアウトを実現するためのCSS3のレイアウトモードです。要素を横並びにしたり、均等に配置したりすることが容易にできます。

Flexboxを使うことで、レスポンシブデザインの実装が簡単になります。様々なデバイスサイズに適応したレイアウトを組むことができるからです。

.container {
display: flex;
justify-content: space-between;
}

.item {
flex: 1;
}

Gridレイアウト

Gridは二次元のグリッドベースのレイアウトを実現するためのCSS3のレイアウトモードです。行と列を定義し、要素を自由に配置することができます。

Gridレイアウトを活用することで、複雑なデザインも直感的に実装可能です。要素の配置や幅、高さなどを柔軟に指定できるのが特徴ですね。

.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 100px 1fr;
}

マルチカラムレイアウト

マルチカラムレイアウトはテキストを新聞のような段組みで表示するためのCSS3のレイアウト機能です。column-countやcolumn-gapなどのプロパティを使用します。

マルチカラムレイアウトを使うと、読みやすく見栄えの良いテキストコンテンツを作成できます。レスポンシブデザインにも対応しているため、様々なデバイスで最適な表示が可能です。

.columns {
column-count: 3;
column-gap: 20px;
}

CSS3の視覚効果

CSS3の視覚効果に関して、以下3つを簡単に解説していきます。

• ボックスシャドウ
• テキストシャドウ
• グラデーション

ボックスシャドウ

box-shadowプロパティは要素にシャドウ(影)を追加するためのCSS3のプロパティです。水平方向と垂直方向のオフセット、ぼかしの半径、色を指定することができます。

ボックスシャドウを使うことで、要素に立体感を持たせることができます。マテリアルデザインなどでよく使われる効果の一つですね。

.box {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

テキストシャドウ

text-shadowプロパティはテキストにシャドウを追加するためのCSS3のプロパティです。ボックスシャドウと同様に、オフセットやぼかしの半径、色を指定します。

テキストシャドウを活用することで、テキストを際立たせたり、特殊な効果を与えたりすることができます。ただし、読みにくくならないよう適度な使用が大切です。

h1 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

グラデーション

CSS3ではlinear-gradientやradial-gradientを使ってグラデーションを表現できます。色の遷移をスムーズに表現することが可能になりました。

グラデーションは背景色や装飾として幅広く活用されています。複数の色を指定したり、角度を変えたりと、バリエーション豊かに使うことができるのです。

.gradient {
background: linear-gradient(to right, #ff0000, #0000ff);
}

「デザイン」に関するコラム一覧「デザイン」に関するニュース一覧