Tags

閉じる

Category

閉じる

Search

Search

閉じる

( ・ω・)⊃ “ css3 “ の検索結果

初めまして!
14年新卒で入社予定の、HTMLファイ部のゴンです!

現在は入社前インターンシップとして、カヤックに通い、
一流のマークアップエンジニアになるべく、研鑽を積んでおります。

今回は、CSSアニメーションやjQueryで使う、イージングの話を書こうと思います。

イージングの話!

イージングとは

イージングは、CSSアニメーションやjQueryで、アニメーションに緩急をつけるために使うプロパティです。
CSSやjQueryでアニメーションを作るとき、ease-inとか、linearとか、設定することがあると思います。

CSSではanimation-timing-functionjQueryではEasingと呼ばれるものです。

いろんな呼び方があるとは思うのですが、この記事ではイージングで統一します。

下はjQueryでアニメーションをするときの例です。

$("div.ball").animate({
    left: "300px";
}, 3000, "easeInQuad");

この"easeInQuad"にあたる部分が、イージングです!
イージングを設定することで、動きに、勢いや波をつけることができます。

イージングを設定して、ボールを左右に動かしたものがこちら!

ball_in_quint.gif

ちなみに、イージングがないとこんな感じです。

ball_linear.gif

イージングを使いこなそう!

イージングは結構、種類が多いです。
例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています!

でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか?
今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、
それぞれのイージングの特徴と、使いどころを紹介します!

続きを読む

仲夏。HTMLファイ部の本多です。

jsdo.itにて、コーディングコンテスト「Web Creator's Contest Q」を開催しています。
QはWebクリエイターのためのコンテスト、HTML5、JavaScript、CSSを駆使して挑戦しましょう!

募集中のテーマはズバリ、

夏を涼しくする表現

暑い夏をひんやり涼しくしてくれる作品をお待ちしています!

本記事では、続々と集まっている投稿作品の一部をご紹介します。
夏の暑さでやる気のでない方、涼しくてアツいHTML5作品をご堪能あれ!

※ Chrome、Safari など、最新のモダンブラウザでご覧ください。

続きを読む

Webフォントでアイコンをつくろう!

ゆとりジェネレーションのほんだです。

最近、Webフォントを使用する仕事に多く携わった関係で、
Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。

ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。
(以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。)

jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS

 

アイコンを作成するだけだと、あまり新鮮さはありませんが、
CSS3時代のいま、これはとっても有効なマークアップ方法となっています。

詳しくは、つづきからどうぞ!

続きを読む

光から移動まで、すべてCSSで作る光るアニメーション

光から移動まで、すべてCSSで作る光るアニメーション

 

ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」

意匠部ME課あらため、HTMLファイ部所属となった比留間です。

今回は、先日リリースした「アーバンリサーチ」のキャンペーンで
「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。

簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。
内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、
というとてもシンプルなゲーム型キャンペーンサイトになっています。
さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。

さて、今回この記事でご紹介したいのは、
このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を
簡単に説明したいと思います。

これを追加したことによって、だいぶ雰囲気が出ました。(アーバンリサーチのゲームページで雰囲気を確認
HTMLファイ部ということで、HTML5関連技術であるCSS3をメインに使用したものとなっています。
jsdo.itにもサンプルコードが載っているので、自分で色々といじってみたい方は以下のサンプルコードをForkしてみてください。

ホタルっぽい雰囲気の演出をCSSだけで作る - jsdo.it - share JavaScript, HTML5 and CSS

ホタル風オブジェクトのベースを作る

ということで、早速作り方に入って行きます。
まず、ホタル風オブジェクトのベースとなるオブジェクトを作ります。
今回のサンプルではdiv要素ひとつに、CSS3で色々とスタイルを当てていきます。

実際に使ったコードは以下。

	.fireflyDot {
        width: 4px;
        height: 4px;
        background-color: rgba(255, 241, 202, 0.8);
        border-radius: 2px;
        box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9);
    }
    

見てもらうとわかりますが、数種類のプロパティだけで実現しているのがわかります。
これを適用したものが↓
firefly.png

ベンダープレフィクス(-webkitとか)とCSS3の細かな説明は省きますが、widthとheightでサイズを、border-radiusで丸みを、そしてbox-shadowでふんわり光る光彩を演出しています。

実際のホタル風オブジェクトの生成などについてはJavaScriptで対応していますが、サイズや光加減などをすべてCSSで実現しているので、サイズや色味を自由に変更できるのが強みです。

ホタル風オブジェクトを動かす

上記のCSSを適用することでホタル風オブジェクトが表現できました。
しかし、ただ配置しただけではただのぼやけた丸ですね。
なので動きを加えてみましょう。
そしてその動きの部分もCSSで対応します。

使用している主なプロパティは以下。

	opacity: 0;
        transition-property: transform, opacity;
        transition-duration: 2.5s;
        transition-timing-function: ease-out;
    

