2015年11月2日月曜日

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

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

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


Hover.cssの導入手順


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

①Hover.cssをダウンロードします。
②ダウンロードは以下のページにアクセスして「Download ZIP」から行います。
「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」を有効活用できる効果的な利用方法を紹介していきたいと思います。




テキスト編


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

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


画像編






















随時更新予定…

2015年11月1日日曜日

【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)

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

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


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

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

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


関連記事

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



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

見出しサンプル集

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

見出し①




見出し②




見出し③





2015年10月29日木曜日

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

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

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

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

関連記事

【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)
【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)
【HTML】【CSS】コピペで使えるサンプル集-背景編



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

ボタン サンプル集

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

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