週刊Webテク通信

2011年2月第2週号 1位は,CSSだけで図形を描くサンプルコード集,気になるネタは,Facebookの「ファンページ」が「Facebookページ」に名称変更

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

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

1. The Shapes of CSShttp://css-tricks.com/examples/ShapesOfCSS/

CSSだけで図形を描くサンプルコード集です

以下の図形を,画像を使わずに描いたサンプルとコードが紹介されています。

  • 四角
  • 長方形
  • 楕円
  • 三角形(上向き/下向き/左向き/右向き)
  • 三角形(左上向き/右上向き/左下向き/右下向き)
  • 平行四辺形
  • 台形
  • 星形
  • 五角形
  • 六角形
  • 八角形
  • ハート
  • 無限大マーク

三角形は,ボーダーを使って描くという定番テクニックを使っていました。

円やハートマークなど丸みのある部分は,CSS3の角丸を利用しています。複雑な図形には,:before,:after擬似要素を使い,HTML側に余計なマークアップを使わないようにしています。

図1 CSSだけで描く様々な図形

図1 CSSだけで描く様々な図形

2. Guide to Website Navigation Design Patternshttp://sixrevisions.com/user-interface/navigation-design-patterns/

Webサイトのナビゲーションを,デザインパターンとして分類して紹介した記事です。

  • トップの水平方向ナビゲーションバー
  • 垂直方向ナビゲーションバー/サイドバー
  • タブナビゲーション
  • パンくずナビゲーション
  • タグナビゲーション
  • 検索ナビゲーション
  • フライアウトメニューとドロップダウンメニューナビゲーション
  • ファセット/ガイドナビゲーション
  • フッターナビゲーション

といった種類に分けて解説しています。

ファセット/ガイドナビゲーションとは,さまざまな条件で絞り込んでいくナビゲーションのことです。ECサイトでよくある,値段,サイズ,色,ブランドなどの要素で絞り込んで,商品を探していくような仕組みを指すようですね。

図2 ナビゲーションのデザインパターンの解説

図2 ナビゲーションのデザインパターンの解説

3. Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles - Smashing Magazinehttp://www.smashingmagazine.com/2011/02/07/mastering-photoshop-noise-textures-gradients-and-rounded-rectangles/

ノイズ,テクスチャー,グラデーション,角丸矩形に関する,Photoshopのテクニック紹介です。

角丸矩形の作り方として,以下の4種類の方法が解説されていました。

  1. 角丸長方形ツールを使う
  2. ぼかしを使う
  3. 円を使う
  4. 境界線(ストローク)を使う

通常は,⁠ピクセルにスナップ」にチェックを入れた角丸長方形ツールを使えばいいようですが,ほかの方法も知っておくと役に立ちそうです。

図3 Web制作に役立つPhotoshopテクニック

図3 Web制作に役立つPhotoshopテクニック

4. 10 Best HTML5 Video Player | denbagus bloghttp://www.denbagus.net/html5-video-player

Webサイトにビデオを埋め込むための,HTML5を使ったプレイヤーを紹介しています。

Flashを使わずにビデオを再生させる方法として,注目されている分野です。

モダンブラウザだけでなく,古いバージョンのIE,iOS,Androidまでもサポートしているものが目立ちます。

図4 おすすめHTML5ビデオプレイヤーの紹介

図4 おすすめHTML5ビデオプレイヤーの紹介

5. 20 jquery and css3 Tutorials | UnderWorld Magazineshttp://www.underworldmagazines.com/20-jquery-and-css3-tutorials/

jQueryとCSS3を使ったテクニックを解説した記事のリンク集です。

jQueryとCSS3を組み合わせることにより,従来より簡単に効果的な動きや表現を実現できます。

図5 jQueryとCSS3を使ったテクニックのチュートリアル記事いろいろ

図5 jQueryとCSS3を使ったテクニックのチュートリアル記事いろいろ

そのほか,先週の記事の中から,jQuery関連の記事を3つ紹介します。

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

Useful Web Services, Tools and Resources For Web Designers - Smashing Magazinehttp://www.smashingmagazine.com/2011/02/08/useful-web-services-tools-and-resources-for-web-designers/

今回は,Webデザイナーに役立つWebサービスやツールなどを大量に紹介した記事を取り上げます。

フォント選択,ファイル共有,プレゼンテーション,メールアドレス短縮,複数ブラウザでのテスト,グリッド作成,CSSスプライト作成などに役立つサービスが紹介されています。

図6 WebデザイナーのためのWebサービスやツールの紹介

図6 WebデザイナーのためのWebサービスやツールの紹介

今週の気になるWebネタ

Facebookの「ファンページ」「Facebookページ」に名称変更
機能変更からわかるFacebookのその先(2011年2月現在) http://socialmediaexperience.jp/2650

Facebookの「ファンページ」「Facebookページ」へと用語が変わりました。

英語版では2010年4月くらいから「Facebook Page」だったそうで,遅ればせながらの日本語版への対応のようです。

「ファンページ」というと,ファンクラブみたいだとか,公式ページでもファンが作っているページっぽいなど,いらぬ誤解を与えかねないと思っていました。人に説明しても「ファンページ」という呼び名は,いまひとつピンとこないようです。なので,この用語変更には「いいね!」と言いたいですね。

Facebookといえば,⁠いいね!」ボタンが有名ですが,これは英語版だと「Like!」です。うまく訳したと感心するのですが,個人的にはもうちょっと柔らかい感じの表現がいいかなとも思います。

そして,⁠友達」という用語もそのまますぎるので,mixiの「マイミク」のような呼び名があるといいかもしれません。でも,現実の交友関係をネット上に反映させるのがFacebookなので,⁠友達」でいいんでしょうね。自分のFacebookの「友達」を見てみると,⁠知り合い」くらいの呼び名がちょうどいい気もしますが。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入