gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2009年7月第2週号 1位は,カラムの高さをそろえる4つの方法/気になるネタは,マイクロソフトのブラウザOS「Gazelle」から探る「Google Chrome OS」

週刊Webテク通信

2009年7月第2週号 1位は,カラムの高さをそろえる4つの方法/気になるネタは,マイクロソフトのブラウザOS「Gazelle」から探る「Google Chrome OS」

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

1. Four Methods to Create Equal Height Columns | Build Internet!http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

横並びのカラムの高さをそろえる方法がまとめられています。

紹介されている方法は以下の4つ。括弧内はデメリットです。

  1. CSSのdisplay:tableを使う方法
    (7以前のIEでは使えない)
  2. JavaScriptを使う方法
    (JavaScriptがオフの環境では使えない)
  3. 背景画像を使う方法
    (可変幅では使えない)
  4. 背景色用のdiv要素で囲む方法
    (余計なdivを使いCSSの記述も複雑)

3の,全体を囲む要素にカラムごとに色分けした背景画像を「repeat-y」で配置するという方法はよく使われていると思います。上下に別画像を追加して,角丸や影付きの矩形で囲まれているようにもできますしね。

なお,ミツエーリンクスが配布しているJavaScriptライブラリ「MJL (MITSUE-LINKS JavaScript Library)」には,要素の高さをそろえる機能が用意されています。親要素に「class="equalize"」を付けるだけと簡単で,わたしはよくこの機能を利用させてもらっています。

図1 カラムの高さをそろえる方法を細かく紹介しています

図1 カラムの高さをそろえる方法を細かく紹介しています

2. Mastering Illustrator Effectshttp://www.webdesignerwall.com/tutorials/mastering-illustrator-effects/

Illustratorの「効果」機能をくわしく紹介しています。基本的な使い方が中心ですが,意外と知らないことや使ったことのない機能が見つかる人も多いと思います。

作例として紹介した図形がすべて入ったaiファイルをダウンロードすることもできます。図形の素材集としても使えるかもしれません。

図2 Illustratorの効果を豊富なサンプルとともに紹介しています

図2 Illustratorの効果を豊富なサンプルとともに紹介しています

3. Using Wireframes to Streamline Your Development Process | Webdesigner Depothttp://www.webdesignerdepot.com/2009/07/using-wireframes-to-streamline-your-development-process/

Webサイト開発のプロセスを効率化するワイヤーフレームの使い方の記事です。ワイヤーフレームを作るときのポイントや使うツール,いろんなパターンのサンプルなどが紹介されています。

よく言われることですが,グレイスケールでワイヤーフレームを作ったほうが,要素の配置を確認するなどの目的に集中できていいとのことです。カラーで作るとクライアントが最終のモックアップだと誤解する恐れもあるというアドバイスには,思い当たる節のある人も多そうですね。

4. 40 Free and Essential Web Design and Development Books from Google : Speckyboy Design Magazinehttp://speckyboy.com/2009/07/06/40-free-and-essential-web-design-and-development-books-from-google/

Googleブックスで読むことができる,WebデザインやWebデベロッパー向け書籍(洋書)の紹介です。便利な時代になったものですね。

今ではWebデザインに関する日本語の書籍も充実していますし,良い洋書はいずれ翻訳版が出るので洋書に手を伸ばす人も少ないかもしれません。とはいえ,無料でパソコン上で読めるとなると,興味のある人も多いんじゃないでしょうか。

試し読みとしてここで読んで,気に入ったら購入するのもいいですよね。

図3 Web関連の洋書が無料で読めます

図3 Web関連の洋書が無料で読めます

5. 株式会社サムライファクトリー | インフォメーション - 【OS・ブラウザー国内シェア調査】~Windows国内シェアは94%。Google Chromeの普及率は1.06%へ~ 2009年6月度発表http://www.samurai-factory.jp/info/2009/2009070796.html

