これまでHTMLを使ってWebページの文書構造を記述しました。
Webページをより良く見せるために、装飾をするときに使うものがCSSです。
CSSとは何か学習しましょう。
9. ✏️CSSを記述しよう ( 9 / 14 )
CSSを記述しよう
学習の目的
-
1. 作成するCSSを確認する
-
2. CSSを完成させる
1. 作成するCSSを確認する
ページタイトル以外についてもCSSを設定していきます。今回、作成する見本は次のとおりです。
設定するCSSの内容は次のとおりです。
CSSを記述していきますが、質問はありますか？
CSSを書くときの順番など決まりはありますか？
決まりはありませんが、分かりやすいように、次のことに注意して記述しましょう。
CSSを記述するときの注意点
- 範囲の大きいものから記述する
- sectionなどの単位でまとまった単位で記述する
- 行の最後は「;」を記述する
この中でいうと「mainタグ」が一番大きいからそこから書き始めればよいですか？
はい、そうですね。それではmainタグからCSSを追加していきましょう。
2. CSSを完成させる
CSSを設定し、見やすいWebページを作成します。
次の順番でCSSを完成させましょう。
- 手順1. CSSファイル(style.css)を開く
- 手順2. mainタグのCSSを設定する
- 手順3. sectionタグのCSSを設定する
- 手順4. h2タグのCSSを設定する
- 手順5. ulタグのCSSを設定する
- 手順6. aタグのCSSを設定する
手順1. CSSファイルを開く
「style.css」を開きます。HTMLと同じように、メモ帳などのエディタにドラッグして編集できるようにしましょう。
手順2. mainタグのCSS
mainタグには次のCSSを追加します。
セレクタ：main
| プロパティ | 値 | 備考 |
|---|---|---|
| border | 1px solid #cccccc |
枠線の指定 1px : 枠線の太さ solid : 実線 #cccccc : 線の色、濃い目のグレー |
| background-color | #FFFFFF | 背景色の指定 |
| padding | 20px | 枠線と中のコンテンツの余白を指定 |
これらをCSSに記載するとstyle.cssファイルは次のようになります。
main {
border: 1px solid #ccc;
background-color: white;
padding: 20px;
}
h1 {
background-color: #004080;
color: white;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
}
style.cssにmainタグのスタイルを記述したら、Webページの再表示を行いましょう。
次のようなWebページが表示されます。
確認ポイントの部分が上手くできているかをチェックしましょう。
手順3. sectionタグのCSS
sectionタグには次のCSSを追加します。
セレクタ：section
| プロパティ | 値 | 備考 |
|---|---|---|
| margin-bottom | 30px |
部品下の外余白の指定
sectionタグの下は、30px分の余白ができる |
これらをCSSに記載するとstyle.cssファイルは次のようになります。
main {
border: 1px solid #ccc;
background-color: white;
padding: 20px;
}
h1 {
background-color: #004080;
color: white;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
}
section {
margin-bottom: 30px;
}
style.cssにsectionタグのスタイルを記述したら、Webページの再表示を行いましょう。
次のようなWebページが表示されます。
分かりにくいですが、sectionの下に少し広い余白ができました。
手順4. h2タグのCSS
h2タグには次のCSSを追加します。
セレクタ：h2
| プロパティ | 値 | 備考 |
|---|---|---|
| color | #004080 |
文字色の指定
濃い青色の指定 |
| border-bottom | 2px solid #004080 |
下線の指定
2px：下線の太さ solid：実線 #004080：線の色 |
| padding-bottom | 5px | h2で指定した文字と下線の間の余白 |
これらをCSSに記載するとstyle.cssファイルは次のようになります。
main {
border: 1px solid #ccc;
background-color: white;
padding: 20px;
}
h1 {
background-color: #004080;
color: white;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
}
section {
margin-bottom: 30px;
}
h2 {
color: #004080;
border-bottom: 2px solid #004080;
padding-bottom: 5px;
}
style.cssにh2タグのスタイルを記述したら、Webページの再表示を行いましょう。
次のようなWebページが表示されます。
下線がつくと、よりタイトルらしくなります。
手順5. ulタグのCSS
ulタグには次のCSSを追加します。
セレクタ：ul
| プロパティ | 値 | 備考 |
|---|---|---|
| padding-left | 20px | 左余白を付ける |
これらをCSSに記載するとstyle.cssファイルは次のようになります。
main {
border: 1px solid #ccc;
background-color: white;
padding: 20px;
}
h1 {
background-color: #004080;
color: white;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
}
section {
margin-bottom: 30px;
}
h2 {
color: #004080;
border-bottom: 2px solid #004080;
padding-bottom: 5px;
}
ul {
padding-left: 20px;
}
style.cssにulタグのスタイルを記述したら、Webページの再表示を行いましょう。
次のようなWebページが表示されます。
箇条書きが左に揃って見やすくなりましたね。
手順6. aタグのCSS
aタグには次のCSSを追加します。
セレクタ：a
| プロパティ | 値 | 備考 |
|---|---|---|
| color | #0066cc | 文字色を水色に指定 |
これらをCSSに記載するとstyle.cssファイルは次のようになります。
main {
border: 1px solid #ccc;
background-color: white;
padding: 20px;
}
h1 {
background-color: #004080;
color: white;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
}
section {
margin-bottom: 30px;
}
h2 {
color: #004080;
border-bottom: 2px solid #004080;
padding-bottom: 5px;
}
ul {
padding-left: 20px;
}
a {
color: #0066cc;
}
style.cssにaタグのスタイルを記述したら、Webページの再表示を行いましょう。
次のようなWebページが表示されます。
リンクの色が他の青色とは異なり、分かりやすくなりました。
CSSは上手く設定できましたか？
今回作成した、cssファイル「style.css」を提出しましょう。
選択されていません
対応形式：.css
※この再現版では提出は行いません（送信先は未接続です）
