週刊Webテク通信

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

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

ネットで見かけた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+

今週の気になるWebネタ

アップルのスティーブ・ジョブズ CEO が辞任,後任はティム・クックhttp://japanese.engadget.com/2011/08/24/steve-jobs/

アップルがスティーブ・ジョブズCEOの辞任を発表しました。日本では政界やお笑い界でも大きなニュースが相次いでいますが,ジョブズの方がビッグニュースだと思う人も多いんじゃないでしょうか。

健康上の不安があることは周知のことだったので,ついにその日が来たかという感じでしょうか。後を引き継いだティム・クックはジョブズが信頼を寄せる相手らしいので,ジョブス信者の人も温かく見守ってくれることでしょう。

ジョブス辞任に関する記事は数多く登場していますが,個人的にはある日曜日に突然かかってきた,スティーブ・ジョブズからの電話ジョブズが葬ったアップル製品5選という記事が印象に残りました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入