Loading...

Single Post

HOME > post > Web > CSS3で作るボックスデザイン

CSS3で作るボックスデザイン

| Web
コーディング

ブログをテキストばかりで書いていると閲覧者に「読みづらい」と思われてしまう事もあるでしょう。そんな時に、文章にメリハリをつける活躍するのが段落、見出し、ボックスです。今回は、これまで作ってきたボックスが溜まってきたので、まとめて掲載します。気に入ったボックスがあれば、使って頂けると幸いです。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

【HTML】


<div class="box_1">
  <div class="main_contents">
    <p class="box_mg_t_30">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
  </div>
</div>

【CSS】


.box_1 {
	width: 500px;
	margin: 60px auto;
	padding: 15px;
        background-size: 10px 10px;
	background-color: #E6E6EA;
	background-image: linear-gradient(45deg,#009FB7 25%,transparent 25%,transparent 50%,#009FB7 50%,#009FB7 75%,transparent 75%,transparent);
	}
.main_contents {
	 background: #fff;
	 padding: 25px;
	}

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

【HTML】


<div class="box_2">
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

【CSS】


.box_2{
	width: 500px;
	margin: 60px auto;
	padding: 20px;
	background: #E6E6EA;
	box-shadow: 0px 0px 0px 10px #E6E6EA;
	border: dashed 2px #009FB7;
     }

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

【HTML】


<div class="box_3">
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

【CSS】


 .box_3{
	position: relative;
	background: #E6E6EA;
	box-shadow: 0px 0px 0px 5px #E6E6EA;
	border: dashed 2px #009FB7;
	width: 500px;
	margin: 60px auto;
	padding: 20px;
	}
.box_3:after{
	position: absolute;
	content: '';
	right: -7px;
	top: -7px;
	border-width: 0 15px 15px 0;
	border-style: solid;
	border-color: #88949B #fff #88949B;
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
	}

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

【HTML】

<div class="box_4">
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

【CSS】


.box_4{
	width: 500px;
	margin: 60px auto;
	padding: 20px;
	background: -webkit-repeating-linear-gradient(-45deg, #8EEAFF, #8EEAFF 3px,#ABEEFC 3px, #ABEEFC 7px);
	background: repeating-linear-gradient(-45deg, #8EEAFF, #8EEAFF 3px,#ABEEFC 3px, #ABEEFC 7px);
	}

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

【HTML】


<div class="box_5">
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

【CSS】


.box_5{
        width: 500px;
	margin: 60px auto;
	padding: 20px;
	background: -moz-linear-gradient(#28B6D6, #44BBA4);
	background: -webkit-linear-gradient(#28B6D6, #44BBA4);
	background: linear-gradient(to right, #28B6D6, #44BBA4);
	color: #FFF;
	}

TEXT

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

【HTML】


<div class="box_6">
    <span class="box-title">TEXT</span>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

【CSS】


.box_6 {
	width: 500px;
	margin: 60px auto;
	padding: 20px;
	position: relative;
	border: double 3px #009FB7;
	}

.box_6 .box-title {
	position: absolute;
	display: inline-block;
	top: -10px;
	left: 210px;
	padding: 0 9px;
	line-height: 1;
	font-size: 19px;
	background: #FFF;
	color: #009FB7;
	font-weight: bold;
	}

TEXT

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

【HTML】


<div class="box_7">
    <span class="box-title_2">TEXT</span>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

【CSS】


.box_7 {
	width: 500px;
	margin: 60px auto;
	padding: 20px;
	position: relative;
	border: solid 3px #009FB7;
	}
.box_7 .box-title_2 {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	vertical-align: middle;
	font-size: 17px;
	background: #009FB7;
	color: #ffffff;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
	}

BOX TITLE

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

【HTML】


<div class="box_8">
    <span class="box-title_3">BOX TITLE</span>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

【CSS】


.box_8 {
	width: 500px;
	margin: 60px auto;
	padding: 20px;
	background: #E6E6EA;
	}
.box_8 .box-title_3 {
	font-size: 1.2em;
	background: #009FB7;
	padding: 4px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	letter-spacing: 0.05em;
	}

BOX TITLE

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

【HTML】


<div class="box_9">
    <div class="box-title_5">BOX TITLE</div>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

【CSS】


.box_9 .box-title_5 {
	font-size: 1.2em;
	background: #009FB7;
	padding: 4px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	letter-spacing: 0.05em;
	}
.box_9 p {
	padding: 15px 20px;
	margin: 0;
	}

BOX TITLE

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

【HTML】


<div class="box_10">
	<h3 class="box_title_10">BOX TITLE</h3>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>

【CSS】


.box_10{
	width: 500px;
	margin: 60px auto;
	padding: 0 20px 20px 20px;
	background: #E6E6EA;
	box-shadow: 0px 0px 0px 10px #E6E6EA;
	border: dashed 2px #009FB7;
	}
		
		
.box_title_10{
	position: relative;
	display: inline-block;
	margin: 20px 0 30px !important;
	font-size: 24px;
	line-height: 28px;
	color: #222;
	text-align: center;
	display: block;
	padding: 0;
	font-weight: 700;
	}

.box_title_10:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -10px;
	display: inline-block;
	width: 50px;
	height: 1px;
	-moz-transform: translateX(-38%);
	-webkit-transform: translateX(-38%);
	-ms-transform: translateX(-38%);
	transform: translateX(-38%);
	background-color: #555;
	border-radius: 2px;
	}
		
.box_title_10:after {
	content: '';
	position: absolute;
	left: 48%;
	bottom: -5px;
	display: inline-block;
	width: 70px;
	height: 1px;
	-moz-transform: translateX(-27%);
	-webkit-transform: translateX(-27%);
	-ms-transform: translateX(-27%);
	transform: translateX(-27%);
	background-color: #555;
	border-radius: 2px;
	}

まとめ

これまでに実装したボックスを10個掲載致しましたが、いかがだったでしょうか。掲載したコードをカスタムして頂けると応用もできると思いますので、ぜひトライしてみられてください。ボックスはウェブサイトのパーツの1部ですが重要なパーツです。掲載させて頂いたボックスがお役に立つと嬉しく思います。

関連記事

Contact Page