FlashライクなWebアニメーションを実現するJavaScriptライブラリー「GreenSock」。イラストからテキストまで、思い通りのアニメーションを作成できる便利なプラグインを紹介します。 GreenSockのプラグインをいくつか紹介します。 紹介するプラグイン ベジェ曲線パスに沿ってプロパティをアニメーションする「BezierPlugin」 画面上で要素をドラッグできるGSAPの「Dra…

Loading...

Webフォントの普及やフラットデザインの浸透によって、タイポグラフィにこだわるサイトが増えています。でも、フォールバックを適当に済ませていませんか? CSSのfont-size-adjustプロパティは、font-sizeを小文字の高さで指定するプロパティです。font-siza-adjustプロパティを活用することで、Webサイトの文字を読みやすく改善できます。 本記事ではfont-size-a…

Loading...

CSSで円錐型グラデーションを描画できるconic-gradient関数の実装が始まっています。線形・円形グラデーションとの違い、使いどころをまとめました。 グラデーションを使ったWebサイトがますます増えてきています。ナビゲーションコンポーネントや、ボタンなどの要素にグラデーションを使ったり、画像とグラデーションを併用したりして素敵な効果を演出しているWebサイトもあります。 CSSの基本的な線…

Loading...

Webサイトを楽しく見せることができるフレームアニメーション。SVG画像とCSS、JavaScriptで滑らかな動きを実現する方法、注意点を解説します。 デザイナーから、「今回のプロジェクトではフレームアニメーションを使いたいんだ。きれいに動くように実装してほしい」と言われたらどうしますか? フロントエンド開発者には、デスクトップとモバイルを問わず、すべてのブラウザーで滑らかに動き、ハイパフォーマ…

Loading...

勉強会で発表するちょっとしたスライドを用意するのに、慣れないパワポを使うのは面倒くさい。そこで、HTMLでかっこいいプレゼンテーションをつくるWebSlidesの出番です。 プレゼンテーションは聴衆に情報を伝える最適な方法です。短く簡潔に、コンパクトで噛み砕いた言い方をすることで、聴衆を引き込み、理解させることができます。表、グラフ、図形、イラスト、画像、動画、効果音、地図、リストなど、プレゼンテ…

Loading...

フォーム要素の見た目が異なるのは置換要素だから? HTMLコーダーでも意外と誤解しがちな置換要素の定義を深堀してみました。 HTML要素の中には、iframes、アプレット、埋め込みオブジェクト、フォームといった、フロントエンド開発者を悩ませる要素があります。ブラウザーやOSによって表示結果が異なるので、完全な調整が難しいのです。 jQureryUIからBootstrapまで、さまざまなライブラリ…

Loading...

CSSの初学者が最初につまづくのが「継承」ではないでしょうか。無駄なコードや無効なコードを書かないように、CSSの継承をしっかり理解しましょう。 両親の背が高ければ子どもも背が高くなるという具合に、「継承」は現実の世界でも見られます。CSSも同じことが言えます。 包含ブロックに緑色を指定すれば、色が上書きされない限り内側のブロックもすべて緑色になります。特定のプロパティ値が親要素から子要素にそのま…

Loading...

Web制作ですっかり定番となったメディアクエリを使ったレスポンシブ Webデザイン。JavaScriptで実装している機能をメディアクエリと連携させるためのちょっとしたテクニックを紹介します。 テーブルタグがCSSに変わり、レスポンシブデザインは心躍るコンセプトの1つです。レスポンシブデザインはメディアクエリで閲覧中の機器の画面幅、高さ、向き、解像度、アスペクト比、色深度などを把握し、応じたスタイ…

Loading...

フロントエンドとバックエンドを分離する「ヘッドレスCMS」が話題となっています。Elemenoを例に、ヘッドレスCMSを使ったWebサイトの開発方法を説明します。 「ヘッドレスCMS」は比較的新しいタイプのツールです。特徴や、利用方法を解説します。 従来のCMSは、コンテンツを作って管理するバックエンドと、コンテンツを表示するフロントエンド、2つのコンポーネントがあります。フロントエンドは、昔から…

Loading...

複数の画像を切り替えて表示するカルーセルパネルといえば、どんなサイトでも使われる定番の表現方法。ちょっと工夫して、CSSとJavaScriptで魅力的な3Dカルーセルを実装する方法を解説します。 Smashing Magazineの記事など、伝統的な2Dカルーセルの使い方についての記事はたくさんあります。「カルーセルを使うべきか」という問いに対して単純にイエスかノーでは答えられないでしょう。答えは…

Loading...