囲み枠

見出しと一体型

  • HTML
  • CSS

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

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

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

枠が角丸

  • HTML
  • CSS

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

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

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

見出しがタブ状

  • HTML
  • CSS

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

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

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

ノートの様な罫線

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

ズレた二重線

  • HTML
  • CSS

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

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

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

版ズレ表現

  • HTML
  • CSS

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

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

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

紙の折れ目の様な表現

  • HTML
  • CSS

紙のような折り目と、少し浮いたような影をつけています。

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

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

クリップ留め

  • HTML
  • CSS

クリップで留めたような表現です。

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

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

交差する枠線

  • HTML
  • CSS

左上と右下に飛び出たようにクロスする線が表示された囲み枠です。

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

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