囲み枠

See the Pen 【囲み枠】1 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. 囲み枠に線を設定し、見出しの背景色に線と同色で塗ったもの。

See the Pen 【囲み枠】2 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. 囲み枠に線と角丸設定をし、見出しの背景色に線と同色で塗ったもの。
2. 囲み枠の線が細かったり角丸半径が小さい場合、見出しの角が出てしまうため overflow: hidden; を設定し角が外に飛び出さないようにします。

See the Pen 【囲み枠】3 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. コンテンツ部分に枠線を設定し、見出しは枠の外側に配置。
2. 見出しには幅を設定していないので、テキスト内容に合わせて伸びる仕様です。

See the Pen 【囲み枠】4 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. 背景の色はcss変数で設定しているので、:root セレクタの --color-bg でカラーコードを変更すると関連する色が一括で変更できます。
2. エリアを囲む<div>には、背景色のほかbox-shadowを内側にかけ角丸設定にしています。
3. 見出し部分には、マーカーで引いたような表現を、linear-gradient()を使っています。
4. ノートの罫線の様な表現にもlinear-gradient()を使用していますが、繰り返しの数値はline-heightの数値に合わせないと段々ズレてしまいます。

See the Pen 【囲み枠】5 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. エリアを囲む<div>にborderを設定しています。
2. 二重線に見えるズレた線は、::beforeを使用して外枠と同じ大きさのものを生成し、positionを使って少しズラしています。

See the Pen 【囲み枠】6 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. エリアを囲む<div>にborderを設定し、::afterで背景に該当するエリアを生成しています。
2. 背景色を設定しているエリアを少し回転させ、z-indexを使用して重なり順を調整しています。
3. 付箋の様な見出しにも::afterを設定し影の様な表現を生成しています。