週刊Webテク通信

2010年3月第4週号 1位は,マークアップ効率化 - zen-codingでコーディングを倍速に,気になるネタは,ネットでラジオが聴ける「radiko」がスタート

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

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

1. マークアップ効率化 - zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog)http://techblog.yahoo.co.jp/cat207/web_1/_zencoding/

最近話題となっているzen-codingの入門記事です。

zen-codingは,HTMLとCSSを高速にコーディングするためのエディタ用プラグインです。昔からあるもののようですが,最近日本のブログやツイッターで盛り上がってきています。多くのエディタやDreamweaverにも対応しているのですが,日本でメジャーなエディタにはあまり対応していないようですね。

簡単な記述でタグを展開できるところも便利なのですが,すでに記述してあるテキストを囲むタグを作れるところがわたしとしては気に入っています。たとえば複数行のテキストに,一発で<ul><li>タグをプラスしてリストにすることが可能です。

わたしはMacのEspressoというエディタでzen-codingを使っています。zen-codingを知ってからは,これが使えればエディタは何でもいいやと思うようになってしまいました。

図1 zen-codingを使ってのマークアップ効率化入門

図1 zen-codingを使ってのマークアップ効率化入門

2. 15 CSS3 Navigation and Menu Tutorials and Techniques - Speckyboy Design Magazinehttp://speckyboy.com/2010/03/15/15-css3-navigation-and-menu-tutorials-and-techniques/

CSS3を利用してCSSだけで実現したメニューやタブ,アコーディオンなどを紹介しています。

図2 CSS3によるナビゲーションやメニューいろいろ

図2 CSS3によるナビゲーションやメニューいろいろ

3. 40 Powerful CSS Tools And Generators To Automate Your Workflow | Graphic and Web Design Bloghttp://www.1stwebdesigner.com/resources/powerful-css-tools-generators-automate-workflow/

CSS関連のツールとジェネレーターが多数紹介されています。

CSSファイルの最適化,段組レイアウトの作成,メニュー/フォーム/ボタンの作成などに役立つツールが満載です。

図3 CSS関連の作業を効率化できるツールとジェネレーター

図3 CSS関連の作業を効率化できるツールとジェネレーター

4. CSS Speech Bubble ・ David DeSandrohttp://desandro.com/resources/css-speech-bubble-icon/

ブログ記事のコメントへのリンクに使えそうな,フキダシを作るためのCSSとHTMLが提供されています。

紹介されているいくつかのパターンから使いたいものを選んでコピーすれば,簡単にフキダシの図形を含んだリンクを作成できます。

図4 フキダシ作成のCSSフレームワーク

図4 フキダシ作成のCSSフレームワーク

5. 40 Excellent Minimalist Web-Designs From Which To Draw Inspiration | Spyre Studioshttp://spyrestudios.com/40-amazing-minimalist-website-designs-for-your-inspiration/

ミニマルなWebデザインのショーケースです。

アインシュタインの言葉

“Everything should be as simple as it is, but not simpler.⁠
⁠ネットで調べるといろんな訳が見つかるのですが,⁠すべての物事は,それ以上できないくらい単純にするべきだ」といった意味だと思います)

を引き合いに出して,ミニマリズムを狙ったWebデザインもその通りだと言っています。

図5 シンプルですばらしいWebデザインのショーケース

図5 シンプルですばらしいWebデザインのショーケース

そのほか先週の記事から,興味深い記事を3つ紹介します。

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

CSS3 Generatorhttp://css3generator.com/

前回紹介したCSS3 Please! The Cross-Browser CSS3 Rule Generatorと同様の,画面で確認しながらクロスブラウザ対応のCSS3のコードを記述できるジェネレーターです。

対応ブラウザのアイコンが表示され,ロールオーバーで対応しているバージョンが表示されるところがいいですね。

シンプルでわかりやすいのですが,回転やグラデーションなど対応していないプロパティもあるので,⁠CSS3 Please!」と併用するとよさそうです。

図6 CSS3 GeneratorでBorder Radiusを設定した例

図6 CSS3 GeneratorでBorder Radiusを設定した例

図7 Multiple Columnsを設定した例(Firefoxアイコンにロールオーバーして対応バージョンを表示している)

図7 Multiple Columnsを設定した例(Firefoxアイコンにロールオーバーして対応バージョンを表示している)

今週の気になるWebネタ

ネットでラジオが聴ける「radiko」がスタート:ニュース - CNET Japanhttp://japan.cnet.com/news/media/story/0,2000056023,20410377,00.htm

関東・関西地区の民放のAM/FM/短波ラジオ放送をインターネット経由でパソコンで聴ける「radiko」の試験配信がスタートしました。

ラジオが受信しにくい難聴取環境の人やラジオ受信機を持っていない人にもラジオを聴いてもらおうという試みのようです。

アクセスしてみたけど聴けず,エリア制限があることが分かってがっかりした人も多いようですが,権利関係などで現状しょうがないようです。

ラジオ聞きながら交流 ⁠radiko」関連サービス,個人開発者が続々 - ITmedia Newsという記事にもあるように,関連サービスが続々登場しているようですし,ネット上でかなり話題となってますね。

イラストでは,通常のラジオ放送よりもネットの方が遅延があることをネタにしています。とはいえ単にちょっとの時差があるだけで,放送が途切れたりするわけではありません。テレビを地デジで見るとちょっと遅延があるのと同じで,時報が正確じゃないことを除けばほとんど問題はないはずです。念のための補足でした。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

  • 修正いたしました

    大変失礼いたしました。

    リンク先修正いたしました。
    ご指摘ありがとうございます。

    Commented : #2  gihyojp編集部 (2010/03/26, 14:14)

  • CSS3 Generatorのリンクが間違ってます

    CSS3 Generatorのリンクが
    http://css3please.com/
    になっているでござる。

    直した方が良いのでは。

    それともこの程度の修正出来ないようでは・・・という指導なんでしょうか。わはは。

    Commented : #1  Average (2010/03/26, 11:03)

コメントの記入