2024年4月

講師：湊 有加里 先生 1限目学科 CSS基礎⑤練習問題の説明 2限目学科 CSS基礎⑤Webページ運用・作成の困った問題 3限目学科 CSS基礎⑤練習問題の解説 4限目学科 CSS基礎⑤擬似クラスと擬似要素について 5限目学科 CSS基礎⑤本日の講義のまとめ 今日は擬似要素系セレクタを学ぶ。余った時間で文字の後ろにNEWのピクトをつける練習を行った。 感想・質問 感想 文字の中心が高いのでvertical-alignで下げるが、backgroundも一緒に下がってしまった。仕方がないのでフォントを少し小さくして、上左右のpaddingを増やし、文字とbackgroundのバランスを取った。ついでなので、backgroundに影をつけて完成させる。 質問 文字のcontentの余白を詰めることはフォント自体を変えないとできないのか？ @charset "utf-8"; /*NEWのピクト練習*/ .pelement4 p{ margin:5px; } .pelement4 p.new::after{ content: 'NEW'; font-size: 0.8rem; font-weight: bolder; background: red; color:#fff; padding: 1px 4px 0px; margin-left: 5px; border-radius:5px; box-shadow :1px 2px 3px 1px #000; vertical-align: 2px; } NEWのピクト練習 サンプル1 サンプル2 サンプル3 サンプル4 サンプル5

2024年4月

実技 WEBデザイン実習①

学科レイアウトデザイン基礎①【オンライン】

学科 CSS基礎⑥【オンライン】

学科 CSS基礎⑤【オンライン】

実技 WEBデザイン実習①

学科 レイアウトデザイン基礎①【オンライン】

学科 CSS基礎⑥【オンライン】

学科 CSS基礎⑤【オンライン】

学科レイアウトデザイン基礎①【オンライン】