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

Blogは資産
スポンサーリンク
しぶやん

公務員になるがもっと自由に生きたい!と感じ退職。その後、金銭的などん底を味わい、お金に関する勉強をし浮上。その後、いくつかの事業・投資による複数の収入の柱を構築。
▶︎お金持ち=(収入ー支出)×運用利回りの公式が理念。
資金が少なくても、豊かになれる道を紹介します。

スポンサーリンク
スポンサーリンク

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

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

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

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

OLちゃん
OLちゃん

CSSとhtmlの関係って言われるともう嫌ってなるんだけど…。

しぶやん
しぶやん

でも、この話を理解しておけば、もう画像を使ってボタンを作らなくていいんだ。たくさん記事を書くブロガーなら知っておきたいことだと思うよ。

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

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

  • 一つ作ったボタンをもとに次々とボタンを2分で量産することができる。
  • CSSとhtmlの関係が分かれば、量産できる型とそうでない型が分かる。

 

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

CSSとhtmlとの関係・難しい話をする訳ではありません。

CSSとhtmlとの関係・難しい話をする訳ではありません。

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

しぶやん
しぶやん

6年1組は、前にならえ!

6年2組は、全員倒立歩行!

 

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

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

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

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

 

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

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

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

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

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

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

しぶやん
しぶやん

いいか!

量産クラスの奴は、とにかく付箋になれ!

で、付箋風のデザイン・ちょっとした影・ホバーした時の状態などを指定してやったものが、この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 ;
}

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

 

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

これほど興奮するかもしれません

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

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

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

スポンサーリンク
スポンサーリンク
Blogは資産
スポンサーリンク
PTR Poor To Rich

コメント