スポンサーリンク

【CSSで装飾】サンプル15選！コピペするだけ囲み枠・ボックスでHPを飾ろう

CSSカスタマイズ
2020.03.20

文中や最後のまとめ、ポイントなんかに使える囲み枠（ボックス）をご紹介します。
コピペして使えるようにしてありますので、どうぞご利用ください。

ソースの　<div class=～～　はhtmlファイルに、　.〇〇box {～～　はcssファイルに記入してくださいね！

シンプルなCSSボックス

使い勝手のいいシンプルboxその１【一重線】

シンプルな枠線のみ。

背景色、文字色、枠線の色を変え、サイトに合った色にしてご利用ください。

<div class="s-box1">シンプルな枠線のみ。</div>
.s-box1 {
 margin: 2em auto;
 padding: 1em;
 width: 70%; /*表示幅に対するパーセンテージ*/
 color: #800000; /* 文字色 */
 background-color: #fff; /* 背景色 */
 border: 1px solid #f08080; /* 枠線 */
}

シンプルboxその２【かどまる】

角の丸さを調整できます。（10px）

角の丸さを調整できますのでいろいろ試してみてくださいね。

<div class="marubox1">角の丸さを調整できます。（10px）</div>
.marubox1 {
 margin: 2em auto;  
 padding: 1em;
 width: 70%; /*表示幅に対するパーセンテージ*/
 color: #800000; /*文字色*/
 background-color: #fff; /*背景色*/
 border: 3px solid #ff1493; /*線の太さ・色*/
 border-radius: 10px; /*角の丸*/ 
}

角の丸を20pxにしたのがこちら。結構違います。

角の丸さを調整できます。（20px）

シンプルboxその3【破線】

やぶれた線のボックス

これも角の丸さを調整できます。border: 3px のところの太さを変えると破線が大きくなります。

<div class="dotbox1">やぶれた線のボックス</div>
.dotbox1 {
 margin: 2em auto;
 padding: 1em;
 width: 70%;
 border: 3px dashed #db7093; /*太さ・線種・色*/
 color: #800000; /* 文字色 */
 background-color: #fff; /* 背景色 */
 border-radius: 2px; /*角の丸み*/
}

シンプルboxその4【二重線】

二重線ボックス

これも角の丸さを調整できます。背景色もサンプルは白にしてありますがお好みで。

<div class="twojbox1">二重線ボックス</div>
.twojbox1 {
 margin: 2em auto;
 padding: 1em;
 width: 70%;
 border: 10px double #8b008b; /*太さ・線種・色*/
 color: #333; /* 文字色 */
 background-color: #fff; /* 背景色 */
 border-radius: 1px; /*角の丸み*/
}

シンプルなタイトルつきbox

シンプルタイトルつきboxその1【 一重線 】

タイトルテキストぶぶん。

シンプルな、タイトルがついたBOXです。色などご自由にカスタムしてください♪

<div class="box1j">
<span class="title-box1">タイトル</span>テキストぶぶん。</div>
.box1j {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 color: #000; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 1.5px solid #dc143c; /* 枠線の太さ・色 */
 width: 70%;
}
.title-box1 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #dc143c; /* タイトル文字色 */
}

シンプルタイトルつきboxその2【 二重線 】

タイトルテキストぶぶん。

borderのところをdoubleにしたことで二重線に。色、太さなどカスタムしてください。

<div class="box2j">
<span class="title-box2">タイトル</span>テキストぶぶん。</div>
.box2j {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 width: 90%;
 color: #000; /* 文字色 */
 background-color: #fff;
 border: 4px double #800080; /* 枠線の太さ・色 */
 box-shadow: 2px 2px 2px #ccc;/* 影の色 */
}
.title-box2 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color:  #fff; /* タイトル背景色 */
 color: #800080; /* タイトル文字色 */
}

シンプルタイトルつきboxその3【 タブ 】

タイトルテキストぶぶん。

タイトル部分の色や線の色、タブ調整したりして作ってみてください。

<div class="tabtuki"><span class="title-tab">タイトル</span>テキストぶぶん。</div>
.tabtuki {
 position: relative;
 margin: 3em auto;
 padding: 1.2em 1em 1em;
 width: 90%;
 background-color: #fff; /*BOX背景色 */
 border: 2px solid #8d93c8; /* 枠線の太さ・色 */
 box-shadow: 2px 2px 2px #ccc; /* 影の色 */
}
.title-tab {
 position: absolute;
 display: inline-block;
 top: -28px; /*タブ調整 */
 left: -2px; /*タブ調整 */
 padding: 1px 10px;
 height: 26px;
 font-weight: bold;
 color: #fff; /* タイトル色 */
 background-color: #8d93c8; /* タイトル背景色 */
 border-radius: 8px 8px 0 0;
}

シンプルタイトルつきboxその4【タイトル部分も囲む】

タイトル
テキストぶぶん。

四角で囲んだシンプルタイトルboxです。お好みの色でどうぞ。

