週刊Webテク通信

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

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

ネットで見かけた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デベロッパーガイド

今週の気になるWebネタ

シャープ,電子書籍端末「GALAPAGOS」発表 - ケータイ Watchhttp://k-tai.impress.co.jp/docs/news/20100927_396325.html

かねてから登場が予定されていたシャープの電子書籍端末ですが,なんと名前が「GALAPAGOS(ガラパゴス)⁠とのことで,そのネーミングに話題騒然となっているようです。

「GALAPAGOS」の登場により,いわゆる「ガラパゴスケータイ(ガラケー)⁠という言い方も使われなくなるかもしれませんね。

GALAPAGOSのモバイル端末こそガラケーかもしれませんし,そのうちGALAPAGOS仕様の携帯電話が登場したら,それこそがガラケーでしょう。しかもGALAPAGOSはAndroidを採用しているということで,これまでのガラケーの定義が崩れてしまいますね。

GALAPAGOSのOSはAndroidなのですが,Googleの標準的なアプリやAndroidマーケットは使用できないとのこと。そのへんはしっかり,ガラパゴスのようです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入