【HTML】【CSS】コピペで使えるサンプル集－ボタン編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

第二弾は「ボタン」編として一般的に使用されているようなものをまとめていきます。
コピペだけで使用可能なものだけを紹介しています。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・ボタンのキャプションはご使用時には書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－背景編

・【HTML】【CSS】コピペで使えるサンプル集－引用部分編

────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

ボタン サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

※マウスを載せた時の動作は【WEB】マウスホバーエフェクトの導入の方法を利用しています。



<button style="background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 1px solid #DDD; color: white; padding: 10px 0; width: 100px;"> ボタン①</button>



<button style="background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));"> ボタン②</button>



<button style="background: #EEE; border: 3px solid #DDD; color: #111111; padding: 10px 0; width: 100px;"> ボタン③</button>

【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは見出し編として一般的にブログ等で使用されているシンプルな見出しをまとめてみましたので、
気に入ったものがあればご利用ください(^o^)／

CSSがわかる方は色や大きさも好きにカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しています。
画像は使用しておりません。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・見出しのタイトルは書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－背景編

・【HTML】【CSS】コピペで使えるサンプル集－引用部分編

────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

見出しサンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

見出し①

<h1 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;"> 見出し①</h1>

見出し②

<h1 style="background: #eee; border-bottom: 1px dashed #aaa; border-top: 1px dashed #aaa; box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset; color: #665555; font: bold 24px/1.6 Arial, Helvetica, sans-serif; padding: 5px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1);"> 見出し②</h1>

見出し③

<h1 style="-moz-transform: rotate(-3deg) skew(-3deg); -ms-transform: rotate(-3deg) skew(-3deg); -o-transform: rotate(-3deg) skew(-3deg); -webkit-transform: rotate(-3deg) skew(-3deg); background: #f0e800; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800; color: #333333; font: bold 30px/1.6 Arial, Helvetica, sans-serif; margin: 0 -1px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1); transform: rotate(-3deg) skew(-3deg);"> 見出し③</h1>