週刊Webテク通信

2011年8月第4週号1位は、最近のサイトのコードでよく見かけるテクニック、気になるネタは、アップルのスティーブ・ジョブズ CEO が辞任、後任はティム・クック

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

1. 【HTML】最近のPCサイトに見るテンプレ要素まとめ | istishttp://www.ist-jo.in/archives/826

サイトのソースコードで最近よく見かけるテクニックを5つ紹介しています。

Google Chrome Frameは、管理者権限がなくてもインストールできるようになったそうで、これから本格的に普及していくのかもしれません。

キャッシュ対策に適当なパラメータを付けておくというのは、やったことがありませんでした。

クライアントに修正したページのチェックをお願いするときには、⁠ページが変更されてない場合は、ブラウザのウィンドウ上で右クリックして『最新の情報に更新』してみてください」みたいなことを書いていたのですが、このテクニックを使えばスマートに解決できるケースもありそうです。

スマートフォン対策のコードも紹介されています。

図1 ソースコードでよく見かけるテクニックいろいろ
図1 ソースコードでよく見かけるテクニックいろいろ

2. コピペで出来るCSS3で見出しスタイリング | 3streamer bloghttp://blog.3streamer.net/html5-css3/css3-styling-231/

CSS3を使って見出しを装飾するテクニックを多数紹介しています。

この手のエントリーでは、バリエーションを増やすために現実的にあまり使わないような奇をてらったサンプルが載っているケースも少なくないのですが、この記事で紹介されているのはシンプルかつ実用的なデザインばかりです。

見出しだけでなくボックスに使えそうなスタイルも多いですね。

図2 CSS3で見出しを装飾する各種テクニック
図2 CSS3で見出しを装飾する各種テクニック

3. The Semantic Grid System: Page Layout For Tomorrow - Smashing Magazinehttp://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/

セマンティックなグリッドシステム「The Semantic Grid System」を紹介した記事です。

従来のCSSグリッドシステムの、

  • セマンティックな記述ができない
  • 可変(Fluid)レイアウトに対応してない
  • レスポンシブWebデザインに対応してない

という問題点を解決すべく開発されたグリッドシステムとのことです。

CSSを拡張するLessを使うことにより、柔軟性の高いフレームワークを実現しています。Lessは前回紹介したTwitterのBootstrapにも使われています。

図3 セマンティックなグリッドシステムの紹介
図3 セマンティックなグリッドシステムの紹介

4. ASCII.jp:XHTML1.0とHTML5の違いをスタバのページで紹介|浜 俊太朗のHTML5マークアップ移行ガイドhttp://ascii.jp/elem/000/000/626/626754/

HTML5でのマークアップ方法を、細かく順を追って解説しています。実際のサイトを元に、XHTML 1.0からHTML5への移行を想定しており、具体的なHTMLコードも比較できてとても分かりやすい記事になっています。

日本語でのHTML5関連情報もかなり増えているので、新たにチャレンジするにはいい時期なのかもしれません。

図4 HTML5でのマークアップ方法を解説
図4 HTML5でのマークアップ方法を解説

5. 45 Simple and Attractive Website Designs | Designs Mag (Designs Magazine)http://www.designsmag.com/2011/08/45-simple-and-attractive-website-designs/

シンプルかつ魅力的なWebデザインのギャラリーです。

各画像に広告がオーバーレイしているのがちょっと邪魔ですが、ステキなデザインのサイトが数多く紹介されています。

図5 シンプルかつ魅力的なWebデザインのギャラリー
図5 シンプルかつ魅力的なWebデザインのギャラリー

そのほか、先週の記事の中から、Twitter、Facebook、Google+の機能強化に関する記事を紹介します。

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

Google+https://plus.google.com/

今回は、筆者が始めたということもあり、ベータテスト中の「Google+」について取り上げたいと思います。

Google+は皆さんご存じの通り、GoogleによるFacebook対抗などと言われているソーシャルサービスです。

相手を一方的にフォローできるのでTwitterに近いのかなと感じましたが、実名で1人1アカウントが基本ポリシーのところはFacebook寄りのようです。後発の強みで、TwitterとFacebookのいいとこ取りをしているような印象が感じられます。

Google+ for Web Designers | Jayhan Loves Design & Japanという記事に、WebデザイナーのためのGoogle+活用法が書かれていました。

  • 「Webデザイン」というサークルを作ってWebデザイナーなどをフォローする
  • Sparkに「Web Design」⁠CSS3」などの検索ワードを登録しておきチェックする
  • +1ボタンをブックマーク代わりに使う

といった内容が解説されています。

また、Who’s Going To Win The Deadly Social Media Fight This Time?? Facebook or Google+ | Web Designing Blogという記事では、Google+のこの機能はFacebookではどの機能に相当するかといった比較表が掲載されています。

現在、Google+を始めるには人からの招待が必要ですが、⁠招待リンク」という機能もできたので、ネットを探すと招待リンクを掲載しているサイトが見つかると思います。

デイリーWebテクのFacebookページにもGoogle+の招待リンクを載せていますので、興味のある方は探してみてください。

図6 GoogleによるソーシャルサービスGoogle+
図6 GoogleによるソーシャルサービスGoogle+

おすすめ記事

記事・ニュース一覧