週刊Webテク通信

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

ネットで見かけた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アイコンにロールオーバーして対応バージョンを表示している)

おすすめ記事

記事・ニュース一覧