講師：湊 有加里 先生

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