「食トレ」してる？
Wordpress

【コピペで簡単】CSSだけで作るシンプルなBOXデザインまとめ【JIN】

 

せっかく作ったし公開しておこうということで、コピペどうぞのシンプルなBOXデザインを公開します。

なお、素人が作成したものですのであらかじめご了承くださいね。

表示の確認はWordpressの「JIN」というテーマでのみ行っております。他のテーマでは確認をしていませんので、あしからず。
シンプルにいきたい

ワードプレステーマの「JIN」って、ちょっとかわいい系なんですよね。シンプルと言うよりも可愛い感じ。

シンプルなのが無けりゃ自分で実装していこうってことで、CSSの勉強も兼ねてあーじゃこーじゃやりながら作ったBOXデザインです。とりあえずうちのブログでは動いてるんで、使いたい方はどうぞという気持ちでの公開です。

動かなくなった！うまく表示されない！などは自分で解決してくださいね。
ノークレームノーリターンでお願いします（笑）

コピペで簡単：CSSだけで作るシンプルなBOXデザイン

コピペで作るシンプルなBOXサンプル

simplebox1
simplebox2
simplebox3
simplebox4
simplebox5
simplebox6
simplebox7
simplebox8

シンプルBOXのHTML

<div class="simplebox1">simplebox1</div>
<div class="simplebox2">simplebox2</div>
<div class="simplebox3">simplebox3</div>
<div class="simplebox4">simplebox4</div>
<div class="simplebox5">simplebox5</div>
<div class="simplebox6">simplebox6</div>
<div class="simplebox7">simplebox7</div>
<div class="simplebox8">simplebox8</div>

シンプルBOXのCSS

/* シンプルBOXデザイン */
.simplebox1 {
	padding: 1em 2em;
	margin: 0 0 2em;
	border: solid 1px #999999;
	border-radius: 4px;
	border-color: rgba(165, 165, 165, 0.2);
}

.simplebox2 {
	margin: 0em 0 2em;
	padding: 1em 2em;
	border: 4px double #ddd;
}

.simplebox3 {
	margin: 0 0 2em;
	padding: 1em 2em;
	border: dashed 2px #999;
}

.simplebox4{
	margin: 0 0 2em;
	padding: 1em 2em;
	border-top: 2px solid #999;
	border-bottom: 2px solid #999;
	border-color: rgba(165, 165, 165, 0.2);
}

.simplebox5{
	margin: 0 0 2em;
	padding: 1em 2em;
	background-color: #fcfcfc; 
	border: 2px solid #ccc;
	border-radius: 8px;
}

.simplebox6 {
	padding: 1em 2em;
	margin: 0 0 2em;
	background-color:#f7f7f7;
	border-left: solid 10px #757575;
}

.simplebox7{
	margin: 0 0 2em;
	padding: 1em 2em;
	background-color: #757575; 
	border-radius: 8px;
	color:#ffffff;
}

.simplebox8 {
	padding: 1em 2em;
	margin: 0 0 2em;
	color: #333;
	background: #f7f7f7;
	border-top: solid 10px #757575;
}

.simplebox1 p,.simplebox2 p , .simplebox3 p,.simplebox4 p,.simplebox5 p,.simplebox6 p,.simplebox7 p,.simplebox8 p{
	margin: 0; 
	padding: 0;
}

/*スマホ用の設定*/
@media only screen and (max-width: 500px){
.simplebox1, 	.simplebox2, .simplebox3,	.simplebox4,	.simplebox5,	.simplebox6,	.simplebox7,	.simplebox8 {
		padding: 1em 1em;
	}
	
}

シンプルBOXメモ

JINの段落設定（pタグ）は、下のスペースを広く取るため強制的に上下左右を0にしてあります。
スマホは横幅が短いため、余白を小さめにしてあります。必要なければ消してください。

コピペで簡単 シンプルなタイトルラベル付BOXデザイン

デザイン例

ラベルBOX赤

ラベル付きのBOX。
タイトルをつけたい時に使用。

リストはこんな感じ。
  • 朝：マック
  • 昼：吉野家
  • 夜：家系ラーメン

おまけで、BOXの色とリストの色をそろえるコードもあります。必要なければ削除可。

