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

Copyright © 2017, Maria Antonietta Perna All Rights Reserved.

Maria Antonietta Perna

Maria Antonietta Perna

SitePointのHTML/CSSチャンネルの共同編集者・フロントエンドWeb開発者です。CSSでいろんな手法を試すことを楽しんでいます。また、フロントエンドのプログラミング指導方法にも興味を持っています。コーディングやWeb関連の執筆をしていないときは、哲学書や散歩、おいしいものを楽しんでいます。

Loading...

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

Gajendar Singh

Gajendar Singh

新しいことを吸収するのに熱心なWeb開発者。5年にわたりWebサイトの開発を手がけています。おすすめのトピックのチュートリアルも執筆しています。

Loading...

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

Copyright © 2017, Gajendar Singh All Rights Reserved.

Gajendar Singh

Gajendar Singh

新しいことを吸収するのに熱心なWeb開発者。5年にわたりWebサイトの開発を手がけています。おすすめトピックのチュートリアルも執筆しています。

Loading...

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

Copyright © 2017, Michael Romanov All Rights Reserved.

Michael Romanov

Michael Romanov

フロントエンドに熱心で、すべてのデザイナーの友です。詳しくはBuzzwooで。

Loading...

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

Copyright © 2017, Ivaylo Gerchev All Rights Reserved.

Ivaylo Gerchev

Ivaylo Gerchev

独学のWeb開発者兼デザイナーです。HTML、CSS、jQuery、PHP、WordPress、PhotoshopやIllustratorで遊ぶのが大好きで座右の銘は「最小限の努力で最大限の結果を得る」です。

Loading...

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

Copyright © 2017, Adrian Sandu All Rights Reserved.

Adrian Sandu

Adrian Sandu

UI指向のフロントエンド開発者でUXをが好きです。ネットサーフィン以外は、ゲームをしたり、旅行で知らない場所を訪れたり、写真の腕前を磨いたりして過ごします。

Loading...

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

Copyright © 2017, Asha Laxmi All Rights Reserved.

Asha Laxmi

Asha Laxmi

フロントエンドの開発者でありインストラクターです。新しく興味深いJavaScriptライブラリーに取り組むことを楽しんでいます。余暇は旅行に行ったり、大量の本を読んだりして過ごしています。

Loading...

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

Copyright © 2017, Craig Buckler All Rights Reserved.

Craig Buckler

Craig Buckler

イギリス人のWebコンサルタントで、1995年にIE2.0向けにはじめてのWebサイトを製作。それ以降、Webの標準化とアクセシビリティ向上、HTML5の優れた事例を紹介・提唱してきました。SitePointでは1,000以上の記事を書いています。Twitterのアカウントは@craigbuckler

Loading...

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

Copyright © 2017, Giulio Mainardi All Rights Reserved.

 Giulio Mainardi

Giulio Mainardi

フロントエンド開発について勉強中です。

Loading...

floatレイアウトはすでに過去のもの。Webサイトの要素の位置を操作するならFlexboxが定番となりました。出遅れたWeb制作者のために基本を解説します。 テーブルタグが唯一のWebページをレイアウトする手法だった頃を覚えていますか? 表形式のデータを表示するための機能をレイアウトに無理やり使っていたので、タグ名の意味と用途が異なるひどい状態でした。新しい「道具」が必要になり、「正しい」レイア…

Copyright © 2017, Christian Krammer All Rights Reserved.

Christian Krammer

Christian Krammer

10年以上の経験を持つWebデザイナーで、現在は小さな広告代理店を営んでいます。CSS3の詳細ガイドcss3files.comの所有者です。既婚者で、6歳の息子の父親であり、映画愛好家。彼の作品はchriskrammer.comで見られます。

Loading...