HTML・CSSでつくるおしゃれなボックス (囲み枠) デザイン21選

ブログ記事などでよく見かけるボックス。記事内に挿れるだけでワンクッション間を挟むことができ、文章がグッと読みやすくなる便利な要素です。そこで今回はボックス(囲み枠)のデザインスニペットをまとめました。補足や注意喚起などご自身の用途に適したものを選んでみてください。

シンプルなボックス

交差する枠線

交差する枠線

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

番号あり

番号あり

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 番号の形状

左上に番号を添えたボックス。表示する番号はHTMLタグの属性で指定することができます。

タイトル (枠外)

タイトル (枠外)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

タイトル (枠内)

タイトル (枠内)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

タイトル (吹き出し風)

タイトル (吹き出し風)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 吹き出しの形状
タイトル (上部中心)

タイトル (上部中心)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

見出し風

見出し風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • シャドウ
引用風

引用風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • シャドウ

ブログで使えるボックス

メモアイコン (小)

メモアイコン (小)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

チェックアイコン (小)

チェックアイコン (小)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

注意アイコン (小)

注意アイコン (小)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

メモアイコン (大)

メモアイコン (大)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

チェックアイコン (大)

チェックアイコン (大)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

注意アイコン (大)

注意アイコン (大)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

その他のボックス

チェック柄

チェック柄

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 枠線
めくられた紙風

めくられた紙風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

テープで貼られてる風

テープで貼られてる風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

クリップ風

クリップ風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

ウィンドウ風

ウィンドウ風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

方眼紙風

方眼紙風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

iPhone風

iPhone風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する