タイトルは短めに。

タイトルを長くしすぎるとバグります。気をつけて。

  1. PCではちゃんと見える。
  2. スマホでバグる。
  3. 文字が折り返して重なっちゃう。
ご注意ください！

こちらのラベル付きカラーBOXは素人が作成しております。不具合が起こっても責任は取れません！バックアップをしっかりと取りましょう！

グリーンラベル
  1. グリーンラベルね。
  2. ビール飲みたい。
  3. いかんいかん。
コピペで簡単！
  1. HTMLをコピーする。
  2. テキストエディタの方にペーストする。
  3. CSSをコピーする。
  4. 追加CSSにペーストする。

ラベルBOXのHTML

<div class="label-box-red">
<div class="box-title">タイトル</div>
テキスト
</div>
<div class="label-box-blue">
<div class="box-title">タイトル</div>
テキスト
</div>
<div class="label-box-yellow">
<div class="box-title">タイトル</div>
テキスト
</div>
<div class="label-box-green">
<div class="box-title">タイトル</div>
テキスト
</div>
<div class="label-box-gray">
<div class="box-title">タイトル</div>
テキスト
</div>

ラベルBOXのCSS

/* ラベル付きカラーBOX */
.label-box-red, .label-box-blue, .label-box-yellow, .label-box-green, .label-box-gray {
  position: relative;
  margin: 4em auto 2em;
  width: 100%;
  padding: 1.5em 1.5em;
  border: solid 2px #E87A90;
  border-radius: 5px;
  border-top-left-radius: 0;
}
.label-box-red .box-title, .label-box-blue .box-title,.label-box-yellow .box-title, .label-box-green .box-title,.label-box-gray .box-title {
  position: absolute;
  line-height: 0;
  font-size: 18px;
  font-weight:bold;
  left: -2px;
  top: -36px;
  color: #fff;
  padding: 18px 15px;
  background: #E87A90;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  letter-spacing: 0px !important;
}
.label-box-red p, .label-box-blue p, .label-box-yellow p, .label-box-green p, .label-box-gray p {
  margin: 0px 0px; 
  padding-bottom: 0em;
}
.label-box-blue{
  border: solid 2px #89C2F4;
}
.label-box-blue .box-title{
  background: #89C2F4;
}
.label-box-yellow{
  border: solid 2px #F7D94C;
}
.label-box-yellow .box-title{
  background: #F7D94C;
}
.label-box-green{
  border: solid 2px #91AD70;
}
.label-box-green .box-title{
  background: #91AD70;
}
.label-box-gray{
  border: solid 2px #757575;
}
.label-box-gray .box-title{
  background: #757575;
}
/* スマホ用設定 */
@media only screen and (max-width: 500px){
.label-box-red ul, .label-box-blue ul, .label-box-yellow ul, .label-box-green ul, .label-box-gray ul,.label-box-red ol, .label-box-blue ol, .label-box-yellow ol, .label-box-green ol, .label-box-gray ol {
  margin-top: 0em !important;
  margin-bottom: 0em !important;
  padding-left: 0px;
}
}
/*ラベル付カラーBOXここまで*/

BOXの色とリストの色をそろえるコード

/* JIN用リストの色をBOXに合わせる設定 */
.label-box-red ul > li:before, .label-box-red ol > li:before {
  background-color:#E87A90!important;
	}
.label-box-blue ul > li:before, .label-box-blue ol > li:before {
  background-color:#89C2F4!important;
	}
.label-box-yellow ul > li:before, .label-box-yellow ol > li:before {
  background-color:#FFCC11!important;
}
.label-box-green ul > li:before, .label-box-green ol > li:before {
  background-color:#91AD70!important;
	}
.label-box-gray ul > li:before, .label-box-gray ol > li:before {
  background-color:#757575!important;
	}
/* JIN用リストの色をBOXに合わせる設定ここまで */

【コピペOK】シンプルなBOXデザインまとめ

CSS触ってるの面白いんですけど、こればっかりやってるとあっという間に時間が過ぎちゃうんですよね（笑）

何か実装したらまた載せるかもしれません。

ではまた。

CSS JIN wordpress
関連リンク