-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑥
CSSの記述方法についてhref 「Hypertext Reference」rel 「relation」
2限目
学科 HTML/CSS基礎⑥
CSSの記述方法について
ulとliに色を指定するとliが優先される
親が下に子が上に来るイメージ
3限目
学科 HTML/CSS基礎⑥
Webページ制作実践
★HTMLの基本文法
<要素(タグ) 属性＝”属性値”>
例：<link href=”パス” rel=”stylesheet”> ※属性は複数設定できる
<div class=”クラス名”>
★CSSの基本文法
セレクター(タグ、クラス名など){
プロパティ: 値;
}
例：div.oya{
color: red;
}
4限目
学科 HTML/CSS基礎⑥
Webページ制作実践
・パディング系プロパティ
padding プロパティ（パディング一括指定）上 右 下 左の順に数字を書く
例：padding: 50px 0 0 50px
padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
左右のみ親(何もない場合はbody)に対してオートで中央揃えができる
margin: 0 auto 0 auto;
右揃え
margin: 0 0 0 auto;
また上下左右をまとめて書く方法もある
margin: 0 auto;（上下0,左右autoという意味）
margin: 0 50px;（上下0,左右50pxという意味）
マイナスmargin(ネガティブマージンと呼ぶことも)
marginと逆に動く、微調整の際など使用する
5限目
学科 HTML/CSS基礎⑥
本日の講義のまとめ
marginの相殺
上下の場合大きい数字が優先される
例：上の四角にmargin 50px
下の四角にmargin 50px
→間が100px開くのではなく50px開く
上の四角にmargin 50px
下の四角にmargin 100px
→間が150px開くのではなく大きいほうの100px開く
本日のテーマ
CSSの記述をしましょう
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
本日学んだこと
Terapadでは仕様上日本語を書いていないとURF-8NはShiftJisと認識してしまう→コメントアウトで日本語を入れておくとよい
padding,marginは一括指定と一つずつ指定する方法がある
marginの相殺について
感想
本日は主にCSSの新たな機能を学びました。
margin,paddingには様々な書き方があることが分かったのでかけるのはもちろん、他社の書いたコードを見ても意味が分かるように様々なパターンを頭に入れておきたいです。
また、親に対してautoがかかっている点や親が重ね順下側子が上側という点を学びました。今後複雑になってくる際も大切な概念だと思うので覚えておければと思います。