囲み枠(ボックス)HTML&CSS

もくじ

• 囲み枠デザイン例01
• 囲み枠デザイン例02
• 囲み枠デザイン例03
• 囲み枠デザイン例04
• 囲み枠デザイン例05
• 囲み枠デザイン例06
• 囲み枠デザイン例07

囲み枠デザイン例01

• 表示例
• • ああああああああああああああああああああああああああああああああああああああああああああああああああ
• HTML
• • <ul class="box no01" data-title="ボックスのタイトル">
  • <li>ああああああああああああああああああああああああああああああああああああああああああああああああああ</li>
  • </ul>
• CSS
• • .box{position:relative;border:solid 1px rgb(199,199,199);border-radius:4px;box-shadow:0 0 2px 1px rgb(236,236,236);background-color:rgb(249,249,249);color:rgb(32,33,36);line-height:1.6;}
  • .box::before{content:attr(data-title)"";position:absolute;color:rgb(37,37,37);font-weight:bold;line-height:1;letter-spacing:0.02em;}
  • .box li{background-color:inherit;color:inherit;list-style:none;}
  • .box.no01{margin:16px 0 8px 0;padding:16px 16px 16px 16px;}
  • .box.no01::before{top:-0.50em;left:14px;padding:0 2px 0 2px;background:linear-gradient(transparent 36%, rgb(249,249,249) 0%);}

囲み枠デザイン例02

• 表示例
• • いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
• HTML
• • <ul class="box no02" data-title="ボックスのタイトル">
  • <li>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</li>
  • </ul>
• CSS
• • .box{position:relative;border:solid 1px rgb(199,199,199);border-radius:4px;box-shadow:0 0 2px 1px rgb(236,236,236);background-color:rgb(249,249,249);color:rgb(32,33,36);line-height:1.6;}
  • .box::before{content:attr(data-title)"";position:absolute;color:rgb(37,37,37);font-weight:bold;line-height:1;letter-spacing:0.02em;}
  • .box li{background-color:inherit;color:inherit;list-style:none;}
  • .box.no02{margin:24px 0 8px 0;padding:16px 16px 16px 16px;}
  • .box.no02::before{top:-0.87em;left:14px;padding:0 2px 0 2px;background:linear-gradient(transparent 80%, rgb(249,249,249) 0%);}

囲み枠デザイン例03

• 表示例
• • うううううううううううううううううううううううううううううううううううううううううううううううううう
• HTML
• • <ul class="box no03" data-title="ボックスのタイトル">
  • <li>うううううううううううううううううううううううううううううううううううううううううううううううううう</li>
  • </ul>
• CSS
• • .box{position:relative;border:solid 1px rgb(199,199,199);border-radius:4px;box-shadow:0 0 2px 1px rgb(236,236,236);background-color:rgb(249,249,249);color:rgb(32,33,36);line-height:1.6;}
  • .box::before{content:attr(data-title)"";position:absolute;color:rgb(37,37,37);font-weight:bold;line-height:1;letter-spacing:0.02em;}
  • .box li{background-color:inherit;color:inherit;list-style:none;}
  • .box.no03{margin:12px 0 8px 0;padding:50px 16px 16px 16px;}
  • .box.no03::before{top:0;left:0;width:calc(100% - 32px);padding:10px 16px 8px 16px;border-bottom:solid 1px rgb(199,199,199);background-color:rgb(238,238,238);}

囲み枠デザイン例04

• 表示例
• • ええええええええええええええええええええええええええええええええええええええええええええええええええ
• HTML
• • <ul class="box no04" data-title="ボックスのタイトル">
  • <li>ええええええええええええええええええええええええええええええええええええええええええええええええええ</li>
  • </ul>
• CSS
• • .box{position:relative;border:solid 1px rgb(199,199,199);border-radius:4px;box-shadow:0 0 2px 1px rgb(236,236,236);background-color:rgb(249,249,249);color:rgb(32,33,36);line-height:1.6;}
  • .box::before{content:attr(data-title)"";position:absolute;color:rgb(37,37,37);font-weight:bold;line-height:1;letter-spacing:0.02em;}
  • .box li{background-color:inherit;color:inherit;list-style:none;}
  • .box.no04{margin:12px 0 8px 0;padding:48px 16px 16px 16px;}
  • .box.no04::before{top:16px;left:0;padding:0 0 0 12px;border-left:solid 4px rgb(199,199,199);}

囲み枠デザイン例05

• 表示例
• • おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお
• HTML
• • <ul class="box no05" data-title="ボックスのタイトル">
  • <li>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</li>
  • </ul>
• CSS
• • .box{position:relative;border:solid 1px rgb(199,199,199);border-radius:4px;box-shadow:0 0 2px 1px rgb(236,236,236);background-color:rgb(249,249,249);color:rgb(32,33,36);line-height:1.6;}
  • .box::before{content:attr(data-title)"";position:absolute;color:rgb(37,37,37);font-weight:bold;line-height:1;letter-spacing:0.02em;}
  • .box li{background-color:inherit;color:inherit;list-style:none;}
  • .box.no05{margin:12px 0 8px 0;padding:48px 16px 16px 16px;}
  • .box.no05::before{top:16px;left:8px;padding:0 0 0 6px;border-left:solid 4px rgb(199,199,199);}

囲み枠デザイン例06

• 表示例
• • かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか
• HTML
• • <ul class="box no06" data-title="ボックスのタイトル">
  • <li>かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか</li>
  • </ul>
• CSS
• • .box{position:relative;border:solid 1px rgb(199,199,199);border-radius:4px;box-shadow:0 0 2px 1px rgb(236,236,236);background-color:rgb(249,249,249);color:rgb(32,33,36);line-height:1.6;}
  • .box::before{content:attr(data-title)"";position:absolute;color:rgb(37,37,37);font-weight:bold;line-height:1;letter-spacing:0.02em;}
  • .box li{background-color:inherit;color:inherit;list-style:none;}
  • .box.no06{margin:24px 0 8px 0;padding:16px 16px 16px 16px;}
  • .box.no06::before{content:"例";top:-0.87em;left:10px;width:26px;height:26px;padding:0;border-radius:50%;text-align:center;background-color:rgb(199,199,199);color:rgb(254,254,254);font-size:medium;line-height:28px;}

囲み枠デザイン例07

• 表示例
• • きききききききききききききききききききききききききききききききききききききききききききききききききき
• HTML
• • <ul class="box no07" data-title="ボックスのタイトル">
  • <li>きききききききききききききききききききききききききききききききききききききききききききききききききき</li>
  • </ul>
• CSS
• • .box{position:relative;border:solid 1px rgb(199,199,199);border-radius:4px;box-shadow:0 0 2px 1px rgb(236,236,236);background-color:rgb(249,249,249);color:rgb(32,33,36);line-height:1.6;}
  • .box::before{content:attr(data-title)"";position:absolute;color:rgb(37,37,37);font-weight:bold;line-height:1;letter-spacing:0.02em;}
  • .box li{background-color:inherit;color:inherit;list-style:none;}
  • .box.no07{margin:24px 0 8px 0;padding:16px 16px 16px 16px;}
  • .box.no07::before{content:"例";top:-0.87em;left:-4px;width:26px;height:26px;padding:0;border-radius:50%;text-align:center;background-color:rgb(199,199,199);color:rgb(254,254,254);font-size:medium;line-height:28px;}