CSSを使って雪を降らせる方法 (1/2)

[loading shortcode…]

今回は既にあるサイトをクリスマス仕様にして、ユーザーを楽しませる工夫を施す方法についてご紹介します。

活躍の場を広げる為には、常日頃から新しい情報を取得する努力も欠かせません。

喜ばれるエフェクトのデザイン

さて、クリスマスという言葉で思いつくものは、何でしょうか？

私の場合、物質的なものだと・・

• クリスマスツリー
• クリスマスケーキ
• ホワイトクリスマス

メンタルなものでいうと・・

• クリスマス映画など、ちょっとリッチな気分にさせてくれるもの
• クリスマスデート

・・・ などと他にも色々あるかと思いますが、今回は、CSSを使って雪を降らせるエフェクトを追加する方法をご紹介します。

WEB業界では「なるべく軽量にして、ユーザーに楽しんでもらえるものを提供する」というルールみたいなものがあり、暗黙の了解になっている様な空気があります。

CSS を利用するメリット

という訳で、軽くて誰でも使える楽しい GitHubを利用した作り方についてご紹介します。

※GitHubとはプログラミングのソースコードを保管する入れ物です。

下記のスクリプトは私のアカウントからフォークしたものです。

https://github.com/yukyco/ParticleJS

CSSを使う最大のポイントは、雪の結晶の画像を使っているという点です。

これが短時間で誰にでも作れる理由であります。

JavaScriptはとてもユーザーを楽しませてくれるコードがたくさんあります。

実際にGoogle で　‘ javascript’  と検索して、他のサイトなどを沢山見て頂けると判ると思います♪

近年は両方扱える人が少ないとも聞きました。需要も高いので、ぜひこの機会に習得してライバルに差をつけましょう。

PhotoshopやIllustratorだって、ソフトウエアというプログラムを使って動いている訳ですから、プログラムの裏側を辿れば、数字の羅列で出来ているとも考えられます。

裏側に廻って 仕掛けを作ったり仕組みを作れる様になれたら、楽しいですよね ♪

 

GitHubに登録しよう

実際 CSSの勉強は、HTMLを理解し 基本的なルールさえ覚えてしまえば、応用をきかせることが出来る様になり、楽しくなってくるものです。

だから早速、GitHubに登録することから始めてみましょう。

登録方法は猫でも出来そうなくらい、簡単でメールアドレスとパスワードを設定するだけです。

必ず両方共忘れない様にメモをして覚えておいて下さい。

 

登録したら、早速好きなエフェクトを探してみましょう。

素敵だな〜と思った人をフォローするのもいいでしょう。

まずはあちこちクリックしまくって、目を通してみます。それから自分の好きなものを探してみましょう。

見つかったらお気に入りに登録していきましょう。

マイページ内にリストとして一覧表示させることが出来るようになります。

さらにこれを自分のサイトに取り入れることが出来たら、嬉しいですよね。なんとなく得した気分になっちゃいます.

もっともっと覚えたい♪　という意欲がわいて来るのではないでしょうか。

 

Fork する

次は実際に Fork 機能を使って、自分のものにしていきましょう。

 

Forkすれば、アレンジして保存し、保存したものを自分のパソコンにダウンロードして自分のサイトで利用することも簡単に出来ます。

色やスピードを変更したりアレンジして、今まで作ってきたサイトにコードを付け加える事ができるとコードを読むのが楽しくなってきます♪

 

編集して使ってみる

GitHub内で編集が出来ます。それぞれのカテゴリ毎にタブが分かれていますので、編集したいタブをクリックして ソースを書き換えてみましょう。

編集したソースを試しにどうなるか見てみたい時には、プレビュー画面で確認します。

 

（ ▶️ のボタンを押した時の画面）

 

ダウンロードする

最初は、ひとまず GitHubの方で編集して、プレビュー画面で確認してから保存。それからダウンロードします。（もちろん無理にパソコンに保存する必要はありません。）

 

GitHubの使い方は１日２日で理解できないかもしれないので、１週間くらいかけてもいいと思います。

ダウンロードしたフォルダは、最初圧縮されていますので、解凍してフォルダの内容を確認します。

解凍するためソフトが必要な方は、無料で使える Lhaplusやkekaを導入することをお勧めします。

いずれもサイトから無料でインストールができます。

LhaplusはWindowsユーザー、kekaはMacユーザー用のソフトです。(すでにある場合はインストールは不要）

 

それでは、長くなってしまったので、次回にどうやってそれを既存Webページに追加するのかをご紹介します♪