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

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

ここではホームページやブログのデザインに大きく営業する背景や模様について
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

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


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください

関連記事

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


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

背景サンプル集

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

背景・模様①

<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #00aaee; background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様①</span> </div>

背景・模様②

<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #ff9900; background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様②</span> </div>

背景・模様③

<div style="background-color: #840b2a; background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様③</span> </div>

【WEB】マウスホバーエフェクトの導入

今回はGitHubに公開されているcssライブラリ（Hover.cssファイル）を導入することで、
手軽にマウスがのった時のボタンやリンクの動作（ホバーエフェクト）を設定する方法をご紹介いたします。

しばらくAndroidアプリ開発からは離れHTMLやCSSを利用したWEB開発の方法を紹介していますが、
これも後々アプリ開発に繋がると思っていますので今は情報をまとめておきたいと思います(^^;

Hover.cssの導入手順

導入手順は以下のとおりです。
ブログなどに導入する場合は＜HEAD＞タグが編集できる必要があります。

①Hover.cssをダウンロードします。

②ダウンロードは以下のページにアクセスして「Download ZIP」から行います。

　https://github.com/IanLunn/Hover

③「Hover-master.zip」というファイルがダウンロードされますので、

　中の「css」フォルダにある「Hover.css」ファイルをコピーしておきます。

④「Hover.css」をWEB上に公開し、以下のようにHEADタグ内に記載します。

<head>
    <link href="css/hover-min.css" rel="stylesheet">
</head>

Demo

主な動作としては、開発者の方がDemo用のページを用意していますので、まずはそちらをご覧ください。

http://ianlunn.github.io/Hover/


Demoではボタンのみの動作を紹介していましたが、これはリンクでも画像でも利用可能です。



Pulse




ボタン以外にも「Hover.css」を有効活用できる効果的な利用方法を紹介していきたいと思います。

テキスト編

ほたるの光　まどの雪
書（ふみ）よむつき日　かさねつつ
いつしか年も　すぎのとを
あけてぞけさは　わかれゆく

ほたるの光
まどの雪
書（ふみ）よむつき日
かさねつつ
いつしか年も
すぎのとを
あけてぞけさは
わかれゆく

画像編

随時更新予定…

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

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

ここでは以前紹介した見出し編（シンプル）に少し多めにCSSを使って、少し凝ったデザインの見出しをまとめていきます。


CSSがわかる方は更にカスタマイズしていただければと思います。

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

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

関連記事

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

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

見出しサンプル集

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

見出し①

<h1 style="-moz-box-shadow: 1px 1px 3px #292929; -webkit-box-shadow: 1px 1px 3px #292929; background: #e3e3e3; background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8); background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8)); box-shadow: 1px 1px 3px #292929; color: #454545; margin-left: -20px; margin-top: 0; padding: 10px 20px; position: relative; text-shadow: 0 1px 0 white; width: 70%;"> 見出し①<span style="border-left: 20px solid transparent; border-top: 10px solid #c8c8c8; height: 0; left: 0; line-height: 0; position: absolute; top: 104%; width: 0;"></span></h1>

見出し②

<h1 style="-moz-border-radius: 4px; -webkit-border-radius: 4px; background: #1d8ade; border-left: 1px solid #036; border-top: 1px solid #036; box-shadow: inset 1px 1px 4px #036; color: white; margin: 0 0 30px 0; padding: 12px 10px; position: relative; text-shadow: 1px 1px 2px #333;"> <span style="background: transparent; border-color: #1d8ade transparent transparent transparent; border-style: solid; border-width: 15px; bottom: -27px; content: ' '; height: 0; left: 14px; position: absolute; width: 0; z-index: 2;"></span> 見出し②</h1>

見出し③

<h1 style="color: #111111; font-size: 20px; line-height: 1; margin: 30px 0 0 0; padding: 14px 5px 10px 10px; position: relative;"> <span style="-moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); background: #999; height: 12px; left: -5px; position: absolute; top: 0; transform: rotate(45deg); width: 12px;"></span> 見出し③ <span style="-moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); -webkit-transform: rotate(15deg); background: #777; height: 8px; left: -10px; position: absolute; top: 15px; transform: rotate(15deg); width: 8px;"></span> </h1>