ハウツー | クリエイティブ | マイナビニュース

ヘッドライン

2013年04月30日(火)

【ハウツー】クリエイターのためのWebテク講座 -アコーディオンメニューを作ろう（1）

アコーディオンメニューに挑戦します。今回は、まず簡単なものを作って、アコーディオンメニューの基本的な動きを学習しましょう。

[13:56 4/30]　　Webデザイン

2013年03月21日(木)

【ハウツー】クリエイターのためのWebテク講座 -アナログ時計を作ろう（2）

CSS3のrotateプロパティを使って、要素の角度を調整することができます。これを応用して、アナログ時計を作ってみましょう。

[18:46 3/21]　　Webデザイン

2013年02月26日(火)

【ハウツー】クリエイターのためのWebテク講座 -アナログ時計を作ろう(1)

CSS3のrotateプロパティを使って、要素の角度を調整することができます。これを応用して、アナログ時計を作ってみましょう。

[20:45 2/26]　　Webデザイン

【ハウツー】誰でもカンタンにWordPressサイトを構築できる「BiND for WebLiFE*6」の新機能「BiND for WordPress」を徹底解説

ホームページ制作ソフト「BiND for WebLiFE* 6」から搭載された注目の新機能のひとつ「BiND for WordPress」を紹介する。

[12:00 2/26]　　Webデザイン

2013年02月19日(火)

【ハウツー】CSSを使いながら学べる!Web制作ソフト「BiND6」の新機能「CSS詳細設定機能」

HTMLや知識がなくても、手軽にWeb制作ができるホームページ制作ソフト「BiND for WebLiFE*」の新バージョン「BiND for WebLiFE* 6(以下、BiND6)」から搭載された新機能「CSS詳細設定機能」を紹介する。

[12:11 2/19]　　Webデザイン

2013年01月24日(木)

【ハウツー】クリエイターのためのWebテク講座 -パララックスで横移動

前回のパララックスを応用して、横移動を実装してみましょう。

[18:39 1/24]　　Webデザイン

2012年12月27日(木)

【ハウツー】クリエイターのためのWebテク講座 -パララックス効果を作ってみよう

最近よく見るようになった、奥行感を演出するスクロール。いわゆるパララックスと呼ばれる演出効果。もちろんこれもJavaScriptを使って実装されています。今回はパララックス効果を作ってみたいと思います。

[17:07 12/27]　　Webデザイン

2012年12月10日(月)

【ハウツー】クリエイターのためのWebテク講座 -CSS3を使って、くるっと回転させる(Flip)画面切り替え

今回は、CSS3の3D系のプロパティを使って、くるっと回転させて画面を切り替える、いわゆるFlipというエフェクトを作ってみます。

[14:57 12/10]　　Webデザイン

2012年11月26日(月)

【ハウツー】クリエイターのためのWebテク講座 -スマートフォン対応の画像ビューワー

前回の画像ビューワーをそのままiPhone、iPad、Androidに対応させましょう。

[20:42 11/26]　　Webデザイン

2012年11月15日(木)

【ハウツー】クリエイターのためのWebテク講座 -ドラッグできる画像ビューワーの作り方

前々回のドラッグアンドドロップを応用して、画像ビューワー作りに挑戦しましょう。

[11:00 11/15]　　Webデザイン

2012年10月16日(火)

【ハウツー】クリエイターのためのWebテク講座 -キーボードで物体を動かしてみよう。

前回、ドラッグアンドドロップを実装しましたが、移動系処理つながりということで、キーボードの矢印キーによる移動を実装してみましょう。

[11:26 10/16]　　Webデザイン

2012年10月05日(金)

【ハウツー】クリエイターのためのWebテク講座 -ドラッグアンドドロップを実装しよう。

今回は、画面上の要素をドラッグアンドドロップしてみましょう。

[18:27 10/5]　　Webデザイン

2012年09月24日(月)

【ハウツー】クリエイターのためのWebテク講座 -スライドショーを作ろう。Vol.2

今回は、第10回に引き続き、CSSアニメーションを使って、ちょっとしたスライドショーを作ります。

[12:00 9/24]　　Webデザイン

2012年09月04日(火)

