週刊Webテク通信

2012年7月第1週号1位は、便利で有用なCSS3のチュートリアル記事、気になるネタは、グーグル、新タブレットの「ネクサス7」発表

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2012年6月25日~2012年7月1日の間に見つけた記事のベスト5です。

1. 50 Useful and Instructive CSS3 Tutorials: 2012 Editioncshttp://www.1stwebdesigner.com/tutorials/css3-tutorials-2012/

便利で有用なCSS3のチュートリアル記事をまとめて紹介しています。

  • テキストとタイポグラフィ
  • メニュー、ナビゲーション、スライダー
  • 複雑な仕組みが簡単に作成できるもの
  • Tipsやテクニック

といったジャンルごとに掲載されており、それぞれに簡単な説明が記述されています。

CSS3のチュートリアルのまとめとして、35 Useful CSS3 Tutorials To Boost Your Skills | CollegeGFX - Education 2.0 for designers!という記事もありました。

図1 便利で有用なCSS3のチュートリアルを50個紹介
図1 便利で有用なCSS3のチュートリアルを50個紹介

2. Zen-Coding、0.7のすすめ : Web Design KOJIKA17http://kojika17.com/2012/07/zen-coding-ver07.php

Zen-Codingの各エディタでの対応状況と、使い方を解説しています。

ときどき忘れたころに話題になる気がするZen-Codingですが、完璧に使いこなしている人は意外と少ないのかもしれません。

図2 Zen-Codingの使い方を解説
図2 Zen-Codingの使い方を解説

3. A Showcase of User Interaction in Web Design | Top Design Magazine - Web Design and Digital Contenthttp://www.topdesignmag.com/a-showcase-of-user-interaction-in-web-design/

インタラクティブ性の高いWebサイトのショーケースです。

オリジナリティの高い操作方法ながらも、違和感なくナビゲーションできているサイトばかりで感心します。

図3 インタラクティブ性の高いWebサイトのショーケースで
図3 インタラクティブ性の高いWebサイトのショーケースで

4. 30+ Brilliantly Designed Websites Inspired By Mac | Dzineblog360http://www.dzineblog360.com/2012/06/30-brilliantly-designed-websites-inspired-by-mac/

Mac/AppleにインスパイアされたWebデザインのショーケースです。

当然というか、MacのアプリケーションやiOS用アプリの公式サイトが目立ちますね。

図4 Mac/AppleにインスパイアされたWebサイトいろいろ
図4 Mac/AppleにインスパイアされたWebサイトいろいろ

5. Inspiring Examples for Black n White in Web Design - REPUBLICOF3 | REPUBLICOF3http://www.republicof3.com/examples-of-black-n-white-webdesign/

白黒のWebデザインのショーケースです。すべてをグレースケールでまとめたものもあれば、インターフェイスだけモノクロで写真はカラーというパターンもあります。

図5 白黒のWebデザインのショーケース
図5 白黒のWebデザインのショーケース

そのほか、先週の記事の中から、気になる記事を3つ紹介します。

先週の気になるWebサービス

Premailer: pre-flight for HTML emailhttp://premailer.dialect.ca/

Premailerを使うと、既存のHTMLを元にHTMLメールを作成することができます。

ページのURLを指定するか、HTMLをペーストしてから処理をします。

  • CSSをインラインに変換
  • 相対パスを絶対パスに変換
  • eメールクライアントで使えないCSSプロパティをチェック

といった処理をして、HTMLメール用のコードを生成します。

また、プレインテキスト版も同時に生成してくれます。

このプレインテキストは、元のHTMLから原稿部分を抽出したものですが、リンクの個所には括弧でURLが入るようになっていたり、いい感じにテキスト化してくれます。

サイトリニューアルのときに原稿を拾うときなど、別の用途にも利用できそうです。

図6 HTMLメールを作成するサービス
図6 HTMLメールを作成するサービス

おすすめ記事

記事・ニュース一覧