◆通所訓練（25/10/23）
講師：小谷省吾先生
カリキュラム資料：なし
1限目
学科 HTML/CSS基礎⑥
CSSの記述方法について
2限目
学科 HTML/CSS基礎⑥
CSSの記述方法について
3限目
学科 HTML/CSS基礎⑥
Webページ制作実践
4限目
学科 HTML/CSS基礎⑥
Webページ制作実践
5限目
学科 HTML/CSS基礎⑥
本日の講義のまとめ
◆本日のテーマ
CSSの記述をしましょう
▼セレクタの得点について
セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。
▼CSS：マージン系プロパティ【復習】
- margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
- margin プロパティ（マージン一括措定）
▼CSS：パディング系プロパティ【復習】
- padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
- padding プロパティ（パディング一括指定）
▼CSS：バックグランド系プロパティ【復習】
- background-color プロパティ（背景色）
▼CSS：レイアウト系プロパティ【復習】
- width プロパティ（内容の幅）
- height プロパティ（内容の高さ）
▼Webページ制作実践③
マージン、パディング、バックグランド、レイアウト系のそれぞれのプロパティを使い、レイアウトを調整しながらhtmlの親と子（入れ子）の関係を理解しましょう。
①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;
}このようにbackgroundプロパティで背景に仮色を入れると、ブラウザでhtmlを表示した時にレイアウトが確認しやすいです。
③マージンとパディングを使ってレイアウトの位置を調整してみましょう
.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;
}④マイナスマージンと、ボックスの右端配置について
▼トレーニング-３
実際のWebページを作成しましょう。
トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。
カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/
下記のファイルをダウンロードしましょう。
「training-3.zip」
◆本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
→授業のあと、キャリコン待ちの時間でトレーニング３を実施しました。
<p>
<a href="https://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="https://jigsaw.w3.org/css-validator/images/vcss"
alt="正当なCSSです!" />
</a>
</p>
<p>
<a href="https://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="正当なCSSです!" />
</a>
</p>
◆本日の気付き・メモ
キャリコン開始時間まで２時間以上あった為、トレーニング３をやってみた。
背景画像のCSS入力がうまくいかずエラーが出るし、エラーが無くなったと思ったら画像が出てこないというアクシデント。
上記貼り付け画像の左側。
background-image: の後の「 url(“”); 」や、相対パス「../」での画像の指定が、所定通り出来ていなかった為だった。
教わっていない事だが、まとめサイトを見ても該当項目をなかなか見つけられず、時間がかかってしまった。
復習して知識を整理する必要があると思った。
コメントを残す