アニメーションCSSボタンを２分で量産する方法！

ブログを作っていると、申し込みボタンとか問い合わせボタンが必要だなぁと感じることがあります。

画像を加工して、ボタンを作成してもいいのですが、CSSを使って、「押したくなるボタン」を作ってみてはどうでしょうか？という話をこちらの記事に書きました。

簡単すぎ！CSSでボタンを作って記事内に配置する方法

Blog内にボタンを設置したいけれども、ボタンの作成が大変！実はCSSの知識が全くなくてもボタンは簡単に作成でき、レスポンシブ対応！慣れるとたった５分で動きのあるCSSボタンがあなたのBlogに設置されます。その方法を具体的に解説しました。

nice-service.work

で、今回はせっかくなので、CSSとhtmlとの関係をパパッと理解して、一つ作成したボタンをもとに量産する方法を紹介します。

因みに、この記事はCSSとかhtmlってよくわからない…って方を対象にしています。

この記事を読むとこれができるようになる！

 

CSSとhtmlの関係は先生と生徒って感じ

長年教育の現場にいましたから、僕はCSSの役割と同じようなことをしてきたわけです。

 

６年１組には、大野・松本・櫻井…といろいろな奴がいますが、全員「前にならえ」をします。

もちろん、６年２組の浜田・松本・山崎・田中…はちゃんと倒立を「倒立歩行」をします。

生徒はいろいろいますが、クラスによって動きを管理することができます。

これが、CSSとhtmlとの関係です。

 

ボタンを作る時のCSSとhtmlとの関係を見てみよう

今回は、上のボタンを例に２分で量産するための方法を紹介します。

このボタンもCSSデザインジェネレーターで２分くらいで作成したもので、htmlはこう記述しています。

<div class="ryousan"> <a href="">ボタンは量産できる</a> </div>

で、重要なのは、class="ryousan"ってところで、<a href="">ボタンは量産できる</a>は、ryousanクラスに入っています。

そこで、こう言えばいいのです。

で、付箋風のデザイン・ちょっとした影・ホバーした時の状態などを指定してやったものが、このCSSです。

とは言っても、これもジェネレーターが書いてくれましたが。

少し難しく見えるかもしれませんが、それぞれの項目を見るとなんとなくCSSの仕組みも感じられると思います。

[css] .ryousan{ margin-left:auto; margin-right:auto; width:100%; height:45px; line-height:45px; } .ryousan a{ display:block; width:100%; height:100%; text-decoration: none; background:#F7F7F7; text-align:center; border-left:11px solid #FF7C5C; color:#FF7C5C; font-size:20px; font-weight:bold; box-shadow:0px 2px 2px 0px #DEDEDE ; transition: all 1s ease; } .ryousan a:hover{ background:#F7F7F7; color:#0093FF; margin-left:0px; margin-top:0px; border-left:11px solid #0093FF; box-shadow:0px 2px 2px 0px #DEDEDE ; } [/css]

ということは、ryousanクラスにさえ入れてしまえば、どんな奴も付箋になってくれるということです。

つまり、この色合いの付箋みたいなボタンなら、簡単にたくさん作れるわけです。

下のボタンもパパッと１分もあれば作れるのがとても便利です。

 

一度作成したアニメーションCSSボタンをパッと量産する手順

実際にブログを運営していると、ボタンが欲しいなぁってことはあっても、種類は１〜３種類もあれば十分だと思います。

Step1  もともと貼り付けていたhtmlをコピーする

この記事で言えばこの部分のことです。

こんな表示が見つからない！って時は、ボタンの部分の表示をhtmlモードにするとソースコードが見えるようになります。

 

Step２  ボタンを設置したい場所でhtmlをペーストする

この時もペーストする際には、htmlモードになっていないといけません。

で、あとは「ボタンは量産できる」のテキストをこうして変更するだけです。

<div>で囲まれた中は、テキストをどれだけ触っても、ryousanクラスなので、付箋ボタンになってくれるということです。

あとは、ビジュアルモードにして、リンクをガンガン貼って行けばいいということになります。

もちろん、このページへのリンクも大歓迎です。

 

htmlとCSSの関係が分かれば可能性は広がる！

今回は、アニメーションCSSボタンを量産する方法を紹介しましたが、あわせてhtmlとCSSとの関係も見てもらいました。

細かいことは難しいにしても、これくらいの事が分かれば、「このソースご自由に！」って配っていらっしゃるCSSも利用しやすくなるというのも大きなメリットです。

この機会に少しCSSにも触れてみて欲しいなぁと思います。