こんにちは、無限∞道場運営チームです！
HTMLでウェブページの骨組みを作成した後、次に学ぶべきは CSS（Cascading Style Sheets） です。CSSは、ウェブページのデザインやレイアウトを指定するためのスタイルシート言語で、ページの外観を整えるために必要不可欠です。この記事では、CSSの基本について解説し、ウェブページをより魅力的にする方法を紹介します。
1. CSSとは？
CSS は、ウェブページのスタイル（デザインやレイアウト）を指定するために使われる言語です。具体的には、テキストの色やフォント、レイアウト、背景画像、余白など、HTMLだけでは実現できない見た目をコントロールします。HTMLはウェブページの「骨組み」を作成しますが、CSSはその「装飾」を担当します。
2. CSSの基本的な仕組み
CSSは、セレクタ と プロパティ の組み合わせで構成されます。セレクタでどの要素にスタイルを適用するかを指定し、プロパティと値でその要素に適用するスタイルを定義します。
CSSの基本的な構文は以下のようになります。
cssコードをコピーするセレクタ {
プロパティ: 値;
}
例：
cssコードをコピーするh1 {
color: blue;
font-size: 24px;
}
この例では、<h1> タグに対して文字色を青にし、文字サイズを24pxに指定しています。
3. CSSの適用方法
CSSをHTMLに適用する方法は主に3つあります。
1. インラインCSS
HTMLタグに直接スタイルを記述する方法です。style 属性を使って、個々の要素にスタイルを適用します。
htmlコードをコピーする<h1 style="color: blue; font-size: 24px;">こんにちは、世界！</h1>
2. 内部CSS（内部スタイルシート）
<head> タグ内に <style> タグを使って、ページ全体に適用するスタイルを記述する方法です。
htmlコードをコピーする<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
3. 外部CSS（外部スタイルシート）
別ファイルにスタイルを記述し、そのファイルをHTMLにリンクする方法です。多くのページで共通のスタイルを使用する際に便利です。
htmlコードをコピーする<head>
<link rel="stylesheet" href="style.css">
</head>
style.css ファイルに以下のようなCSSを記述します。
cssコードをコピーするh1 {
color: blue;
font-size: 24px;
}
4. CSSの基本的なプロパティ
CSSにはさまざまなプロパティがあり、ウェブページの外観を自由にカスタマイズできます。ここでは、よく使われる基本的なプロパティをいくつか紹介します。
1. 色の指定
文字の色や背景色を指定するプロパティです。
color— 文字の色を指定します。background-color— 背景の色を指定します。
cssコードをコピーするp {
color: red;
background-color: yellow;
}
2. フォントの設定
フォントに関するスタイルを指定するプロパティです。
font-family— 使用するフォントを指定します。font-size— フォントサイズを指定します。font-weight— フォントの太さを指定します（例：bold、normal）。
cssコードをコピーするp {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
}
3. 余白の調整
要素の内側と外側の余白を指定するプロパティです。
padding— 要素の内側の余白を指定します。margin— 要素の外側の余白を指定します。
cssコードをコピーするp {
padding: 10px;
margin: 20px;
}
4. ボックスモデル
CSSでは、すべての要素は ボックスモデル に基づいて配置されます。ボックスモデルは、要素が持つ4つの領域で構成されます。
- コンテンツ — 要素の内容そのもの。
- パディング（padding） — コンテンツとボーダーの間のスペース。
- ボーダー（border） — パディングの周りの枠線。
- マージン（margin） — ボーダーの外側のスペース。
cssコードをコピーするdiv {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
この例では、要素の内容が幅200px、高さ100pxで、その周りに10pxのパディング、2pxのボーダー、20pxのマージンがあります。
5. 背景画像の設定
背景に画像を設定するプロパティです。
cssコードをコピーするbody {
background-image: url('background.jpg');
background-size: cover;
}
6. テキストの整列
テキストの配置を指定するプロパティです。
text-align— テキストの水平方向の位置を指定します（例：left、center、right）。
cssコードをコピーするh1 {
text-align: center;
}
5. クラスとID
CSSでは、特定の要素に対してスタイルを適用するために クラス と ID を使います。
クラス
複数の要素に同じスタイルを適用したい場合、クラスを使います。クラスは . で始まり、HTMLでは class 属性で指定します。
cssコードをコピーする.red-text {
color: red;
}
htmlコードをコピーする<p class="red-text">赤いテキスト</p>
<p class="red-text">これも赤いテキスト</p>
ID
特定の1つの要素に対してスタイルを適用したい場合、IDを使います。IDは # で始まり、HTMLでは id 属性で指定します。
cssコードをコピーする#unique-text {
color: blue;
}
htmlコードをコピーする<p id="unique-text">青いテキスト</p>
6. レスポンシブデザイン
現代のウェブ開発では、PCだけでなくスマートフォンやタブレットなど、さまざまなデバイスに対応する必要があります。レスポンシブデザイン では、CSSを使ってデバイスの画面サイズに応じたレイアウトを作成します。
メディアクエリ
メディアクエリ を使うことで、画面の幅に応じて異なるスタイルを適用できます。
cssコードをコピーする@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
この例では、画面の幅が600px以下の場合に、背景色がライトブルーに変わります。
まとめ
CSSを使うことで、HTMLで作成したウェブページを美しくデザインし、ユーザーにとって魅力的な体験を提供できます。今回紹介した基礎的なCSSプロパティを活用して、ウェブページのデザインを自由にカスタマイズしてみてください。
無限∞道場では、HTMLやCSSをはじめとしたウェブ技術を体系的に学び、実践的なスキルを身に付けることができます。CSSをさらに学び、より高度なデザインやレイアウトに挑戦してみましょう！
次回のセッションでは、JavaScriptの基礎についても学んでいきますので、ぜひ引き続きご参加ください！
