スポンサーリンク

[ブログ]CSSがわからない私でもこんなことが出来たので紹介してみます


スポンサーリンク

12447673133_d1236d61cc_n



はじめに

お気に入りのブログテーマ「el plano」を使うと、画像やテキスト、その他HTMLタグで括ったコンテンツにCSSを利用したアニメーション効果を簡単に付けることができます。
何やら小難しい話ですが、要はマニュアルに添ってすすめていけば、こんな私でも簡単にできたって話です。

CSSがわからない私でもこんなことが出来たので紹介してみます

では「CSS」とは何ぞや。
ウィキペディアより

Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

難しい言葉が並んでいますが、要は「CSSを使えば、例えば文字に背景色を付けたり、文字を枠で囲ったりなど、ホームページやブログの見栄えを細かく指定することができます。」

ま、難しい話はこれくらいにしておいて、早速やってみます。
今回使用する写真はこちら。

12447673133 d1236d61cc n

ツイパパのメインアイコンにもなっている私の彼女です。
この写真を使って遊んでみましょう。
(※Internet Explorerでは動作しませんのでご了承願います。)
(※スマホからご覧の方は写真をタップしてみてください。)

CSS-1CSSで円形加工です

以下の写真にマウスポインターを載せてみてください。
CSS-2CSSでブルブルシェイクです

CSS-3CSSでぐるっと回転します

CSS-4CSSでズームイン

CSS-5CSSでズームアウト

CSS-6CSSでホバーシャドウ

CSS-7CSSでスイング
Gare-des-guillemins-01-300x300

CSS-8CSSでグラグラ
Gare-des-guillemins-01-300x300

CSS-9CSSでピクピク
Gare-des-guillemins-01-300x300

CSS-10CSSでバウンド
Gare-des-guillemins-01-300x300

CSS-11CSSでパルス
Gare-des-guillemins-01-300x300

CSS-12CSSで合わせ技

おわりに

インターネットっていろんなことができます。
このような装飾がわかるようになると、さらに楽しいでしょうね。
私にはちょっと無理っぽいので、見本を真似るのが精一杯w
でも上記のようなことが簡単にできちゃうテーマ「el plano」には満足しています。
もうしばらく勉強の日々が続きます(;・∀・)

この記事が気に入ったら
いいね ! してくださいね

Twitter で

コメントはこちら

*
*
* (公開されません)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

COMMENT ON FACEBOOK

スポンサーリンク

Return Top