CSS(Cascading Style Sheets)は、ウェブページのデザインやレイアウトを管理するためのスタイルシート言語です。HTMLとともに使用され、ウェブページに色、フォント、レイアウト、レスポンシブデザイン、アニメーションなどを加えることができます。この記事では、CSSの基本から応用までを網羅的に解説します。
1. CSSの基本構造
CSSは、セレクタ、プロパティ、値の3つの基本的な部分で構成されています。これにより、ウェブページ上の特定の要素にスタイルを適用することができます。

cssセレクタ { プロパティ: 値; }
例えば、以下のCSSコードは、HTMLの
タグに対してフォントサイズを設定します。
cssp {
font-size: 16px;
}
- セレクタ: スタイルを適用したいHTML要素を指定します。この場合、
p
は段落要素を意味します。 - プロパティ: スタイルを設定する項目を指定します。この例では、
font-size
がフォントの大きさを示しています。 - 値: プロパティに設定する具体的な値です。この場合、
16px
は16ピクセルのサイズを意味します。
2. CSSの適用方法
CSSは、HTMLドキュメントにいくつかの方法で適用できます。それぞれの方法について説明します。
インラインCSS
インラインCSSは、HTMLタグ内で直接スタイルを指定する方法です。タグのstyle
属性を使用して、個別の要素にスタイルを適用します。
html<p style="color: blue;">これは青い文字の段落です。p>
内部CSS
内部CSSは、HTMLドキュメント内のタグ内に
タグを使用して記述します。この方法は、特定のHTMLページにスタイルを適用する場合に使用されます。html<head>
<style>
p {
color: red;
}
style>
head>
<body>
<p>これは赤い文字の段落です。p>
body>
外部CSS
外部CSSは、スタイルシートを別のファイルとして作成し、HTMLファイルからリンクする方法です。この方法は、複数のページで共通のスタイルを適用する場合に最も効果的です。
html<head>
<link rel="stylesheet" href="styles.css">
head>
外部CSSファイル(styles.css
)には、以下のようにスタイルを記述します。
cssp {
color: green;
}
3. CSSセレクタの種類
CSSには、様々なセレクタの種類があります。セレクタを適切に使用することで、スタイルを効率的に適用できます。
要素セレクタ
特定のHTMLタグにスタイルを適用します。
cssh1 {
font-size: 32px;
}
クラスセレクタ
クラス名を指定して、同じクラスが適用されたすべての要素にスタイルを適用します。クラスセレクタは、ピリオド(.
)で始めます。
html<p class="highlight">強調された段落p>
css.highlight {
background-color: yellow;
}
IDセレクタ
特定のIDを持つ要素にスタイルを適用します。IDセレクタは、ハッシュ(#
)で始めます。
html<p id="unique">ユニークな段落p>
css#unique {
font-weight: bold;
}
子セレクタ
特定の要素の直下の子要素にスタイルを適用します。
html<div>
<p>親要素の中の段落p>
<p>親要素の中の別の段落p>
div>
cssdiv > p {
color: blue;
}
4. ボックスモデル
CSSのボックスモデルは、ウェブページの要素がどのようにレイアウトされるかを理解するための重要な概念です。ボックスモデルには、以下の4つの部分があります。
- コンテンツ(content): 実際のコンテンツが表示される領域。
- パディング(padding): コンテンツとボーダーの間の空白領域。
- ボーダー(border): パディングとマージンの間に位置する枠線。
- マージン(margin): 他の要素との間の空白領域。
ボックスモデルを適切に管理することで、要素間のスペースを調整できます。
cssdiv {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}
5. レイアウト技法
CSSを使用したレイアウトのテクニックには、いくつかの方法があります。ここでは、代表的なものを紹介します。
フレックスボックス(Flexbox)
フレックスボックスは、要素を柔軟に配置するための強力なレイアウトツールです。要素を行または列に配置し、スペースを均等に分配できます。
css.container {
display: flex;
justify-content: space-between;
}
グリッド(Grid)
CSSグリッドは、2次元のレイアウトを作成するために使用されます。行と列を使用して、要素を細かく配置できます。
css.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
6. メディアクエリ
メディアクエリを使用すると、異なる画面サイズに応じてスタイルを変更できます。これにより、レスポンシブデザインを実現できます。
css@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
7. アニメーションとトランジション
CSSでは、要素にアニメーションやトランジションを追加することができます。これにより、ユーザーインターフェースに動きを加えて、よりインタラクティブで魅力的なデザインを作成できます。
トランジション
トランジションを使用すると、要素のスタイル変更がスムーズに行われます。
cssbutton {
transition: background-color 0.3s;
}
button:hover {
background-color: red;
}
アニメーション
アニメーションを使用して、要素を動かしたり、スタイルを変更したりすることができます。
css@keyframes example {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
div {
animation: example 2s ease-in-out;
}
結論
CSSは、ウェブデザインの基盤となる重要な技術です。スタイルシートを適切に活用することで、視覚的に魅力的で、機能的なウェブサイトを作成できます。この記事で紹介した基本から応用までのテクニックを活用し、CSSのスキルを向上させていきましょう。