これだけです。
動きの実装で重要なのはtransitionプロパティだけ、ということになります。(移動の際の位置指定はJavaScript側で自動生成しているため)
このtransitionプロパティ、設定しておくとtransition-propertyプロパティで指定したプロパティの値(サンプルではtransform、opacity)に変化があった際、トランジション(遷移)を伴って変化を表現する、というものです。

つまり、サンプルで指定している「transform」と「opacity」の変化を監視させることで、その値が変更された際に、それをアニメーションで表示する、というものになります。
そしてJavaScriptで移動後の位置を動的に決定し、それを指定してあげれば、あとはCSSが勝手にアニメーションをつけてくれる、というわけです。
これだけで、移動と同時に透明度も1→0と変化するためホタルが光ってふんわりと消えながら移動する、というような演出が完成します。

もちろん、こうした処理はCSS3のtransitionやtransformに対応していないと動作しませんが、jQueryを使えばこれと似たような処理を実現することは可能です。(animateメソッド)

iPhone / Android対応

今回の実装のいいところとしては、CSSで表現しているためスマートフォンでも表示可能なこと、とりわけiPhone/iPadではとてもスムーズにアニメーションが実行される点です。

Mobile Safariでは、指定方法によってはCSSによるアニメーションはGPUを利用してレンダリングされるためPCと同じようになめらかに表示される、という特性があります。

もしスマートフォンをお持ちの方は、ぜひキャンペーンサイトをスマートフォンでも見てみてください。
PCとほぼ同じ感じで表示されるのが分かるかと思います。
もちろん、ゲームもプレイできるので、スマートフォンからも楽しめるコンテンツとなっています。

どう考えても無茶な「CSSプログラミング」が話題に

CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。
まずはChromeでこちらを遊んでみてください。

CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS

まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。

続きを読む

jsdo.itでこんなキャンペーンが始まったようです。

初めての方もカンタンに始めることができます。
2種類のお手本コードを用意しました!
お手本コードをあなたらしくアレンジ(=Fork)するだけで、
とっても簡単に○○診断が作れます!
今ならNINTENDO 3DSが当たるキャンペーンを実施中です!

jsdo.itはhtml、CSS、javascriptを書いてその場で実行→シェアできるサービスです。
お手本コードをアレンジするだけなので、変数の基礎や配列の基礎を遊びながら覚えられる企画ですね。

こんな診断が投稿されています

ネタ系

ぼくと契約して魔法少...じゃなくて

あなたに足りない成分

変態系

ME診断

Javascript予約語診断

こんな凝った診断も

jsdo-monster maker

3/23までに診断を作ればNINTENDO 3DSが当たる!

javascriptのことが気になってていたけどキッカケがなかった人にはちょうどいいイベントなのではないでしょうか。

jsdo.itの最新情報はtwitterで!

地獄のミサワがCSS3の勉強に最適と話題に

CSS3に興味はあるけど、きっかけが無いなあと思っている方へ

こんにちわ、jsdo.it担当のふちがみです。

最近jsdo.itで地獄のミサワをイジりながらCSS3やcanvas、javascriptを学ぶ動きが活発なんです。

「それ2年ぐらい前に見たわー」という方も続きからどうぞ!

続きを読む

今年ありがとうを言いたい「html5の本」5+1選

連載企画「今年ありがとうを言いたい○○」

2010年も残り僅かとなりましたが、いかがお過ごしでしょうか。

デザイナーズブログでは今年を振り返って、
それぞれが「ありがとうを言いたいもの」を紹介する連載企画をはじめます。

第一弾は「今年ありがとうと言いたい『html5の本』」です。
それでは続きからどうぞ!

続きを読む

なんかワクワクする!! インフォグラフィックなWebまとめ

 
 

美しい! 格好良い! インフォグラフィックスまとめ記事って最近よく目にしますね。
一目見ただけで引き込まれる作品ばかりで、自分も沢山ストックしてます。

ちなみに、インフォグラフィックスとはデータ・情報・知識をダイアグラム、チャート、グラフ、マップ、ピクトグラムなんかでビジュアライズしたものです。
 
インフォグラフィックスまとめも面白いんですが、検索すると分かるように
膨大な数のインフォグラフィックスがひっかかります。
 
ですので、今回はWeb屋らしくHTML5(XHTML) / CSS3 / JavaScript  あたりで実装されている
インフォグラフィックなWebを集めてみました。まだそれほど数が多くないので...
Flashで作ったインフォグラフィックスも沢山あるんですが、今回はFlashは抜きで。

続きを読む

1要素1クラス、画像を一切使わずCSSで実装するiPhone UI

1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。

最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・)

↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません)

1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS

ちなみにiPhoneで実際に見るとこんな感じに見えます↓
iPhoneで表示したiPhone風UIのキャプチャ

iPhoneで実際に見るには、以下のURLから見れます↓
(jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました)
http://goo.gl/s5fV

1要素1クラスで実現する

今回のサンプル作成でこだわったのは、1要素に1クラスを指定することでiPhone風のUIを実現することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。

a要素をiPhone風ボタンにする

<a href="#" class="btnTypeA">ボタンタイプA</a>

