分ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2009年5月25日~5月31日の間に見つけた記事のベスト5です。Nettuts+http://net.tutsplus.com/tutorials/design-tutorials/design-and-code-a-slick-website-from-scratch-%E2%80%93-part-i/デザインからコーディングまでのWebページ制作を,ゼロから全部教えてくれるというチュートリアルのシリーズです。パート1はPhotoshopによるデザインまでで,続くパート2で,XHTML/CSSのコーディングが紹介されています。パート2に出てくる,Photoshopの画像をWeb用にパーツ化していく作業も参考になるでしょう。パート1,パート2とも紹介されている素材やコードは,まとめてダウンロードできるようになっています。このエントリーの作者はコーディングにはDreamweaverを使っているそうですが,デザインビューは使わずコードビューを使っているようです。普段はOperaを愛用しているけれど,開発に使うブラウザはFirefoxとのこと。Firebugが使えるからというのが大きいようです。先週は,Photoshopでのデザインをコーディングしていくチュートリアルがいろいろ公開されていました。Photoshop」で作ったデザインからパーツを準備し,XHTML/CSSコーディングしていくチュートリアルです。コードがテキストとしてではなく画像でしか紹介されてないのが残念ですね。Photoshop」で作ったイメージをコーディングしていく内容です。こちらは素材やコードをダウンロードできます。ところで,これら全てのチュートリアルにおいて,jQueryを使ったJavaScriptのコーディングにも触れられています。ライブラリを使ったJavaScriptコーディングは,Webデザイナーには必須のスキルという時代なのかもしれません。Navhttp://www.webdesignerwall.com/trends/30-examples-of-attractive-nav/魅力的なナビゲーションのサイトを多数紹介しています。最近のトレンドともいえる,Flash風の動きをJavaScriptで実現したものが多いですね。それぞれのサイトのナビゲーションについて,ちょっとした解説が載っています。それを読んでからサイトを訪れると,どこが優れたポイントなのかの理解が深まると思います。Design」というのがありました。jQuery限定ですが,様々なナビゲーションメニューのライブラリやチュートリアルへのリンク集です。System」に関連するチュートリアルや作例集です。その他のCSSフレームワークについてもまとめてあります。Magazinehttp://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/CSSでボタンをデザインするためのチュートリアルやテクニックがまとめられています。ラベルはテキストで,背景に画像を配置するというのが基本のパターンですね。あとは文字数やサイズの可変にどう対応するかと,ロールオーバーのときの見せ方がポイントでしょう。CSS3を使えば角丸でドロップシャドウがついたボタンは簡単に作れますが,IEは非対応なんですよね。Noupehttp://www.noupe.com/css/10-intelligent-ways-of-using-form-elements.htmlフォーム要素を使った優れたソリューションの紹介です。投票システム,アップローダー,CAPTHAなどが紹介されています。TextboxList」は使ってみたいと思いました。以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。そのほか先週の記事から,jQueryを使った役に立ちそうなテクニックを紹介します。code自動でアニメーションして切り替わっていくニュースティッカーを作るチュートリアル記事です。jQueryブラウザの横幅を変えてもちょうどいい感じにブロックがリサイズ&整列されるレイアウトを実現できます。コリス簡単軽量なツールチップのスクリプトの紹介です。あなたのTwitter画面を名刺にhttp://yumeka.to/meishitter/「めいしったー」は,TwitterのユーザーIDを入れると,プロフィール情報と最近のつぶやきの入った名刺画像を作成してくれるサービスです。ユーザーアイコンと背景画像もそのユーザーのものが反映されます。IDを入れるだけなので,人の名刺を勝手に作るという楽しみ方もあります。オバマ大統領(BarackObama)とか中川翔子(strawberry2)など有名人の名刺を作ってみるのも面白いかも。標準ではブログなどに貼る用に幅500ピクセルの画像が生成されますが,印刷用に幅1280ピクセルの画像も作ることができます。類似サービスとして,「⁠ついったー名刺ジェネレータ」というサイトもありました。@IThttp://www.atmarkit.co.jp/news/200905/29/bing.htmlマイクロソフトの新検索サービス「Bing」が5月29日(米国時間5月28日)に発表されました。意思決定のための検索エンジンというコンセプトだそうです。日本語の雲,蜘蛛が由来の「Kumo」というコードネームだったのですが,最終的には「Bing」という名前に決まってしまい,日本人としてはちょっと残念ですね。,「⁠g」はほとんど発音しないと思いますが,公式日本語表記は「ビング」です。「⁠ビン」なのか「ビング」なのかあいまいなところも日本人には微妙なところです。it」と動詞として使われるようになるのを目指しているそうで,覚えやすく短く簡単な言葉としてBingが選ばれたようです。,「⁠クモる」というのは日本語ではだいたいネガティブなときに使われる言葉なので,Kumoじゃなくてよかったのかもしれません。検索結果に「ビンゴ!」なものが見つかるということで,BingoからBingなのかしらとわたしは思ったのですが,Bingとはエレベーターが着いたときのベルの音など,到着や結末を表現する擬音語なんだそうです。Wave」の発表があり,すっかりそちらに話題をさらわれてしまったようです。Google」の頭文字なんて言われ方もしているようで,ちょっとクモりがちな船出となってしまったみたいですね。Bing著者プロフィール芦之由(あしのよし)Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。