Webデザイナーに役立つWebデザインのネタ、Webデザインに関連するテクニックやツールを紹介しています。随時人気の話題だけをピックアップしているので、Webデザイン業界の動向をまとめ読みするのにも最適です。Webデザイナーの日々のWebデザイン業務にどうぞお役立てください～。
![[CSS]Firefox 3.0/3.5のCSSのバグ情報のまとめ | コリス Webデザイン フィード](/thumbnail/409750.png)
Firefox 3.xでおこるCSSのバグ（仕様？）をWeb Designer Depotから紹介します。CSS Bugs and Inconsistencies in Firefox 3.x下記に、その中からい [...] [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。The Definitive Guide To Styling Web Links以下は、各ポイントを意訳した... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[JS]CSS3アニメーションと同等の動作を実現するjQueryのチュートリアル | コリス Webデザイン フィード](/thumbnail/373275.png)
簡単な記述で魅力的なアニメーションを実装できるCSS3アニメーションは、SafariやChromeなどの一部のブラウザでしか動作しませんが、それと同等の動作をjQueryで実装するチュートリアルをMarcofolio.netから紹介します。CSS3 animations and their jQu... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[CSS]CSSで実装した、ものすごいパララックス（視差）効果 | コリス Webデザイン フィード](/thumbnail/372334.png)
今年一番の衝撃をうけました。 CSSだけで実装したパララックス（視差）をRoman Cortesから紹介します。CSS 3D Meninas上記ページにアクセスし、絵画の上をマウスでぐりぐりすると、それに合わせてパララックスが生じます。使用しているのはHTMLとCSSのみで、FlashやJavaS... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
|
ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, lu... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[JS]画像をクロスフェードで変更するスライドショーの超軽量スクリプト -Simplest Slideshow | コリス Webデザイン フィード](/thumbnail/371422.png)
余計な機能は一切なく、シンプルで画像を洗練されたエフェクトで次々に表示するスライドショーのスクリプトをSnook.caから紹介します。Simplest jQuery Slideshow demoこのスクリプトを作成したきっかけは、知人からの依頼だそうです。当サイトでも多数紹介しているjQueryの... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[JS]打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプト | コリス Webデザイン フィード](/thumbnail/358048.png)
YouTubeで実装されているプレイヤーのサイズ変更のように、打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプトをJanko At Warp Speedから紹介します。Create YouTube-li [...] [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
最近のウェブデザインのトレンドを踏襲した、ウェブサイトのレイアウトを作成するPhotoshopのチュートリアルを紹介します。Design a Minimal and Modern Portfolio Layout[...] [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[JS]パネルをスライドするシンプルなカルーセルを実装するスクリプト -Infinite Carousel | コリス Webデザイン フィード](/thumbnail/354728.png)
画像などを配置したパネルをアニメーションでスライドする、シンプルなカルーセルを実装するスクリプトをQuenessから紹介します。Create a Simple Infinite Carousel with jQuery demoスライドする各パネルはリスト要素で実装されており、スライド操作は自動と... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
2010年に向けて押さえておきたいウェブデザインのトレンドの14のポイントをWeb Design Ledgerから紹介します。Web Design Trends for 2010下記は、その意訳です。また、同著者の別エントリーに対応したものもあります。 これはもう使用しない方がいいウェブデザインの... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[CSS]スクリプト無しで、ホバー時にパネルを表示するスタイルシート | コリス Webデザイン フィード](/thumbnail/349801.png)
マウスでホバーした際に、アイコンを拡大表示し、フキダシ状のナビゲーションを表示するスタイルシートをCSSplayから紹介します。Zoom icon with speech bubble menu demoデモではホバーのエリアがしっかりと確保されているため、マウス操作も比較的楽に行えると思います。... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[CSS]1ピクセルのラインを巧みに使用したドロップダウン型ナビゲーション | コリス Webデザイン フィード](/thumbnail/349255.png)
Black and white anywidth centered menu demoドロップダウン型ナビゲーションはラベルのテキスト量に関わらず中央に配置され、カラーはスタイルシートで指定されているので簡単に変更が可能なようになっています。また、ナビゲーションの随所には効果的に1ピクセルのライン... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[CSS]HTML5, CSS3, jQueryを使用して実装する画像ギャラリー | コリス Webデザイン フィード](/thumbnail/346181.png)
HTML5で実装し、CSS3を使用して面白い効果をつけ、jQueryで拡大表示する画像ギャラリーをCSS-Tricksから紹介します。Editable CSS3 Image Gallery demoデモはSafariやChromeで見ると、各サムネイル画像がマウスオーバー時にアニメーションを伴って... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[CSS]コンテンツとサイドバーの高さを同じにするスタイルシート | コリス Webデザイン フィード](/thumbnail/343271.png)
サイドバーがコンテンツの高さと異なる際に、コンテンツと同じ高さのように見せるスタイルシートをwoork upから紹介します。Really simple CSS trick for equal height columns仕組みの概要は、コンテンツの右のボーダーを200pxにし、その上にサイドバーを... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[CSS]ブラウザの幅が小さい時でも最小限のスペースを確保するスタイルシート | コリス Webデザイン フィード](/thumbnail/341854.png)
#wrapper{text-align:center; padding-right:200px;}.padding{width:960px; margin:0px auto;}#content{width:760px; float: right;}仕組みは、外側のdiv要素（#wrapper）で中... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。Most Used and Abused Web Design Trends of All Time以下、その意訳です。 過激な表現も一部あるので、留意く... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[CSS]テキストの可変に対応したシンプルでスタイリッシュなパンくず | コリス Webデザイン フィード](/thumbnail/337744.png)
テキストの量の変化に対応したシンプルでスタイリッシュなパンくずを実装するスタイルシートをAce Infoway Indiaから紹介します。How to Create Nice Scalable CSS Based BreadcrumbsHTMLはシンプルで、下記のようにリスト要素で実装されています... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
元データもダウンロードできる、グラデーションが美しいiPhone用のフリーのアイコンをGlyphishから紹介します。Glyphish – Great icons for great iPhone applicationsダウンロードできるアイコンは110+20種類あり、フォーマットはiPhone... [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
![[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト | コリス Webデザイン フィード](/thumbnail/335735.png)
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。Buttons like Windows 7demoホバー時に表示している画像は下記の画像で、カー [...] [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
光源やライトやシャドウ、グラデーション、1pxのライン、透過などを巧みに使用したウェブレイアウトのPhotoshopのチュートリアルを紹介します。How to Make a Light and Sleek Web L [...] [ 詳細を見る ] [ 関連 ] [ ニコニコ風 ]
|
