週刊Webテク通信

2010年4月第3週号 1位は,少しのコードで実装可能な20のCSS小技集,気になるネタは,ドラマ「素直になれなくて」でツイッターが荒れた?

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

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

1.少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックスhttp://www.webcreatorbox.com/tech/css-tips20/

便利なCSSのTips集です。ブックマークしてあったいろいろな小技を,整理もかねて記事にしたとのことで,目新しいものはありませんが実践的なテクニックが揃っています。

IE対策やCSSハックではないTipsをまとめた記事で,特に「かゆいところに手が届く応用編」のテクニックはぜひ覚えておきたいものばかりです。

末尾に記載されている参照サイトには,この記事には紹介されていないTipsもあってそちらも参考になりそうですね。

図1 使えるCSSの小技集

図1 使えるCSSの小技集

2.Weekly Inspiration: 20 Cool Website Image sliders ? N.8 | Underworld Magazines NYC |http://www.underworldmagazines.com/weekly-inspiration-20-cool-website-image-sliders-%E2%80%93-n-8/

ステキなデザインの画像スライダーを集めたショーケースです。

こういったスライダーを作りたいという人には,jQueryでのスライダー用プラグインが紹介された6 Fresh jQuery Plugin Slideshow You Should Know | denbagus blogが役に立つでしょう。

図2 画像スライダーのデザインショーケース

図2 画像スライダーのデザインショーケース

3.15 Useful CSS3 and HTML5 Templates and Frameworks - Speckyboy Design Magazinehttp://speckyboy.com/2010/04/16/15-useful-css3-and-html3-templates-and-frameworks/

CSS3とHTML5のテンプレートやフレームワークを紹介した記事です。

CSS3とHTML5のチュートリアルと情報源をまとめた70 Fantastic CSS3 and HTML5 Tutorials and Resources | Designer Wall | The Best of Css, Web Design, Tuts & Inspirationという記事も併せてご覧ください。

図3 CSS3とHTML5のテンプレートやフレームワーク

図3 CSS3とHTML5のテンプレートやフレームワーク

4.jQuery.popeye 2.0 | an inline lightbox alternativehttp://dev.herr-schuessler.de/jquery/popeye/

インラインで展開する画像ギャラリーを実現するjQueryプラグインです。

Lightbox系のモーダルウィンドウを開く画像ギャラリーより,ページ内でインラインで見られた方がユーザビリティ的にも優れているという考えのようです。

デザインも考えられていますし,キャプションも入れられるようになっています。

図解で説明したいけど,画像の点数が多いと文字とのバランスが合わないといったケースにもよさそうですね。4コママンガのようなコンテンツに使うのも面白そうです。

図4 インライン画像ギャラリーのスクリプトjQuery.popeye 2.0(キャプチャー画像はデモ画面です)

図4 インライン画像ギャラリーのスクリプトjQuery.popeye 2.0(キャプチャー画像はデモ画面です)

5.jHTML-Ipsum: HTML Ipsum using a jQuery pluginhttp://www.marcofolio.net/webdesign/jhtml-ipsum_html_ipsum_using_a_jquery_plugin.html

HTMLタグのついたダミーのテキストを生成するjQueryプラグインの紹介です。適当な見出し,本文,リストなどが入ったHTMLを生成できるので,プロトタイプの作成時に役立ちそうです。

ダミーのテキストはこのプラグインのソース上にそのまま記述されているだけなので,日本語に変えるのも簡単そうです。自分好みにカスタマイズすれば,かなり便利に使えるんじゃないでしょうか。

HTMLタグ付きダミーテキストを提供しているHTML-Ipsumというサイトがあるのですが(日本語のWebTecNote - [XHTML]コピペ用 日本語ダミーテキスト(タグ付き&タグ無し)というサイトもありました)⁠新規にページを作るたびにダミーのテキストをコピーしてくるのは手間がかかります。また,本番の制作の際にダミー部分を全て削除するのも面倒ということで,このjQueryプラグインが作られたということです。

図5 HTMLタグ付きダミーテキスト生成スクリプトjHTML-Ipsum(キャプチャー画像はデモ画面です)

図5 HTMLタグ付きダミーテキスト生成スクリプトjHTML-Ipsum(キャプチャー画像はデモ画面です)

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

先週の気になるAPI

Welcome to @Anywhere | dev.twitter.comhttp://dev.twitter.com/anywhere

いつもは気になるWebサービスを紹介していますが,今回は気になるAPIとして,Twitterの@Anywhereに関する日本語の記事を紹介させていただきます。

@Anywhereは,自分のサイトにJavaScriptのみでユーザー情報の表示や投稿,ユーザー認証などの機能を実装できるAPIです。

Twitter 新 API のドキュメント「Getting Started with @Anywhere」日本語訳 - WebOS Goodiesでは,@Anywhereのドキュメントを日本語訳してくれています。日本語のドキュメントがあると助かりますね。

Twitterの機能をJSで簡単に導入できる「@Anywhere」の使い方メモ - Rewishは,実際に試してみたサンプルコードや,気をつける点などがまとめられていて,とても参考になります。

また,先週紹介した記事ではありませんがTwitter @Anywhereをブログのコメントシステムにする方法 [C]]には@Anywhereを使ってTwitterをブログのコメントシステムのように使う方法が詳しく説明されていました。

図6 Twitterの新API,@Anywhere

図6 Twitterの新API,@Anywhere

今週の気になるWebネタ

ツイッタードラマと言われている「素直になれなくて」⁠フジテレビ系,木曜よる10時)がスタートしました。放送が始まってからは,このドラマに関する感想やツッコミなどがツイッター上で多いに盛り上がったようです。

ツイッターで知り合った男女の群像劇なのですが,期待したほどツイッターは登場せず,なおかつ扱われ方が微妙で不満を覚えたツイッターユーザーも多いみたいですね。

勝手につぶやいてる分にはいいと思うのですが,このドラマの脚本家に対して個人攻撃をするようなツイートをする人もいて,ツイッターとしては珍しく「荒れた」⁠炎上」と伝えているネットメディアもありました。

ドラマ内でのツイッターが出会い系のように描かれている(と受け取った人もいる)こと,脚本家が自身のツイッターでツイッターに詳しいことを鼻にかける人を挑発する(とも取れる)ような発言をしたことなどが原因のようです。

この騒動が一般の人にも広まると,ツイッターもやっぱり荒れたり炎上したりするんだと怖いイメージを持たれてしまいそうなのが心配です。

自分のタイムラインが荒れてくればリムーブしたりブロックすればいいわけなので,ツイッターは荒れないとも言えますが…。

「素直になれなくて」を見てツイッターを始める人にも,ツイッターのゆるい平和な空間を楽しんでもらえることを願いたいです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入