学科 2025.9.26
授業内容
- CSSの記述方法について
- Webページ制作実践
- 本日の講義のまとめ
習得内容
- CSSの記述方法について
■フォントの選択について
Web ページの表示は、端末にインストールされているフォントの種類によって表示型式が変わってしまうことがある為、明朝やゴシックがおすすめ。表示形式を端末に依存しないようにするためには Web フォントの利用が考えられる。無料の Web フォントとして Google Fonts があるので活用を考えてみる。
■セレクタの得点について
セレクタには優先順位があり点数計算をして高得点のものが採用さる。同じ得点の場合は後ろに書いてあるものが採用される。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがあるので意図したスタイルにならない時は点数を確認する。最上位にしたいときは「!important」を使用する。
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L3.8 セレクタの得点
https://html-css.hamaya2020.com/lesson-3.html#L3-8
■CSS：マージン系プロパティ
□margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
□margin プロパティ（マージン一括指定）
【記述例】margin: 10px（上）0（右） 0（下） 0（左）;
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L4.5 マージン系プロパティ
https://html-css.hamaya2020.com/lesson-4.html#L4-5
■CSS：パディング系プロパティ
□padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
□padding プロパティ（パディング一括指定）
【記述例】padding: 10px（上）0（右） 0（下） 0（左）;
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L4.4 パディング系プロパティ
https://html-css.hamaya2020.com/lesson-4.html#L4-4
■CSS：バックグラウンド系プロパティ
□background-color プロパティ（背景色）
※Webサイトが開かれる際に背景画像が読み込まれる間表示される色を指定しておく。
白のままだと見栄え良くない。
※背景画像はCSSで記述するが、画像の指示はHTMLで行う。
背景画像はWebサイトでつかめないが、画像はつかめる。
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L6.2 バックグランド系プロパティ
https://html-css.hamaya2020.com/lesson-6.html#L6-2
■CSS：レイアウト系プロパティ
□width プロパティ（内容の幅）
要素の内容の幅を指定する。幅は、box-sizing プロパティの値に content-box が指定されていると「content」の幅を指定し、border-box が指定されていると「content + padding + border」の合計値を指定する。初期値は「auto」でボックスモデルの表示ルールの初期サイズが採用される。
□height プロパティ（内容の高さ）
要素の内容の高さを指定する。高さは、box-sizing プロパティの値に content-box が指定されていると「content」の高さを指定し、border-box が指定されていると「content + padding + border」の合計値を指定する。初期値は「auto」でボックスモデルの表示ルールの初期サイズが採用される。
- Webページ制作実践
①htmlとcssファイルの準備
<!doctype html>
<html>
<head>
<meta>〜〜〜
<meta>〜〜〜
<title>〜〜〜</title>
<link href=”reset.css” rel=”stylesheet”>
<link href=”style.css” rel=”stylesheet”>
</head>
<body>
<div class=”oya_a”>
<div class=”kodomo_a1″></div>
<div class=”kodomo_a2″></div>
</div>
<div class=”oya_b”>
<div class=”kodomo_b”></div>
</div>
<div class=”oya_c”>
<div class=”kodomo_c”></div>
</div>
</body>
</html>
②親子（入れ子）の関係をブラウザで確認する
.oya_a {
width: 800px;
height: 800px;
background: red;
}
.kodomo_a1 {
width: 300px;
height: 300px;
background: blue;
}
.kodomo_a2 {
width: 400px;
height: 400px;
background: green;
}
③マージンとパディングを使ってレイアウトの位置を調整してみよう
.oya_a {
width: 800px;
height: 800px;
background: red;
padding: 0 0 0 150px;
}
.kodomo_a1 {
width: 300px;
height: 300px;
background: blue;
margin: 0 auto;
}
.kodomo_a2 {
width: 400px;
height: 400px;
background: green;
margin: 50px 0 0 0;
}
④マイナスマージンと、ボックスの右端配置について
.oya_a {
width: 800px;
height: 800px;
background: red;
}
.kodomo_a1 {
width: 300px;
height: 300px;
background: blue;
margin-left: auto;
}
.kodomo_a2 {
width: 400px;
height: 400px;
background: green;
margin-top: -300px;
}
■トレーニング-３
先生が用意してくださったCSSのテンプレートを使用して制作したサイト画面
