俺らのWebはジャスティス

あ・美脚ハンター、クロケツ♂、ダーク・イザワ、ぜん☆ちからめしの4人が運営していくWeb技術、デザインの情報ブログです

10分で作れる!初心者でも簡単にできるCSS3アニメーション その1

全世界の皆さん、おはこんばんにちわ。

そして
新年あけましておめでとうございます!


今回はCSSを使ってボタンが回転するアニメーションを作っていきたいと思います!



1.アイコン画像の用意!

まず、
f:id:orewebe:20130117163501p:plain f:id:orewebe:20130117163508p:plain f:id:orewebe:20130117163456p:plain
こんな感じのアイコン画像を用意します。大きさは50px×50pxです。まぁサイズは何でもいいんですけど
あ、でも回転するので細長い画像よりも正方形や円形の方がいいですよ!

2.HTML

次はHTMLをかいていきます。
HTMLは簡単でとってもシンプルです。

<div class="icons_spin">
    <a href="URL" class="twitter" title="twitter">Twitter</a>
    <a href="URL" class="facebook" title="facebook">Facebook</a>
    <a href="URL" class="rss" title="rss">RSS</a>
</div>

こんな感じにdivタグで囲っておくだけでOKです。まだアイコン画像はなくてもいいです。


3.CSS

ここからはCSSでの作業になります。
まず、このようにかきます。

.icons_spin a{
    width:50px;
    height:50px;
    display:inline-block;
    text-indent:-9999em;
    overflow:hidden;
}

.twitter{ background:url('../images/twt.png'); }←画像のある階層を間違えないように!
.facebook{ background:url('../images/fb.png'); }
.rss{ background:url('../images/rss.png'); }

とりあえずここまで!
widthとheightはサイズということは分かると思います。
では、display:inline-block;とはなんぞや?という人もいるかもしれませんので簡単に説明しますと、
display:inline-block;は画像を横並びにする時にしようします。
floatでもできますが、floatだと

IE6ではfloatと同方向のpadding、marginが2倍になってしまったり
高さが異なるボックスがあるとその後のレイアウトが崩れる
と、色々面倒なのでdisplay:inline-block;にしました。

そしてようやくここでアイコン画像の登場ですね!
画像をa要素の背景にします。
回転させる部分は画像本体というよりも、正確にはa要素です。
次にいよいよ回転させるようにしていきます。


4.回転させる!

ようやくここで回転するようにしていきます。
ここではこのようにかいていきます。

.icons_spin a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transition: transform 0.5s ease-out;
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out;
}

transformは文字や画像を拡大・縮小、移動、回転などを指定出来るプロパティです
今回は回転なのでrotate(deg)を使います。
360degとは360度くるっと回転するという意味です。
360degで時計回りに360度回転、

  • 360degで反時計回りに360度回転します。

transition: transform 0.5s ease-out;の部分は
0.5秒までに回転するようになっています。
ease-outはゆっくりなめらかに回転が終わるという意味です。

5.完成ッ!


1 2 3

マウスオーバーすることで時計回りに1回転します!
上手くできましたか?

上記はコピペでも使えます。アイコンなどに是非使ってみてください。

transformを使えば文字や画像を拡大・縮小、移動、回転など色々できて
おもしろいアニメーションが作れますよ!


ではでは

無料なのにデザインが可愛い!バレンタイン素材6サイトまとめ

f:id:orewebe:20130123005442j:plain

画面の前の皆様、おはにちばんは!

もうすぐバレンタインですねー
オンラインショップにもバレンタイン用のチョコが見えてきましたね
全部おいしそうだから困ってしまいます
あれ、私だけ?

ということで、今回の記事はWebサイトやメッセージカードなんかで使える、
無料のかわいいバレンタイン素材を紹介しちゃいます!


いらすとや

f:id:orewebe:20130119000255j:plain

いらすとや

↑トップ画面

f:id:orewebe:20130123001355j:plain
↑素材の載ってるページ

フリーイラスト素材サイト。
個人、法人、商用、非商用問わず無料で利用可能。
ほんわかしたタッチでとてもかわいいイラストばっかです。

【素材例】
f:id:orewebe:20130123002137j:plain
※四つの素材を一つにまとめています。


StartRun

f:id:orewebe:20130119000324j:plain

StartRun

↑トップ画面

