『JINテーマ用』コピペで簡単に使えるおしゃれなCSSボックス

HTML(記事中へ書き込みましょう)

<div class="yc_mono_box1">
シンプルな黒枠囲み
微妙な角の丸みがキーです。
</div>

CSS(追加CSSへ書き込みましょう)

.yc_mono_box1{
  border: 3.25px solid #444;
  border-radius: 1.35px;
  display: inline-block;
  margin: 1em 0;
  padding: .9em 1.2em;
  text-align: center;
}
.yc_mono_box1 p{
  margin: 0;
  padding: 0;
}

<div class="yc_mono_box2">
背景灰色と
文字黒ボックス
</div>

CSS(追加CSSへ書き込みましょう)

.yc_mono_box2{
  background: #555;
  color: #fff;
  display: inline-block;
  padding: 1em 1.3em;
  margin: 0;
  text-align: center;
}
.yc_mono_box2 p{
  margin: 0;
  padding: 0;
}

<div class="yc_mono_box3">
付箋風ボックス。
メモ等のテキストにお使いください。
</div>

CSS(追加CSSへ書き込みましょう)

.yc_mono_box3{
  background: #eee;
  border-left: 7px solid #333;
  display: inline-block;
  padding: .9em 1.2em;
  margin: 0;
  text-align: center;
}
.yc_mono_box3 p{
  margin: 0;
  padding: 0;
}

<div class="yc_mono_box4">
破線囲みボックス。
軽いまとめなどに向いているかと思います。
</div>

CSS(追加CSSへ書き込みましょう)

.yc_mono_box4{
  border: 2px dashed #333;
  display: inline-block;
  margin: 1em 0;
  padding: .7em 1.2em;
  text-align: center;
}
.yc_mono_box4 p{
  margin: 0;
  padding: 0;
}

<div class="yc_mono_box5">
<div class="b5_title">タイトル付きボックス。</div>
軽いまとめなどに向いているかと思います。
</div>

CSS(追加CSSへ書き込みましょう)

.yc_mono_box5 {
  background: #eee;
  display: inline-block;
  margin: 2em 0;
  text-align: center;
}
.yc_mono_box5 .b5_title {
  background: #444;
  padding: 4px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.yc_mono_box5 p {
  padding: 15px 20px;
  margin: 0;
}

<div class="yc_cu_box1">
布っぽいボックス。
内側に入り込んだ糸と
フラットパウダーブルーの
布地が特徴です。
</div>

CSS(追加CSSへ書き込みましょう)

.yc_cu_box1 {
  border: 2px dashed #fff;
  border-radius: 9px;
  box-shadow: 0px 0px 0px 11px  #b8c9f2;
  color: #fff;
  display: inline-block;
  padding: 0.2em 0.6em;
  margin: 1.8em 0;
  background: #b8c9f2;
  text-align: center;
}
.yc_cu_box1 p {
  margin: 0;
  padding: 0;
}

<div class="yc_cu_box2">
<div class="c2_title">
タイトル付きボックス</div>
内側に入り込んだ糸と
フラットパウダーブルーの
布地が特徴です。
</div>

CSS(追加CSSへ書き込みましょう)

.yc_cu_box2 {
  position: relative;
  margin: 3em 0 1em 0;
  background: #edf1f2;
  border-radius: 2px;
  box-shadow: 0 2px 3px #ccc;
  display: inline-block;
  padding: 22px 18px;
  color: #777;
  font-weight: bold;
  text-align: center;
}
.c2_title {
  background: #90d7ec;
  border-radius: 2px;
  font-size: 1.2em;
  padding: 7px 0 7px 16px;
  margin: -8px -8px 16px -8px;
  color: #fafafa;
  font-weight:bold;
}
.yc_cu_box2:after {
  position: absolute;
  content: "";
  top: 20px;
  width: 26%;
  height: 35px;
  opacity: 0.8;
  margin: -35px auto 10px 35%;
  background: #009AD6;
  background-image: radial-gradient(#fff 25%, transparent 0), radial-gradient(#fff 25%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  transform: rotate(-1.7deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 4px rgba(0,0,0,.2);
}
.yc_cu_box2 p {
  margin: 0;
  padding: 0;
}

<div class="yc_cu_box3">
背景に斜めのストライプが
入ったボックス。
ストライプの色変更はパラメータ内の
複数の箇所を変更する必要があります。
</div>

CSS(追加CSSへ書き込みましょう)

.yc_cu_box3{
  padding: 0.5em 1em;
  margin: 2em 0;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#f4e0c4 3px, #f4e0c4 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#f4e0c4 3px, #f4e0c4 7px);
  text-align: center;
}
.yc_cu_box3 p {
  margin: 0; 
  padding: 0;
}

.yc_mono_box1_a{
  background: linear-gradient(150deg,#e66465, #9198e5);
  border: 8px solid #fafafa;
  border-radius: 32px;
  box-shadow: -16px -16px 0 -5px #e66465, 16px 16px 0 -5px #9198e5;
  color: #fafafa;
  margin: 1.3em;
  padding: 0 1.4em 1.4em 1.4em;
  text-align: center;
}
.yc_mono_box1_a p{
  margin: 0;
  padding: 0;
}
.yc_mono_box1_a:first-letter{
  font-size: 3em;
}