学科 CSS基礎④
講師：大浜先生
1限 CSS基礎
✎ܚ復習
*CSSは単品では簡単だが組み合わせて使わないといけないのが難しい
・セレクタの書き方色々→［要素名］［要素名 class名］［要素名 要素名］［要素名 class名 class名］等
*idなどもありますがとりあえず今はこれだけ覚えておきましょう
・文字装飾
*背景に画像を指定した時ｍ縮小時に画像を縮小するのか画像の一部を表示にするのかを細かく設定する必要がある
・ボックスモデルをしっかり頭に入れる！！！
→［コンテンツ］［パティング］［ボーダー］［マージン］
・widthについて
→ box-sizing:content-box; ［コンテンツ］の幅のみ
→ box-sizing:bordee-box; ［コンテンツ］＋［パティング］＋［ボーダー］の幅
＊今はreset.cssでbordee-boxを入れる事が多い
・max-width 必ず指定 特にRSD時必須
・float 使い方に癖あり 現在あまり使われていない
・position 右下に常に置く物くらいに留めての使用が無難
・desplay 属性を変更する ボックス要素をインライン要素に変更など
2限 CSS続き
✎ܚボーダー指定色々 ショートハンド(一括指定)が便利！*どちらも出来るように
・marginの注意点
*マージンの相殺→上部のボックスの下マージンと下部のボックスの上マージンが接する時は大きい方のマージンが採用される
→例えば、上部のボックスに「margin-bottom: 10px;」が指定されていて、下部のボックスに「margin-top: 30px;」が指定されている場合は大きい方の下部のマージンである「30px」が採用される
*マイナスマージン→マージンにはマイナスの値を指定することができる
→マイナスの値を指定すると他のボックスに重なった配置にすることができる
*ボックスの中央配置→width プロパティでボックスの幅を指定した状態で左右のマージンを「auto」に設定（例えば「margin: 0 auto;」）するとボックスを親要素の中央に配置することができる
*ボックスの右端配置→width プロパティでボックスの幅を指定した状態で左のマージンを「auto」に設定（例えば「margin-left: auto;」）するとボックスを親要素の右端に配置することができる
3限 実践
✎ܚhtmlファイルとCSSファイルを書いていくよ
・flexを使おう！
・Positionについて
・大浜先生作サンプルファイルを配布して下さいました！
→a100が先生のアド
4限 FTPについて
✎ܚ代表的なアプリ
・Win→FFFTP Mac→CyberDuck
・サーバーアドレス ユーザー名 PW の３つが必要
*ファイル名の大文字小文字に注意！
5限 各自作業
✎ܚ練習問題④をやってみよう
・index.htmlが文字化けしているので、一度terapadで開き、文字コードをUTF-8nに変更してから保存して直しましょう
実際にみんなでひとつのファイルを作っていくスタイルで
とてもわかりやすかったです
やっぱり聞くだけじゃ覚えられませんよね
ユーモアあふれる大浜先生の楽しい授業でした😊
