商用利用OK、加工OK、許可不要、ALL無料のホームページ素材集

WEBデザイナーが作った超シンプル素材集

TIPS MENU

MATERIAL MENU

がんばろうニッポン

CSSサンプル

ここでは、ちょっと役立つCSSをメモ程度に置いていきます。
ご自由にお使いいただけますが、設置後の動作を保障するものではありませんのでご注意ください。

ちょっとおしゃれなボックス

簡単な背景をつけるだけで、ちょっとおしゃれなボックスになります。
ボーダーを組み合わせれば尚OK。
目立たせたい部分や、毛色の違ったコンテンツ毎に設定したりと、色々と使えると思います。

::::: CSS表記 :::::

.sample003_01 {
margin:10px;padding:10px;
background-image:url(/img_bg/bg003/bg003_05.gif);
background-color:#FFFFFF;
border:2px solid #0099CC;
}
.sample003_02 {
margin:10px;padding:10px;
background-image:url(/img_bg/bg007/bg007_04.gif);
background-color:#FFFFFF;
border:3px double #009900;
}

::::: HTML表記 :::::

<div class="sample003_01">上はこんな感じです。</div>
<div class="sample003_02">下はこんな感じです。</div>

::::: 動作確認 :::::
上はこんな感じです。
下はこんな感じです。
更新日:2011.01.22 Category:CSSサンプル
HOMEへ このページのTOPへ