コピペで使えるCSSデザイン枠テンプレート


どシンプルなものからちょっと凝ったものまで、
CSSでスタイリングしたデザイン枠のテンプレートです。

色など自由に調整して引用枠や見出しなどにお使いください。

HTMLは共通です。
クラス名はお好きに変更してください。

<div class="block">CSSでつくるデザイン枠テンプレート</div>

 

CSSでつくるデザイン枠テンプレート1
.block {
    padding: 20px;
    background: #fff;
    border: 1px #ccc solid;
    box-shadow: 0 2px 3px 0 #ddd;
    -moz-box-shadow: 0 2px 3px 0 #ddd;
    -webkit-box-shadow: 0 2px 3px 0 #ddd;
}

 

CSSでつくるデザイン枠テンプレート2
.block {
    padding: 20px;
    color: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #6495ed;
}

 

CSSでつくるデザイン枠テンプレート3
.block {
    padding: 20px;
    background: #ffe5e9;
    background: linear-gradient(to bottom, #fff, #ffc0cb);
                -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ffc0cb));
                -moz-linear-gradient(top, #fff, #ffc0cb);
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFffffff', endColorstr='#FFffc0cb');
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffc0cb',GradientType=0 );
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
}

 

CSSでつくるデザイン枠テンプレート4
.block {
    border: #ffb6c1 solid 1px;
    border-left: #ffb6c1 solid 10px;
    padding: 20px;
    background: #fff;
}

 

CSSでつくるデザイン枠テンプレート5

.block {
    position: relative;
    padding: 20px;
    color: #fff;
    background: #d2b48c;
    overflow: hidden;
}
 
.block:before {
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-width: 16px 16px 0 0;
    border-style: solid;
    border-color: #fff;
    border-top-color: #998366;
    box-shadow: 0 1px 1px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

 

CSSでつくるデザイン枠テンプレート6
.block {
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 50px #ddd inset;
    -moz-box-shadow: 0 0 50px #ddd inset;
    -webkit-box-shadow: 0 0 50px #ddd inset;
}

 

CSSでつくるデザイン枠テンプレート7
.block {
    color: #fff;
    background: #3cb371;
    padding: 20px;
    border: 2px dashed rgba(255,255,255,0.5);
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
}

 

CSSでつくるデザイン枠テンプレート8

.block {
    position: relative;
    background: #fff;
    padding: 20px;
    z-index: 10;
    top: 0;
    left: 0;
}
.block:before, .block:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 1px 4px #aaa;
    -moz-box-shadow: 0 1px 4px #aaa;
    -webkit-box-shadow: 0 1px 4px #aaa;
}
.block:before {
    background: rgba(255,255,255,0.5);
    top: 0;
    left: 0;
    z-index: -10;
}
.block:after {
    background: #87cefa;
    top: 8px;
    left: 8px;
    z-index: -20;
}

 

CSSでつくるデザイン枠テンプレート9
.block {
    padding: 20px;
    border: #ff7f92 dashed 1px;
    background: #fff;
}

 

CSSでつくるデザイン枠テンプレート10
.block {
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece;
    -moz-box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece;
    -webkit-box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece;
}

 

CSSでつくるデザイン枠テンプレート11
.block {
    padding: 10px 20px;
    margin: 10px;
    background: #ffe4e1;
    box-shadow: #ffe4e1 0 0 10px 10px;
    -webkit-box-shadow: #ffe4e1 0 0 10px 10px;
    -moz-box-shadow: #ffe4e1 0 0 10px 10px;
}

 

CSSでつくるデザイン枠テンプレート12

.block {
    color: #fff;
    padding: 20px;
    background: #b2946c;
    position: relative;
    z-index: 10;
}

.block:before {
    content: "";
    position: absolute;
    background: #b2946c;
    margin: 4px;
    border: 2px #fff solid;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -10;
}

 

CSSでつくるデザイン枠テンプレート13

.block {
    padding: 20px;
    background: #fff;
    border: 4px #66cdaa solid;
    position: relative;
    z-index: 10;
}

.block:before {
    content: "";
    position: absolute;
    background: #fff;
    margin: 3px;
    border: 2px #7accb0 solid;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -10;
}

 

CSSでつくるデザイン枠テンプレート14
.block {
    color: #fff;
    background: #f08080;
    padding: 20px;
    border: 1px dashed rgba(255,255,255,0.8);
    box-shadow: 0 0 0 5px #f08080;
    -moz-box-shadow: 0 0 0 5px #f08080;
    -webkit-box-shadow: 0 0 0 5px #f08080;
}

 

CSSでつくるデザイン枠テンプレート15

.block {
    position: relative;
    padding: 20px;
    z-index: 10;
    top: 0;
    left: 0;
}
.block:before, .block:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
}
.block:before {
    top: 0;
    left: 0;
    z-index: -10;
    background: #f5f5f5;
}
.block:after {
    top: 4px;
    left: 4px;
    z-index: -20;
    background: rgba(0,0,0,0.1);
    box-shadow: 4px 4px 0 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 0 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 4px 4px 0 0 rgba(0,0,0,0.2);
}

こんな記事も書きました!

WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方

カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...

MORE

無料で簡単にロゴを作れるツール「LOGASTER」が斬新!

Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...

MORE

ローディング・読み込み中の画像を簡単に作成できるツール

ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...

MORE

名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...

MORE

CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...

MORE

WordPressでCSSの反映を確認しながら編集する方法

CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...

MORE

CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた

アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」...

MORE

WordPressをカスタマイズする前に子テーマを作っておく

子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...

MORE

コピペで使える固定ソーシャルボタンBOX

WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...

MORE

CORE(TCD027)でトップページの新着記事一覧にページナビをつける

先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...

MORE

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

flower