f:id:orewebe:20130123002514j:plain

↑素材の載っているページ

フリーイラスト素材サイト。
カードとかに使えそうなイラスト素材がありますね。

【素材例】
f:id:orewebe:20130123002714j:plain


フリーイラスト集【(株)タカミコーポレーション】

f:id:orewebe:20130119000336j:plain

フリーイラスト集【(株)タカミコーポレーション】

↑トップ画面

f:id:orewebe:20130123003124j:plain

↑素材の載っているページ

サイト名通りフリーイラスト素材サイト。
会員登録しなくても使用できますが、登録すると
使える素材が増えるようです。

【素材例】
f:id:orewebe:20130123003249j:plain


Shangri_La

f:id:orewebe:20130119000351j:plain

Shangri_La

↑トップ画面

f:id:orewebe:20130123003447j:plain

↑素材の載っているページ

フリー素材サイト。
全体的にかわいらしい素材がそろってます。

【素材例】
f:id:orewebe:20130123003906j:plain
※三つの素材を一つにしています。


ソザイング

f:id:orewebe:20130119000401j:plain

ソザイング

↑トップ画面

f:id:orewebe:20130123004202j:plain

↑素材の載っているページ

フリー素材サイト。
クリエイターさんが提供しているのでとてもハイクオリティ!
なんと全て「無料」「商用利用可」「ユーザー登録不要」「リンククレジットの記載不要」と太っ腹でござる。
逆に怖いw

【素材例】
f:id:orewebe:20130123012003j:plain
※三つの素材を一つにしています。


足成

f:id:orewebe:20130119000410j:plain

足成

↑トップ画面

f:id:orewebe:20130123012227j:plain

↑素材の載っているページ

フリーの写真素材サイト。
このブログでもかーなーりお世話になってますw

【素材例】
f:id:orewebe:20130123023533j:plain



いかがでしたでしょうか?
一部、かわ……いい?と思うかもしれませんが、
そこはあれです。ノリで。

初心者でも簡単!今から始めるjQueryの基礎 その1

f:id:orewebe:20130115113000j:plain
最近ではWebサイトを作る際、必ずと言っていいほど入っているJQuery


これから更新する「初心者でも簡単!今から始めるjQueryの基礎」全4回

この記事ではもっと表現を増やしたいけど、プログラムはちょっと……。という人に、あれ?以外とjQuerytって簡単かもれしれない?
と思ってもらえるようになればいいなと思って書いたjQuery初心者向けの基礎を学ぶ記事です。

  1. 第1回 jQueryとは何か←今回はこれ。
  1. 第2回 jQueryでタブの切り替え
  1. 第3回 マウスをhoverしたら画像が切り替わる 基礎
  1. 第4回 マウスをhoverしたら画像が切り替わる 応用



まずjQueryとはなんぞや


本来なら、javascriptで長々とDOMでidを取ってきて、処理をして、という初心者にはよく分からない難しい処理。
そんなわけ分からないプログラムとか苦手……といった人にも簡単に短く書くことができるjavascriptのライブラリがjQueryです。


f:id:orewebe:20130115114151p:plain

こんな感じ。




2.読み込んでみる。

まず、jQuery.comのサイトのDownloadから、一番新しいバージョンをDLしてきましょう。
二つあると思うのですが、

http://code.jquery.com/jquery-○.○.○.min.js

こちらのminとついている方でDLしてきた方がいいです。

※minとついていないのは非圧縮なので、圧縮されている方を使ったほうが読み込みが早いからです。





3.読み込み

読み込みは簡単です。
先ほどDLをしてきたものを、任意のフォルダに入れます。
そして、HTML側のheadのエリアに、

<script type="text/javascript" src="任意のフォルダ/jquery-○.○.○.min.js">
</script>

f:id:orewebe:20130116214538p:plain

と記述します。
次に、jqueryを実行するために、JSファイルを一つ作って、そのファイルを上記の後ろ(強調)に記述します。

<script type="text/javascript" src="任意のフォルダ/jquery-○.○.○.min.js">
</script>
<script type="text/javascript" src="任意のフォルダ/自分で作ったJSファイル.js">
</script>

f:id:orewebe:20130116214546p:plain

このような感じ。

※この時、jQueryファイルと実行するためのJSを逆にしてしまうと、実行するためのJSの方があとに読み込まれるので、動かないという現象に陥ります。
本当に。





