囲み枠

囲み枠 1

  • HTML
  • CSS

枠線と見出しのシンプルな構成です。

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

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

囲み枠 2

  • HTML
  • CSS

角丸を使った枠線と見出しのシンプルな構成です。

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

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

囲み枠 3

  • HTML
  • CSS

枠線の外にタブの様な状態で表示されている見出し。

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

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

囲み枠 4

  • HTML
  • CSS

ノートの様な罫線が引かれた表現です。

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の数値に合わせないと段々ズレてしまいます。

囲み枠 5

  • HTML
  • CSS

ズレた二重線の表現です。

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

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

囲み枠 6

  • HTML
  • CSS

ズラした枠のような表現と、付箋のような見出しです。

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

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