週刊Webテク通信

2009年8月第1週号 1位は,ドロップダウンメニューのスクリプト/気になるネタは,「IE6はもういらない」——Web企業が撲滅キャンペーン

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

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

1. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Graphicshttp://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/

ドロップダウン(プルダウン)メニューを作る方法を多数紹介しています。CSSだけのもの,CSSとJavaScriptで実装しているものが紹介されており,jQuery,MooTools,PrototypeといったJavaScriptライブラリごとにわけて掲載されています。

ドロップダウンしたエリアからカーソルが外れた場合,すぐに消えずにちょっと待ってくれるかどうかが重要だと個人的に思っているので,そのことを基準に掲載されたメニューを調べてみました。Superfish(mb)MenuMenuMaticはそういった挙動となっているようです。

Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Readyは,ドロップダウンしたエリアのさらに下の階層が,iPodみたいに横スクロールで現れるようになっていて面白いですね。

ドロップダウンの作り方のチュートリアル記事や,オンラインで作成できるジェネレーターも紹介されています。

図1 30種類以上のドロップダウンメニューが紹介されています

図1 30種類以上のドロップダウンメニューが紹介されています

2. 【TB企画】これまでに使った便利なjQueryプラグイン | THE HAM MEDIAhttp://h2ham.seesaa.net/article/124862651.html

使ったことあるjQueryのプラグインを書いてトラックバック(TB)し合いましょうという企画です。このページだけでも十分なくらい,便利なjQueryプラグインがまとめられています。

ただのまとめではなく,「使ったことがある」ということでふるいにかけられているところがいいですね。

ちょっとこの企画の敷居が高いのか,現時点ではあまりトラックバックは集まってないようです。しかし,はてなブックマーク数は多いですし,Webデザイナーからの注目度は高い企画なはずです。

図2 便利なjQueryプラグインがまとめてあります

図2 便利なjQueryプラグインがまとめてあります

3. 5 CSS tricks with lists | Pieter Beulquehttp://www.pieterbeulque.be/blog/css/5-css-tricks-with-lists

リスト要素ul,ol,dlの見た目をCSSで変えるテクニックが紹介されています。

ul,ol,dlの頭の文字がunordered,ordered ,definitionから取っているということを,いまさらながら知りました。「L」はもちろんlistのLですね。

紹介されているテクニックは,以下の5つです。

  1. 番号付きリストの番号に別のスタイルを定義する
  2. リストをロールオーバー効果のあるボタンにする
  3. リストの最後の項目だけ消えていくような見た目にする
  4. 定義リストを価格表のような表示にする
  5. リストを段組にして表示する

図3 リスト要素の見た目を変えるテクニックです

図3 リスト要素の見た目を変えるテクニックです

4. Sticky (Fixed) SideNav Layout with CSShttp://designm.ag/tutorials/sticky-sidenav-layout/

サイドメニューの位置を固定して,コンテンツ部分だけがスクロールするページの作り方のチュートリアルです。

基本的にはCSSの「position: fixed」で簡単に実現できるテクニックですが,IE6が対応していないのであまり使われていないのかもしれません。また,固定した領域の高さがウィンドウの高さより大きいと,画面に入りきらない部分を見ることができないという問題が起きる可能性があります。

IE6対策には,IE限定のスクリプトをCSS中に書くというCSS Expressionを使うのが定番のようで,ここでもその方法が使われていました。また,サイドメニューがウィンドウより高かった場合の対策は,jQueryを用いてJavaScriptで行っています。

図4 サイドメニューの位置を固定したレイアウトの作り方

図4 サイドメニューの位置を固定したレイアウトの作り方

5. 25 Magazine-Style Layouts for Your Design Inspiration | Vandelay Design Bloghttp://vandelaydesign.com/blog/galleries/magazine-layout/

雑誌や新聞風レイアウトのWebサイトのデザインギャラリーです。CMSやブログシステムで構築された,雑誌風レイアウトのサイトが増えているようです。

図5 マガジンスタイルのサイトギャラリー

図5 マガジンスタイルのサイトギャラリー

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

そのほか先週の記事から,いろんなサイトギャラリーを紹介します。

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

twitterで読書記録。読んだ4!http://yonda4.com/

日本でもTwitter関連のWebサービスがいろいろ登場して盛り上がりを見せています。そんな中,発想がすばらしいと思ったのがこの「読んだ4!」です。

Twitterで書名をつぶやくだけで読書の記録が取れるというサービスで,「@yonda4 断る力 面白かった」のように「読んだ4!」のIDあてにtwitter上で書名と感想などのコメントをつぶやくと,自分の読書履歴が「読んだ4!」に蓄積されていきます。

「読んだ4!」のサイト上では,自分の読書履歴を一覧で見たり,同じ本を読んでいるほかのユーザーを探したりできるわけです。著者名や表紙画像などはAmazonからひっぱってきているようですね。Amazonのその書籍へのリンクも張られるわけですが,なんと自分のアフィリエイトIDを設定することもできるんだとか。

「読んだ4!」「よんだよん!」ではなく「よんだよ!」だそうです。

最近登場した日本のTwitter関連のサービスに興味のある方は,「Twitter」公開APIを利用して 関連の日本語サービスが続々と登場:CodeZineもご参考に。

図6 書名をつぶやくだけで読書の記録が取れるサービス

図6 書名をつぶやくだけで読書の記録が取れるサービス

今週の気になるWebネタ

「IE6はもういらない」――Web企業が撲滅キャンペーン - ITmedia Newshttp://www.itmedia.co.jp/news/articles/0908/06/news031.html

Webサイトホスティングサービスの米Weebly社が「IE6 No More」というサイトを立ち上げ,反IE6キャンペーンを行っているようです。

IE6ユーザーがサイトにアクセスしたときに警告メッセージが表示されるHTMLコードを配布しています。このコードが多数の言語用に用意されているのが,本気度がうかがえていいですね。日本語版の警告メッセージでは,「あなたは旧式ブラウザをご利用中です このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。」と表示されます。

日本では,IE6でアクセスすると右上に「アナログ」って表示させるというネタが流行ったこともありましたが,そもそも未だにIE6を使っているユーザーが単に無知なだけで使っているのかどうかは気になるところです。

IE6をなくそうという運動はそれなりに意味があると思いますし,違ったアプローチを取ってみるのも面白いかもしれません。たとえばテーマソングを作るとか。Twitter…じゃなくて「ヒウィッヒヒー」のテーマソングを作った広瀬香美さんが作ってくれるといいなぁ。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入