ネットで見かけたWebテク
1.Web Design Trends: Responsive Web Design Templates and Frameworkshttp://www.latestwebsitedesigns.com/2012/01/responsive-web-design-templates-and.html
レスポンシブWebデザインのための、
レスポンシブWebデザインのレイアウトは、
これら海外のものを日本語で使うには、
![図1 レスポンシブWebデザインのためのテンプレートやフレームワーク 図1 レスポンシブWebデザインのためのテンプレートやフレームワーク](/assets/images/design/clip/01/weekly-web-tech/201202/02/thumb/TH800_001.png)
2.30 Mind Blowing Parallax Scrolling Effect Websites | Webdesignersblog - The Best Daily Online Resources for Web and Graphic Designershttp://www.webdesignersblog.net/inspiration/30-mind-blowing-parallax-scrolling-effect-websites/
スクロールすると視差効果が味わえるWebサイトのギャラリーです。スクロールにあわせて面白い効果が楽しめます。
1ページ完結のサイトに、
![図2 視差効果を使ったWebサイトのギャラリー 図2 視差効果を使ったWebサイトのギャラリー](/assets/images/design/clip/01/weekly-web-tech/201202/02/thumb/TH800_002.png)
3.CSS3 breadcrumbs - RedTeamDesignhttp://www.red-team-design.com/css3-breadcrumbs
パンくずリストをCSS3でデザインした例を解説した記事です。
4種類のデザインについて、
![図3 パンくずリストのCSSでのデザイン例 図3 パンくずリストのCSSでのデザイン例](/assets/images/design/clip/01/weekly-web-tech/201202/02/thumb/TH800_003.png)
4.Monday Inspiration #10 Light and Minimalist Websites | WPCrown Magazinehttp://magazine.wpcrown.com/light-and-minimalist-websites/
白ベースでミニマルなWebサイトのギャラリーです。
それほど凝った仕掛けもなくシンプルなサイトが多いですが、
![図4 ミニマルなWebサイトのギャラリー 図4 ミニマルなWebサイトのギャラリー](/assets/images/design/clip/01/weekly-web-tech/201202/02/thumb/TH800_004.png)
5.30 Inspiring Sites with Illustrated Backgrounds ≫ Illustration, Web Design ≫ Design Festivalhttp://designfestival.com/30-sites-with-illustrated-backgrounds/
イラストを背景に使ったWebサイトのギャラリーです。
いろいろなテイストのイラストがありますが、
![図5 イラストが背景のWebサイトのギャラリー 図5 イラストが背景のWebサイトのギャラリー](/assets/images/design/clip/01/weekly-web-tech/201202/02/thumb/TH800_005.png)
そのほか、
- Roundup Of 26 Truly Helpful HTML 5 Tutorials | Lava360
HTML5のチュートリアルが数多く紹介されています - Bulletproof CSS3 Dropdown Navigation Menu
CSS3でドロップダウンメニューを作るチュートリアルです
先週の気になるWebサービス
12 Websites Turn Yourself into a Cartoon - Design Treasure | Design Treasurehttp://www.designtreasure.com/2012/01/12-websites-turn-yourself-into-a-cartoon/
今回は、
TwitterやFacebookのアイコンに似顔絵イラストを使いたいという人にも役立つかもしれません。できあがる絵のテイストが日本人向きじゃないものばかりですが…。
写真からマンガのような絵に変換するのは、
![図6 写真をイラスト風に変換するサービスと似顔絵作成サービスのまとめ 図6 写真をイラスト風に変換するサービスと似顔絵作成サービスのまとめ](/assets/images/design/clip/01/weekly-web-tech/201202/02/thumb/TH800_006.png)