実際に上記を表示すると以下のようにすぐボタンっぽい外観に変わります。↓
灰色のiPhoneボタン風のスタイルになったa要素

iPhone風リストA

<div class="listIPhone listTypeA">
<ul>
<li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
</ul>
<!-- /.listIPhone.listTypeA --></div>

実際に上記を表示すると以下のようにリストスタイルになります。(1要素1クラスを意識していますが、ベースとなるものが同じで、異なる外観の場合は2クラスに分けて複数の見た目を制御できるように実装しています)
iPhone風リストスタイルのキャプチャ
また、「削除ボタン」はややイレギュラーなもののため、いくつかクラスを追加しています。リスト中のa要素は基本、横100%のリンクになってしまいますが、例外的に「noListLink」クラスを追加することで回避しています。
さらに通常時は表示されない要素、ということで、「floatBtn」クラスを付けることで、左は時に表示されるようにしています。

iPhone風リストB

<div class="listIPhone listTypeB">
<ul>
<li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
</ul>
<!-- /.listIPhone.listTypeB --></div>

実際に上記を表示すると以下のようにリストスタイルになります。
iPhone風リスト。リスト右端に丸い矢印マークがあります
もちろん、右端にある青い丸矢印も画像は使っていません。

見出し部分も画像なし

そして今回、ちょっとこだわった部分がタイトル左横にある矢印型のボタンです。
当初はこういう形は画像使わないと無理かなーと思っていたんですが、そこそこ見れるものが作れました。(ただ、やっぱり若干標準のUIと比べると形がいびつです)
ソースもかなりシンプル。

<div class="toolbarBox">
<h1 class="toolbar">CSS3 UIテンプレート</h1>
<nav>
<ul>
<li class="toolBtnTypeA"><a href="#" class="toolBtnArr">TOP</a></li>
<li class="toolBtnTypeB"><a href="#" class="toolBtn">Reload</a></li>
</ul>
</nav>
<!-- /.toolbarBox --></div>

見出し部分のキャプチャ。左横の矢印ボタンもCSSのみで実装

作ってみた感想

意外とがんばればなんとかなるな、というのが感想でした。
標準UI以外にも、これくらいのデザイン性のものであればCSSのみで実現できてしまうので、iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
(もともとは、CSSを使って画像を使わずにデザインを実装する、というのを書こうと思ったのが発端だったので)

ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。

ちなみに今回のサンプルは、個人のブログで公開しているCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。→Photoshopライクな操作で手軽に作れるCSS3ジェネレーター

そしてカヤックでは、こんなiPhone風CSS3が大好きなマークアップエンジニアを募集中です!

CSS3のアニメーションってスゴい!

先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。

ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。
SafariやChromeなどwebkitブラウザで表示してみてください。

※PLAYボタンをクリックすると表示されますよ

見れない人のために動画も撮ってみました。

どうですか?CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。

今回はこのCSSのアニメーションのチュートリアルをご紹介します。

続きを読む

「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」に登壇することになりました。

はじめまして。 このブログで書くのは初めてのME課の比留間(@edo_m18)です。

今回は9/23に開催される「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」で、 自分のセッションのプロローグを書きたいと思います。 セッションのタイトルは「もしも、マークアップエンジニアがひとりでWebサイトをつくるとしたら ~HTML5でつくるWebアプリ~」です。

bnr_seminar.gif

話の内容は、最近なにかと目にする「HTML5」について。
その中でも関連API(JavaScript)を使ったwebアプリについて話したいと思っています。
HTML5になることで、今まではサーバを介してしかできなかったこと、そもそもブラウザ上では実現不可能だったことが実現できるようになります。
これを利用して、マークアップエンジニア(だけ)でも作れる、ちょっとしたwebアプリを紹介しながら、HTML5の可能性について話そうと思います。

続きを読む

iPhone4 がついに届いて興奮気味のgunjiです。
2週間待ちでした!

待ってる間に、iPhone4も対象としたWEBアプリ(ネイティブアプリのweb view を含む)
のコーディングで気をつけることについておさらいしていたところ、

Retinaディスプレイに画像を最適化させるのって意外とめんどいよね!

という現実に打ちのめされたので、まとめてみます。

そもそもRetinaディスプレイってなんでしたっけ?

はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で
画面がとってもキレイに見えるんですよね!
拡大しなくても小さな文字が読めるなんてサイコー!

ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと
不思議な状態になってることがあるのです。

iPhone4で見たらなんか画像がにじんでるように見える・・・?!

iPhone4だとなんか画像がにじむ・・・

こういうイメージです。
そう、2倍の解像度ってことは、今まで等倍で表示していた画像が
2×2=4倍に引き伸ばされて表示されるということなのです。

(ネイティブアプリでの切り替えや詳しい画像の作り方については別のメンバーが
書くって言ってました。お楽しみに!)

では、WEBアプリ(サイト)ではどうすればiPhone4の高解像度を活かして 画像をきれいに表示することができるのでしょうか?
つづきから、詳しく見ていきましょう。

続きを読む

警告とメッセージ