囲み枠

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を設定し影の様な表現を生成しています。

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

1. 右上の折り目のようなものは ::before を使用しボーダーで生成しています。
2. 下の浮いたような影は、::after を使い filter でぼかしたものを背面に配置しています。

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

1. クリップは ::before を使用しボーダーで生成しています。
2. クリップを挟み込んでいるような表現は、::after を使い部分的に隠すように重ねています。

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

1. ::before と ::after で前面にもともとの領域から 20px 分、線がはみ出すように前面に配置しています。
2. そのままだとテキスト選択やリンクを設定した際クリックor選択ができないため、pointer-events: none; を設定し全面に配置したパーツの反応を無効化しています。