-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑦
CSSの疑似クラス、疑似要素について
・marginの相殺
上下で起こる
大きいほうが優先される
こちらの形式で書くほうが管理がしやすいためこちらを利用することが多い
margin: 50px 0 50px 50px
左右の中央に配置
margin: 0 auto;
・text-align: center/right
ブロックコンテナ内の行の揃え位置・均等割付を指定する
※spanタグなどインライン要素に適用しても変わらない（ブロック要素でなくもともと文字数に合わせられているため）
・display: inline/block/inline-block;
インライン要素をブロック要素に
ブロック要素をインライン要素にできる
もしくは、インラインのように文字数で幅が変わるけど、ブロック要素のように幅を動かしたいときなど
non;は非表示
PC画面とスマホ画面でメニューバーをスマホでは非表示にする場合などに使用する。
・li:last-child{
color: red;
}
<li>タグが出てきたものの最後のものはすべて赤になる
2限目
学科 HTML/CSS基礎⑦
テーブル（表組）の作り方について
3限目
学科 HTML/CSS基礎⑦
フォーム（入力）の作り方について
4限目
学科 HTML/CSS基礎⑦
フレックスレイアウトについて
5限目
学科 HTML/CSS基礎⑦
本日の講義のまとめ
本日のテーマ
レイアウト系プロパティを理解しましょう
ワンポイントアドバイス
楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。
本日の課題
本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。
本日学んだこと
display
margin,paddingの応用
感想
本日は、margin,paddingの復習と新たなCSS項目をいくつか学びました。
特にdisplay: flex;は横並びにできるということでよく使いそうだと思いました。
また、ホバーなどはa:hoverなどのつけ方をすることも覚えておきたいです。
traing3