国内最大級のユーザー数というアクセス解析ツール「忍者アクセス解析」を設置しているサイトの解析データから集計した,OS・ブラウザシェアの調査結果です。

この発表を見て,Webデザイナーが気になるのはIE5,6あたりのシェアじゃないでしょうか。

IE5は0.54%ということで,さすがにサポート対象から外してもよさそうな感じです。IE6は25.64%なので,まだまだ対応が必要でしょうね。

OSとブラウザのクロス集計では,Macintosh / IE 5の0.17%というのが,個人的に気になる数字でした。未だにDTPユーザーはMac OS 9で使っている人も多いようで,その辺が反映された数字かなと思う次第です。

以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

そのほか先週の記事から,ちょっと面白い情報を紹介します。

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

10 Minute Mailhttp://www.10minutemail.com/10MinuteMail/

10分間だけ使える使い捨てのメールアドレスを作れるサービスです。

あやしいWebサービスに登録してみるときに使えそうです。もちろんメールアドレスを教えたくない相手と一度だけやりとりするのにも便利でしょう。メール送信テスト用の宛先として使うという利用法もあるかもしれません。

アクセスするといきなりメールアドレスが作られるシンプルさがいいですね。「もう10分延長」というリンクを押すと時間が延長できるようです。

[ウェブサービスレビュー]10分だけの使い捨てメールアドレスが取得できる!「10 Minute Mail」』に詳しいレビューが掲載されています。

図4 シンプルで日本語にも対応しているサービスです

図4 シンプルで日本語にも対応しているサービスです

今週の気になるWebネタ

【レポート】マイクロソフトのブラウザOS「Gazelle」から探る「Google Chrome OS」 (1) マイクロソフトのブラウザOS「Gazelle」とは? | パソコン | マイコミジャーナルhttp://journal.mycom.co.jp/articles/2009/07/09/gazelle/index.html

Google Chrome OSが話題ですが,マイクロソフトも「Gazelle」というブラウザOSのプロジェクトが既に存在していたということが報道されています。

セキュリティ的に安全で,パフォーマンスの低下やクラッシュが起きにくいものになるようです。まだまだ研究段階のプロジェクトのようですが,Google Chrome OSが発表されたことでGazelleへの注目度も高まったみたいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

Ruby Freaks Lounge

Rubyに関わる,執筆者自身の旬なテーマを扱った,リレー形式の連載です。

これでできる! クロスブラウザJavaScript入門

JavaScriptはウェブ制作において避けては通れない重要な言語ですが,JavaScriptに苦手意識を持たれている方は少なくないようです。 その最大の原因がクロスブラウザ対応という課題であり,本連載ではクロスブラウザ対応のテクニックを詳細に解説します。

ビジネスで成功するためのシステム運用管理のポイント

システムの多様化,技術進歩に伴い,ITシステムの運用管理の必要性が年々高まっています。本連載では,システムの運用管理とは何かについて,現場のニーズと具体的な指針を押さえながらを解説します。

2010年版SEO体得講座

本連載では,いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて,最新トレンドからすぐに使えるTipsまでを紹介します。

小型Linuxサーバの最高峰 OpenBlockS 600活用指南

搭載メモリの増加,CPUクロックの向上など,あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から,活用するためのさまざまなノウハウを紹介していきます。

はじめMath! Javaでコンピュータ数学

プログラミング言語入門者向けに,知っていると役立つ数学的トピックスを紹介します。簡単な演習問題と解説で,即活用できる知識を目指します。

教科書には載っていない ネットワークエンジニアの実践技術

ネットワークエンジニア,インフラエンジニアのトラブル対応には,時には「教科書通りにいかない」テクニックが必要となります。資格試験では得られないこうした実践的な技術について,実例を元に紹介します。

Googleケータイ,世に現る

2008年9月,Googleが中心となって開発されている「Android」を採用した携帯電話「T-Mobile G1」が発表されました。本連載ではT-Mobile G1を中心にGoogleケータイに迫ります。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス

最近のコメント