ハーマ先生
は～い！今日の講義を担当させていただくハーマ先生です！
ハーマ先生って誰やねんと思ったら記事の最下部に説明書いてあるから見てね～(投げやり)
世界一わかりやすい！～講義形式で学ぶサイト制作～:第12回
ハーマ先生
今日は**CSS（Cascading Style Sheets）**について学んでいくよ！CSSは、ウェブページのデザインやレイアウトを整えるための言語で、HTMLで作られた骨格に色やフォントなどのスタイルを付けるものだよ。
HTMLだけだとページがシンプルで味気ないもんね。CSSを使えばもっとおしゃれにできるってこと？
ウィーブ・ウェブ君
ハーマ先生
そうそう！CSSを使えば、見た目を一気にカスタマイズできるよ。今日は代表的なCSSの使い方を紹介していくね。
1. CSSの基本構造
ハーマ先生
まずは、CSSの基本的な構造を見てみよう。CSSは、セレクタ、プロパティ、値の3つの要素で成り立っているんだ。
cssコードをコピーするセレクタ {
プロパティ: 値;
}
セレクタって何？
ウィーブ・ウェブ君
ハーマ先生
セレクタは、どのHTML要素にスタイルを適用するかを指定する部分だよ。たとえば、bodyタグやpタグに対してスタイルを当てたい場合、そのタグ名がセレクタになるんだ。
例:
cssコードをコピーするbody {
background-color: lightblue;
}
p {
color: red;
}
- セレクタ:
bodyやpは、どのHTML要素にスタイルを適用するかを指定する部分。 - プロパティ:
background-colorやcolorは、どのスタイルを設定するかを指定。 - 値:
lightblueやredは、指定されたプロパティにどんな値を当てるかを決めます。
なるほど、HTMLの要素に対してスタイルを指定する仕組みなんだね！
ウィーブ・ウェブ君
2. CSSの適用方法
ハーマ先生
CSSをHTMLに適用する方法は大きく分けて3つあるんだ。外部スタイルシート、内部スタイルシート、そしてインラインスタイルだよ。それぞれの方法を見てみよう。
2.1. 外部スタイルシート
ハーマ先生
まずは、最も一般的な外部スタイルシートから説明するね。CSSファイルを外部で用意して、そのファイルをHTMLに読み込む方法だよ。これが一番きれいに管理できるんだ。
htmlコードをコピーする<head>
<link rel="stylesheet" href="style.css">
</head>
- 説明:
<link>タグを使って外部のCSSファイルを読み込む。この方法は、複数のHTMLページで同じCSSを使いたい場合に便利。
2.2. 内部スタイルシート
htmlコードをコピーする<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
- 説明:
<style>タグをHTMLファイルの<head>セクション内に書く方法。個別ページにだけ適用する場合に使われることが多い。
2.3. インラインスタイル
htmlコードをコピーする<p style="color: red;">このテキストは赤色で表示されます。</p>
- 説明: 直接HTMLタグ内でスタイルを指定する方法。素早く変更したい場合には便利だけど、管理が大変になることがあるので、なるべく避けるべきだよ。
外部スタイルシートを使えば、全体のデザインを一括して管理できるんだね！
ウィーブ・ウェブ君
3. CSSの代表的なプロパティと動き
ハーマ先生
次に、CSSの代表的なプロパティを紹介するね！これを覚えれば、ウェブページのスタイルを一気に向上させられるよ。
3.1. 背景色を指定する（background-color）
cssコードをコピーするbody {
background-color: lightblue;
}
- 説明: ページ全体の背景色を指定する。
lightblueの部分は任意の色コードやカラーネームに変更可能。
3.2. テキストの色を変える（color）
cssコードをコピーするp {
color: red;
}
- 説明: テキストの色を指定する。任意の色コードやカラーネームを使うことができる。
3.3. フォントサイズの指定（font-size）
cssコードをコピーするh1 {
font-size: 36px;
}
- 説明: テキストの大きさを指定する。通常、
px（ピクセル）単位で指定するけど、emやrem単位も使えるよ。
3.4. 余白を調整する（margin と padding）
cssコードをコピーするdiv {
margin: 20px;
padding: 10px;
}
- 説明:
marginは外側の余白、paddingは内側の余白を調整する。これを使うことで要素同士の間隔や、内部テキストの配置を調整できる。
marginとpaddingは、要素同士の間隔や内部の余白を操作するために使うんだね！
ウィーブ・ウェブ君
4. ボックスモデルとは？
よく聞くボックスモデルって何？何か特別なもの？
ウィーブ・ウェブ君
ハーマ先生
CSSのボックスモデルは、すべてのHTML要素が四角いボックスのように扱われることを指しているんだ。ボックスには、コンテンツ、パディング、境界線、マージンが含まれていて、それぞれが独立して設定できるんだよ。
cssコードをコピーするdiv {
width: 300px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
- 説明:
- コンテンツ: テキストや画像など、実際に表示される内容。
- パディング: コンテンツと境界線の間の内側の余白。
- ボーダー（境界線）: ボックスの枠線。
- マージン: ボックスと他の要素との間の外側の余白。
ボックスの中身や外側の空間を細かくコントロールできるってことだね！
ウィーブ・ウェブ君
5. CSSのレイアウト技術
ハーマ先生
次に、CSSでウェブページ全体のレイアウトを作る方法を見てみよう。FlexboxとGridが最近の主流なんだ。
5.1. Flexbox
ハーマ先生
Flexboxは、要素を水平方向や垂直方向に柔軟に配置できるんだ。
cssコードをコピーする.container {
display: flex;
justify-content: space-between;
}
- 説明:
display: flex;でFlexboxを有効化し、justify-contentで子要素の配置を制御。space-betweenは、子要素を等間隔に配置する。
5.2. Gridレイアウト
ハーマ先生
Gridは、複雑なレイアウトでも簡単に作れるんだ。
cssコードをコピーする.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
- 説明:
display: grid;でGridレイアウトを有効化し、grid-template-columnsで列の幅を指定。1frは同じ幅を持つ列を意味する。
6. レスポンシブデザイン
でも、スマホでもきれいに表示されるようにしたいんだけど…。
ウィーブ・ウェブ君
ハーマ先生
それなら、レスポンシブデザインが必要だね。画すみません、続きからしっかり会話形式で、レスポンシブデザインについて解説していきますね。
6. レスポンシブデザイン
でも、スマホやタブレットでもきれいに表示されるようにしたいんだけど、それってどうやればいいの？
ウィーブ・ウェブ君
ハーマ先生
それなら、レスポンシブデザインを使うんだ！これは画面サイズに応じてページのレイアウトやデザインが自動で調整される仕組みだよ。
6.1. メディアクエリ（Media Queries）
ハーマ先生
メディアクエリを使えば、画面サイズやデバイスの特性に応じてスタイルを切り替えることができるんだ。例えば、スマホやタブレット用にデザインを調整したいときに便利だよ。
cssコードをコピーする@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
- 説明: 画面の幅が600px以下の場合、このスタイルが適用される。
@mediaは特定の条件下でCSSを適用するために使われるんだ。
6.2. レスポンシブレイアウトの作成
cssコードをコピーする.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 300px;
}
- 説明: Flexboxを使って、要素が自動で折り返されるように設定しているんだ。画面が狭くなると、要素が下に回り込んでくれる。これでどんなデバイスでもきれいに表示されるよ！
なるほど！これならスマホやタブレットでもデザインが崩れずにきれいに見えるんだね！
ウィーブ・ウェブ君
ハーマ先生
そうだね。レスポンシブデザインは現代のウェブ制作では欠かせないテクニックだから、しっかり覚えておこう！
まとめ
ハーマ先生
今日は、CSSの基本から始めて、プロパティやボックスモデル、さらにはFlexboxやレスポンシブデザインまで学んだね。これで基本的なスタイルを自分で書けるようになったよ！
ありがとう、シャキシャキ先生！これでページのデザインが一気にプロっぽくなりそうだ！
ウィーブ・ウェブ君
ハーマ先生
CSSはまだまだ奥が深いけど、まずは今日学んだことを試してみて、少しずつ応用していけば大丈夫だよ。次はアニメーションやトランジションも学んで、もっと動きのあるページを作れるようにしようね！
これで、CSSの基本プロパティやレイアウト技術、さらにはレスポンシブデザインの概要を学べました。実際のウェブ開発でこれらの知識を活かし、モバイルデバイスでも美しく見えるページを作成してみてください！
コメント