<div class="titlebox"><div class="boxtitle">タイトル</div>テキストぶぶん。</div>
.titlebox{
  margin: 1em 0;
  padding: 1.5em 1em 1em;
  position: relative;
  border: 1px solid #d2b48c; /*テキスト部分の囲み線色*/
  background-color: #ffffe0; /*テキスト部分の背景色*/
}

.boxtitle{
  position: absolute;
  top: -0.8em;
  left: 20px;
  font-weight: bold;
  font-size: 1.1em;
  background-color: #d2b48c; /*タイトル背景色*/
  color: #fff; /*タイトル文字色*/
  padding: 0 0.5em;
}

シンプルタイトルつきboxその5【内側にタイトルが！】

タイトル
　

ついにタイトルが内側に侵入!!

<div class="titlein">
<div class="titleIntrusion">タイトル</div>
　<p>ついにタイトルが内側に侵入!!</p>
</div>
.titlein{
  margin: 1em 0;
  background-color: #fff;
  border: 2px solid #db7093;
}
.titleIntrusion{
  font-size: 16px;
  position: absolute;
  margin-top: 0;
  background-color: #db7093;
  color: #fff;
  font-weight: bold;
  border-radius: 0 0 2px 0;
  padding: 4px 6px;
}
.titlein p{
  margin: 0;
  padding: 1em 1em 1em 1em;
}

ふわっとしたbox

ふわっとぼかしbox

ふわふわ～

ボックスの周りを影でぼかしています。背景色と影は同じ色で作ってくださいね。

<div class="fuwabox">ふわふわ～</div>
.fuwabox {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 color: #000000; /* 文字色 */
 background-color: #ffb6c1; /* 背景色 */
 box-shadow: 0 0 10px 10px #ffb6c1; /* 影 */
}

ふわっと枠線box

ふわふわ～ぼやぼや～

insetを設定することで線の内側にも影が入りぼかしがうまくいきます。

<div class="fuwawakubox">ふわふわ～ぼやぼや～</div>
.fuwawakubox {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 color: #000; /* 文字色 */
 background-color: #fff; /* 背景色 */
 box-shadow: 0 0 5px 5px #ffb6c1, 0 0 5px 3px #ffb6c1 inset; /* 影 */
 border-radius: 10px; /*角の丸み*/
}

おしゃれbox（わたしの主観）

クリップつきbox

クリップ止めボックス！

クリップの色変えたりできますのでレッツカスタマイズ。

<div class="clip-box">テキスト</div>
.clip-box {
 position: relative;
 margin: 2em auto;
 padding: 15px 35px 15px 25px;
 width: 90%;
 background-color: #fff; /* ボックス背景色 */
 color: #000; /* 文章色 */
 border: 1px solid #800080; /* 枠線 */
 box-shadow: 1px 1px 1px #da70d6; /* 影の色 */
}
.clip-box::before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #000; /*クリップ色 */
 background-color: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #999;
 transform: rotate(10deg);
 z-index: 1;
}
.clip-box::after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: solid 5px #fff; /*背景色と同じ色にする*/
 z-index: 2;
}

角交差box

シンプルでおしゃれ！

線の色かえたり、はみ出している長さをかえたりもできますよ。

<div class="kadokousabox">シンプルでおしゃれ！</div>
.kadokousabox{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px #800000;
    border-bottom: solid 2px #800000;
}
.kadokousabox:before, .kadokousabox:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #800000;
}
.kadokousabox:before {left: 10px;}
.kadokousabox:after {right: 10px;}

かっこボックス

スタイリッシュ！

補足や解説のところで使えますスタイリッシュ！

<div class="kaxtukobox">スタイリッシュ！</div>
.kaxtukobox {
  margin: 1em 0;
  padding: 1em;
  border-radius: 10px/50%;
  border: solid;
  border-width: 0 3px;
  border-color: #ff69b4;
  width: 70%;
}

ルーズリーフ風box

ルーズリーフ風ボックスです。

書いてみましょう。
このページはboxのコードが
色々載っているページですよ。

思うままに、つらつらと書き連ねてみましょう。

<div class="loose-leaf">ここにテキスト</div>
.loose-leaf{
  background: #faf0e6;
  border-left: 5px dotted rgba(0,0,0,.1);
  box-shadow: 0 0 0 5 #faf0e6;
  width: 70%;
　padding: 1em;
  margin: 1em 5px;
}

.loose-leaf p{
  margin: 0;
  padding: 0;
}

おわりに

テキスト部分をｐタグで囲うほうが丁寧なやりかたでしょうか、私はわりとそのままｄｉｖタグのみにしてしまいます…。何事も、手抜きせずに丁寧に？でも簡単にできるところは簡単に？自分なりのやり方を見つけてみてはいかがでしょうか。

たとえばCSSでわからないものがあっても、ページを作りながら検索してみてください。
そうすることで、このプロパティはこんな意味なんだ、こんな値があるんだ、と気づけると思います。

みなさんのサイトデザインのお役に立てば、さいわいです。

コメント