週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけた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メールを作成するサービス

今週の気になるWebネタ

グーグル,新タブレットの「ネクサス7」を発表―価格は199ドル - WSJ日本版 - jp.WSJ.comhttp://jp.wsj.com/Business-Companies/Technology/node_468520

Googleからタブレット端末「ネクサス7」が発表されました。7インチ,199ドルと,Kindle Fireに真っ向勝負する端末となっているようです。Kindle Fireも新型の登場がウワサされており,7インチタブレットが今ホットなジャンルのようです。

また,ネクサス7と同時にネクサスQという機器も発表されています。これはGoogle版のApple TVのようなもので,クラウド上の音楽や動画を再生するクラウドプレイヤー。黒い球状をしており,まさに「ネクサス球(きゅう)⁠といったところ。

「ネクサス」⁠7(セブン)⁠Q」は,いずれもウルトラマンに関連する言葉ですね。ちなみにウルトラマンネクサスは,ウルトラシリーズとしては異色の暗くシリアスな展開で視聴率も低迷した作品でした。映像が格好良くて結構好きだったんですけどね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入