週刊Webテク通信

2010年10月第1週号1位は、HTML5+CSS3 入門、気になるネタは、シャープ、電子書籍端末「GALAPAGOS」発表

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

1. HTML5+CSS3 入門 | yoppa orghttp://yoppa.org/taumedia10/1695.html

具体的なサンプルを元に、HTML5の新要素や利便性、CSS3によるレイアウトやデザインを学べるテキストです。多摩美術大学情報芸術コースの、メディアリテラシー(メディア芸術基礎 I・II)の講義ノートなんですね。とてもわかりやすく、まとめられています。

Webを記述する言語の標準の現状から始まり、HTML5とは何なのか、CSS3でどういう視覚効果が実現できるのかが順を追って解説されていて、制作以外の人にもオススメできる資料だと思います。

過去の講義ノートも興味深い内容です。今後追加されるテキストにも期待したいですね。

図1 HTML5とCSS3を学べる講義ノート
図1 HTML5とCSS3を学べる講義ノート

2. 今日からCSS3アニメーションを使えるようになるチュートリアル | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話http://design.kayac.com/topics/2010/09/css3animation-tutorial.php

Webでよく見かける「NEW!」マークに、CSS3でアニメーション効果を付けたサンプルの紹介と解説です。

ブラウザの対応状況によって動作しないケースも考えられるCSS3アニメーションですが、動かなくても意味的に問題ない要素として「NEW!」マークに着目したセンスがいいですね。作例の動きのセンスもステキです。

サンプルは10種類の動きが付けられているのですが、そのうち1つの作り方を詳しく解説しています。

コードは、カヤックが運営する、⁠ブラウザ上でJavaScript, HTML5, CSSを書き、共有するサービス⁠「jsdo.it」で公開されています。

図2 CSS3アニメーションの作例と解説
図2 CSS3アニメーションの作例と解説

3. Dummy Content Filler Resources for Wordpress, Drupal and Joomla Developers :Speckyboy Design Magazinehttp://speckyboy.com/2010/09/26/dummy-content-filler-resources-for-wordpress-drupal-and-joomla-developers/

CMSのデザインを変更したりカスタマイズする場合、何かしらコンテンツを入れておく必要がありますが、適当に入力するのもなかなか面倒な作業です。この記事では、Wordpress、Drupal、JoomlaといったCMSに、ダミーのコンテンツを自動で入力するプラグインやモジュールなどを紹介しています。

また、CMSに依存せずに利用できる、ダミーのテキスト/HTML/画像を生成するジェネレーターも紹介されています。

図3 ダミーコンテンツを作成するツールの紹介
図3 ダミーコンテンツを作成するツールの紹介

4. The Simpler CSS Gridhttp://www.webdesignerwall.com/tutorials/the-simpler-css-grid/

グリッドシステムとして有名で、この連載でも何度も関連情報を取り上げてきた「960 Grid System」ですが、この記事の作者は960 Grid Systemはもう古いということを提唱しているようです。

  • コラム間のスキマが20pxと狭い
  • 左右に無駄なマージンがあり、実質横幅940pixelしかない
  • コーディングの際、クラスを多く必要とする

といったことが960 Grid Systemの主な問題点だとしています。

そこで、960 Grid Systemに変わるものとして、カラム間隔が30pxで全体の幅が978pxの「Simpler 978px Grid」を提案しています。また、960 Grid Systemと同じグリッドでコーディングがよりシンプルな「Simpler 940px Grid」も同時に紹介されていました。

図4 960 Grid Systemに変わるグリッドシステム
図4 960 Grid Systemに変わるグリッドシステム

5. 50 Fresh and Inspiring Dark Web Designs | Inspirationhttp://webdesignledger.com/inspiration/50-fresh-and-inspiring-dark-web-designs

暗い背景や暗い色のコンテンツを使ったWebデザインのギャラリーです。

図5 暗い色のWebデザイン50選
図5 暗い色のWebデザイン50選

そのほか先週の記事から、気になるニュース記事を紹介します。

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

Google 日本語入力 - CGI API デベロッパーガイドhttp://www.google.com/intl/ja/ime/cgiapi.html

Google日本語入力がAPIとして使えるようになりました。Webアプリケーションから使えるそうです。

日本語OSではない端末からもWebアプリケーション上で日本語入力できるということですよね。GmailやGoogleドキュメントが対応すれば便利そうです。OSに依存せずに日本語変換ができるということで、非力なモバイル端末やネット家電での入力時にも役立ちそうです。

「Google 日本語入力 Cloud API」公開、ウェブアプリから利用可能に -クラウド Watchという記事によると、ユーザーインタラクションを伴うJavaScriptライブラリーや、すぐに試せるウェブUIがそのうち公開されるそうです。

図6 Google日本語入力のAPIデベロッパーガイド
図6 Google日本語入力のAPIデベロッパーガイド

おすすめ記事

記事・ニュース一覧