最近、色々な端末に対して「Flashじゃない、動きのついたの」という依頼をいただくことがふえました。

でも、表現力でもブラウザ対応にしてもFlashには劣ります。
Flash使える場合は、Flash使った方がよいと思いますよ。

ということで、いまさらながら…になりますが、canvasとSVGを使ってちょっとだけ動きを試してみたいと思います。
　
こんなのをつくります→「canvas」「SVG」
　
あ、仕事ではまだ使っていません。
　
■canvas？SVG？

HTML5のコンテンツ・モデルでは、「canvas」「SVG」ともに「embedded contents」に含まれます。
HTMLに他のリソースを組み込んだりして表現するコンテンツ、ということですね。
続きを読む

今回は、HTML5, CSS3 を使ってウェブサイトをつくる際の助けになる JavaScript ライブラリ Modernizr をご紹介します。

HTML5, CSS3 では便利な機能が多数追加されましたが、ブラウザによって対応状況はまちまちです。

Modernizr を使うとブラウザの HTML5, CSS3 対応状況を簡単に調べることができるので、個々の状況にあわせたコードを比較的容易に書けるようになります。

バージョンの古い Internet Explorer 等に対応する際、コンディショナルコメントやいわゆる CSS セレクターハックを使用することがありますが、それらと同様のものと考えると分かりやすいかもしれません。

それではごくごく簡単ではありますが、以下に基本的な使い方をご紹介します。（バージョン等は記事執筆時点のものです。変更になっている場合があります。）

続きを読む

キャプションつきのギャラリーを作りたいときが多々あります。

・指定した時間で、自動的に画像やテキストが切り替わる
・サムネイルをクリックしても切り替わる
・切り替わるエフェクトはクロスフェード

JQueryを使用して、この全てを満たすJavascriptを作ってみました。

イメージとしては以下のようなものです。

続きを読む

以下のようなデザインの商品紹介ページを運営していましたが、
頻繁に商品の差し替え・追加・削除があるため、
そのたびに連番画像の並べ替えをするのがとても大変でした。

そこで、jQuery を使用して
左上から順番に、連番画像を自動的に表示させるようにしてみました。


※商品はダミーです。（クリックで拡大します。）

　 続きを読む

更新頻度の高いバナーの置き換えや共通のナビゲーションなどの表示に
外部ファイルから JavaScript で書き出す方法を用いることがありますが、
「一度に複数の文言を置き換えたい。かつ、1ファイルで管理したい。」
という事例がありましたので、作業方法をまとめました。

　
　
続きを読む