2015年11月7日土曜日

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

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

ここでは他サイトから文章を引用した時に使う引用部分(brockquote)のデザインについて
コピペだけで利用できるタグを紹介してきたいと思います。

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

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


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


関連記事

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



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

引用部分サンプル集

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


「引用部分①」
画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEを
いろいろデザインする




引用部分②
ここに引用する文章を記載してください。



Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples.
tympanus




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

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

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

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

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


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


関連記事

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


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

背景サンプル集

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

背景・模様①



背景・模様②



背景・模様③



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】コピペで使えるサンプル集-引用部分編



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

見出しサンプル集

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

見出し①




見出し②




見出し③