コピペで使える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);
}

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

coffee-2446645_1280

ページ遷移時のフェード効果を実装するjQuery

リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。 今回新たに作成し...

MORE

desktop-2325627_1280

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

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

MORE

background-2850091_1280

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

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

MORE

food-2940553_1280

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

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

MORE

laptop-2838921_1280

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

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

MORE

season-1985856_1280

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

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

MORE

alarm-clock-2132264_1280

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

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

MORE

architecture-1868502_1280

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

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

MORE

computer-1185626_1280

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

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

MORE

home-office-569153_1280

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

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

MORE

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

flower