4.jQueryを実行するための記述。

実行するためのJSファイルに、

$(function(){//行いたい処理});

と記述する事で、JQueryが使えるようになります。

この、$(function(){//行いたい処理});$(document).ready(function(){});
"(document).ready"を短縮したものです。


要するに、HTML側が読み込まれて、準備ができた段階で、"行いたい処理"を実行するよ!
ということです。



5.実際に使ってみよう。

では、どんなものか実際に使ってみましょう。
 

処理:表示されている文字消す

 

材料は、

  • HTMLファイル
  • jQueryファイル
  • 実行用JSファイル

先ほど上記で作ったようなファイルです。

f:id:orewebe:20130116221643p:plain


1.任意のidを付けたdivを作る。

HTML側に、任意のidを付けたdivを作ります。
このdivが表示されているか確認を忘れずに。
下記は例です。

<div id="hoge">
<p>Hello World</p>
</div>

2.要素を取ってくる。

次に、実行用JSファイルの方で、処理をしたいdivの部分のidを取ってきます。
取って来たい要素は、$("要素")でとってこれます。
CSSみたいにidの中の○○といった書き方もできます。
この要素の事をセレクタって言います。

$(function(){

$("#hoge p")

});

3."消す"処理

次に、消すにはhide()というメソッドを使います。
メソッドとは、何かの処理をする部分になります。
今回の場合、hide()は隠すという処理をするものになります。

$(function(){

//$("id="hoge"の中の、pを).消すよ!といった処理になります。
$("#hoge p").hide();

});


これを実行すると、「hellow World」の文字は表示されなくなります。

この一通りの流れが、jQueryの基本になります。使い方になります。

$("要素").メソッド()

このように、基本的にはとってきた$("要素")に対して.~()をしてね!といった処理をする事で、
jQueryを使って色々な処理をする事ができます。





初回の記事はこれでおしまいです。
次回は、jQueryでタブの切り替えをする処理を作ってみたいと思います。


お楽しみに!

フリーソフトGIMPの使い方 写真を某漫画っぽく編集してみた

画面の前の皆様、おはにちばんは~

今回の記事はフリーの画像編集ソフト「GIMP」を使って写真編集をしてみます。

ちなみにGIMPというフリーソフトはPhotoshopなみに多機能なので、
Photoshopなんて高価なソフト買えるかぁぁぁぁ!って人にオススメです(笑)。
持ってないけど興味がある方はDLしてみてはいかがでしょうか?

普通に編集するのはちょっとつまらないので、
某漫画……波紋とかスタンドとかで戦うあれっぽくしてみたいと思います。


なお、今回使用したGIMPはバージョン2.6です。
最新版とは動作などが違う可能性がありますのでご注意ください。

てことで用意した写真はこちら

ででん☆
f:id:orewebe:20121229005023j:plain
さわやかー

写真は「写真素材 足成 フリーフォト、無料写真素材サイト」でお借りしました。

では編集(という名の改造)をしていきませう。


すてっぷいち 芸術的効果を使おう

いきなり変な名前ですが見間違いではないです。
この効果を使って写真を漫画っぽくしてみます。

フィルタ>芸術的効果>漫画を使用します。

f:id:orewebe:20121229010229j:plain

スライダーを動かして値を変えます。
すると

f:id:orewebe:20121229010433j:plain
ちょっと明るい気もしますが、こんな感じになります。

漫画……というか絵っぽくなったでしょうか?
こっちでなくて、色>ポスタリゼーションを使ってみるのもいいかもしれません。


すてっぷに 集中線を描こう

漫画とかでよくあるアレですね。迫力を出したりするときに使うアレ。
某セールスマンみたくドーンって感じの。

GIMPだとかーなーりらっくらくに描けちゃうんですよね。

フィルタ>下塗り>集中線を使用します。
あ、やる前に透明レイヤーを追加して、それに使用してくださいね。

f:id:orewebe:20121229011211j:plain

そうすると、パラメータが出てきます。

f:id:orewebe:20121229011452j:plain

各値の役割については画像に載せた説明の通りです。
尚、画像の値はデフォルトではありませんのであしからず。

パラメータを調整し、OKを押すと

f:id:orewebe:20121229011740j:plain

このように集中線が出来るのですネ~
集中線の色は描画色と同じですので、
赤い集中線が描きたい時は描画色を赤にするといいです。

なお、画像の中央にしか集中線を作ることができないので
注意してくださいな。


すてっぷさん 文字をいれましょう

例の漫画と言ったら擬音ですね。
ということで擬音いれましょましょ。

文字ツールで文字を入力。

入力したら、文字をふち取る作業に入ります。
テキストサイズを変更するパネルからパスを生成をクリック。

そのあと、レイヤーのタブをパスのタブに切り替えます。
この時、描画色は文字のふちの色にしておきましょう。
テキストのパスを右クリックし、パスの境界線を描画を選択します。

f:id:orewebe:20121229013229j:plain

このようになりました。
更に、文字に遠近法ツールを使用して角度を調節すると……

f:id:orewebe:20121229013348j:plain

こうなります。
これで完成です。

某自称男爵の初登場シーンをオマージュしてみました。
彼はサンドウィッチ食ってましたがね……


ちなみにこのブログの最初の記事「カボチャ戦隊パンプキン野郎 ~第1話 激闘! IE6~」に使用されている、
カボチャ達(ミスターパンプキンは抜かす)の登場シーンの画像はこの技術を応用してます。
……あれ、あっちの方がそれっぽかった?

chromeの便利機能を有効的に使ってる?知らない人は、勿体ない!機能紹介

この季節はニーソを履いて寒そうにしているカワイイ子を見ると癒されますね。
ニーソってところが大切です。


みなさんおはこんにちばんは~!

今回はChrome(ちょろめ)のデベロッパーツールについて、ご紹介したいと思います。
Webサイトを作っているときに、ブラウザー確認をしますよね。そんな時に使える便利な機能です。

使い方

サイトを開いている状態で、F12 のキーを押します。
それだけで起動します。
f:id:orewebe:20121209235157p:plain

最初に開くと、この状態なのですが、下の方にあるこのアイコン
f:id:orewebe:20121209235212p:plain


をクリックすると、分離します。分けて使ったほうが便利です。
f:id:orewebe:20121209235215p:plain


左から2番目のアイコンをクリックすると、プログラムの実行ができる画面が出てきます。
f:id:orewebe:20121209235225p:plain


コードヒントがあり、わかりやすくなっています。
f:id:orewebe:20121209235252p:plain


上にあるConsoleアイコンも同じ効果です。
ただ、Consoleのアイコンをクリックすると、一つの画面でコードが打つことができます。
f:id:orewebe:20121209235300p:plain


左から3番目の虫眼鏡のアイコンをクリックすると、そのページ上で選択したい場所がすぐに選ぶことができます。
f:id:orewebe:20121209235320p:plain


また、マウスを乗せいているところのコンテンツのサイズが表示されるので、サイズを確かめたりするときにも便利です。
f:id:orewebe:20121209235333p:plain
また、隣にあるStylesではCSSの追加などをして、直接確認する事もできます。
f:id:orewebe:20121209235337p:plain
Metricsに切り替えれば、位置関係確認もすることができます。
f:id:orewebe:20121216202641j:plain


便利機能

1.Resoureces

このアイコンをクリックすると、そのページに表示されいてる画像や、スクリプト、またローカルストレージの中身やCookiesなどを確認する事ができます。
f:id:orewebe:20121209235345p:plain


2.Console

このアイコンをクリックすると、上記でも説明しましたが、プログラムが実行する事ができる画面が出てきます。
ここで、console.logを見たり、alertをだしてみたりすると、わざわざJS側を書き直したりせずに確認ができるので便利です。
f:id:orewebe:20121209235355p:plain

f:id:orewebe:20121209235402p:plain

3.設定アイコン

また、設定アイコンの所をクリックすると、
f:id:orewebe:20121209235408p:plain


このような画面が出てきます。
f:id:orewebe:20121209235427p:plain


この中の、Overridesというタブをクリックするとこのような画面に切り替わります。
f:id:orewebe:20121209235439p:plain


この中の、UserAgentのプルダウンをクリックすると、いくつものブラウザが選択できるようになっています。
f:id:orewebe:20121209235454p:plain


この中でも、AndroidiPhoneをクリックすると、その画面のサイズに変更されて、確認するのに便利です!
f:id:orewebe:20121209235500p:plain

f:id:orewebe:20121209235508p:plain


ぜひ皆さんつかってみてください!!