Win&Co

Category: 上級者

CSS3＆jQueryを使ったパララックススライダー

本日はシンプルなパララックス対応のコンテンツスライダーをご紹介したいと思います。CSSアニメーションを使ってスライダー内の個々の要素をアニメーション化させます。それからスライダーの背景もアニメーション化させることによりパララックス効果を実現させます。

詳細を読む »
April 12, 2012 2 Comments

jQueryを使ったパララックススライダー

今回のチュートリアルでは動きのある画像スライダーをご紹介したいと思います。メインの選択画像をスライドさせる時に、立体感を出す為複数の背景レイヤーにパララックス（視差）の原理を使用しています。こうすることにより、画像が切り替わる時に素晴らしい奥行き感を実現することが出来ます。

詳細を読む »
April 11, 2012 1 Comment

CSS3とHTML５をフルに活用したコンタクトフォーム

今回のチュートリアルでは画像を使用せず、HTML5とCSS3だけでコンタクトフォームを作成する方法をご紹介していきたいと思います。その前に少々免責事項ですが、HTML5とCSS3はまだドラフト状態ですので、このチュートリアルの目的はあくまで「HTML5やCSS3を使うとこういうことが出来ますよ。」と一例をお見せすることに過ぎません。古いブラウザとの互換性の問題もありますし、もし本番でこの方法を使用する場合はご自身の責任でお願い致します。

詳細を読む »
March 30, 2012 2 Comments

AJAX 入門講座

AJAXというメソッドが世に出てからしばらく経ちますが、一般のウェブサイトなどで活用されたわけでもなかったが、ここ最近になってWebアプリケーションの中でUI/UXの重要性がたかまったことで、注目をより集め始めました。AJAX自体はプログラミング言語ではなく、Webページに対してJavaScriptを活用する新しい方法と呼べると思います。この新しいテクノロジーはWebページをより速くしたりユーザーフレンドリーにしたりと、機能全般的により効率のよいものにしてくれます。

詳細を読む »
March 14, 2012 No Comments
CSS
yuki

LESS CSSを徹底解説

私はフロントエンドディベロッパーとしての仕事を、いかに簡単にそして効率よく行うか常々考えてきました。けれど最も身近な存在であるCSSに改めて注目し始めたのは、ほんのここ最近のことです。フロントエンド開発を楽にするためには、まずグリッドシステムとobject-oriented

詳細を読む »
February 27, 2012 No Comments
CSS
yuki

CSS3 イメージスライドパネルショー

今回はCSSのみを使用して、かなりイイ感じのスライディング・イメージ・パネルの作成方法をご紹介したいと思います。これはパネルに背景画像をセットして、ラベルをクリックすればアニメーション化されるというものです。ラベルにはラジオボタンを使用し、ターゲットはそれそれのパネル部分とし間接セレクタ（general

詳細を読む »
February 22, 2012 No Comments

イケテルオリジナルマウスオーバーCSS3アニメーション

CSS3の力は尋常では無く、本当にすごいことばかりです。今回のチュートリアルではそのCSS3の巨大な力を、非常にクリエイティブな方法で「いい意味で」悪用する方法をご紹介したいと思います。早速ですが、今回は何種類かのサムネイル・ホバー効果をCSS3のトランジッションを使って表現していきます。色んなスタイルを使用し、それぞれのサンプルでサムネイルをホバーすると、予期せぬ効果が現れるようなものを作っていきます。

詳細を読む »
January 30, 2012 3 Comments

ウェブ開発者に必要不可欠な３５の技術

世の中では様々な用途の為にWebアプリケーションが用いられており、Webディベロッパーにとってはウハウハな今日この頃だと思います。Web開発業界にもモバイルデザインから携帯アプリに至るまで、フロントエンド開発やosCommerceやWordPressなどと言った特定のプラットホーム開発者など、幾つもののニッチ市場が存在します。

詳細を読む »
January 10, 2012 No Comments

WebKitを使ってスクロールバーをカスタマイズ

一昔前、IE（5.5）などでは非標準のCSSを使って、スクロールバーをカスタマイズすることが可能でした。例えばscrollbar-base-colorをスクロールする要素（<body>など）に使って、結構過激なことなんかも出来ました。けれどIEはそれを廃止してしまいました。

詳細を読む »
September 6, 2011 3 Comments

PNGファイルでカラーアニメーション

あまり普段やってみようと思うことはないかもしれませんが、<img>タグにも背景色を付けることは可能です。例えば画像周囲に2本の枠線を引きたかったとします。1本目の枠線は通常通りborderを使用し、もう1本の方はbackground-colorとpaddingを使ってあたかも枠線かのように見せることが出来ます。もしくは背景色を真っ赤にセットすれば、画像が抜けているところが一目で確認出来ます。

詳細を読む »
August 23, 2011 No Comments

  • カテゴリー

    • 最新ブログ