【ハウツー】クリエイターのためのWebテク講座 -スライドショーを作ろう。

今回は、CSSアニメーションを使って、ちょっとしたスライドショーを作ります。

[10:34 9/4]　　Webデザイン

2012年08月21日(火)

【ハウツー】クリエイターのためのWebテク講座 -カスタムイージングの使い方について。

今回は、transitionプロパティの、カスタムイージングの使い方を解説します。

[11:10 8/21]　　Webデザイン

2012年08月07日(火)

【ハウツー】クリエイターのためのWebテク講座 -テキストエフェクトを作ってみよう

今回は、transitionプロパティを使って、実際に案件でも使えそうなテキストエフェクトを作ってみます。

[14:58 8/7]　　Webデザイン

2012年07月17日(火)

【ハウツー】クリエイターのためのWebテク講座 -アニメーションの終了を取得して、ちょっと凝ったUIを作る。

「transitionプロパティ」で設定したアニメーションでは、アニメーションの終了をJavaScriptのイベントとして取得することができます。アニメーションイベントを利用することで、ちょっと複雑なアニメーションを作成することができます。

[12:00 7/17]　　Webデザイン

2012年07月09日(月)

【ハウツー】クリエイターのためのWebテク講座 -煩わしいベンダープリフィックスからの解放。

前回、W3Cで未だ確定していないプロパティを、各ブラウザベンダーが独自に実装したプロパティに対して「ベンダープリフィックス」を記述する必要があると解説しました。しかし、いちいち同じ記述をブラウザ毎に記述するのも面倒ですし、コードの可読性も悪くなります。そこで、ベンダープリフィックスを記述しなくて済むようになる便利なライブラリ、「prefixfree.js」を紹介します。

[12:00 7/9]　　Webデザイン

2012年07月02日(月)

【ハウツー】クリエイターのためのWebテク講座 -CSS3のtransitionプロパティを使ってみよう。

「HTML5」という単語は、みなさんよく耳にすると思います。しかし、HTMLと同時進行で策定さている「CSS3」に関しては、あまりなじみが無い方もいるのではないでしょうか? そこで、今回から、CSS3の「transitionプロパティ」を使って、FlashやAjaxで実装するようなインタラクティブなUIの実装について解説していきたいと思います。

[12:00 7/2]　　Webデザイン

2012年06月25日(月)

【ハウツー】クリエイターのためのWebテク講座 - 動画ファイルの作成について。

前回・前々回と、HTML5のVideoタグを使った作例を紹介しましたが、では肝心のHTML5で利用する、「H.264」「Web M」形式の動画は、どうやって用意すればいいのか？今回はそのあたりを解説しましょう。

[12:00 6/25]　　Webデザイン

2012年06月18日(月)

【ハウツー】クリエイターのためのWebテク講座 - videoタグを使った、プレイリストの作成

前回は、videoタグを使った、簡単なサンプルを紹介しました。今回は、それを応用して、複数の動画を切り替えて再生できるプレイリストを作ってみましょう。

[12:00 6/18]　　Webデザイン

2012年06月11日(月)

【ハウツー】クリエイターのためのWebテク講座 - videoタグを使って、Flash無しでビデオ再生

HTML5で新たに追加されたvideoタグを使うと、Flash無しでブラウザで動画を再生できます。Flashに依存しないということで、Flashに対応していない端末、特にiPhone・iPad・iPod touchなどに対し、ビデオ配信を行う際はvideoタグだけが唯一の方法となります。そこで、今回は、正しいvideoタグの使い方を紹介していきましょう。

[12:00 6/11]　　Webデザイン

2012年06月04日(月)

【ハウツー】クリエイターのためのWebテク講座 - jQueryを使ってフォトライブラリを作ろう

これから主流になっていくであろうHTML5は、JavaScript無しでは語れません。当講座でも、これからHTML5+CSS3の作例を紹介するにあたっては、jQueryを使うシーンが多くなるでしょう。そこで、第一回目となる今回は、jQueryプラグインに頼らず、jQueryだけを使ってフォトライブラリを作って、改めてjQueryの仕組みをおさらいしましょう。

[12:00 6/4]　　Webデザイン