ASCII.jp：Googleも採用！CSS3実践テクニック
「CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer（IE）を除く主要なWebブラウザー（Safari/Firefox/ Opera/Google Chrome）は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。 Googleの検索ボタンに注目する 「Google？」と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
Webデザイン劇的ビフォーアフター09年春版 (1/4)
この4月、新しい事業年度のスタートに合わせ、各社のWebサイトが相次いでリニューアルした。ここでは、3月下旬～4月にかけて大規模なリニューアルを実施したWebサイトを編集部でピックアップし、リニューアル前後の画面写真付きで紹介する。最新の企業サイトのトレンドをつかみ、自社サイトのリニューアルの参考にしよう。 マイクロソフトが運営するポータルサイト「MSN」は、2008年4月以来ほぼ1年ぶりにトップページをリニューアル。「毎日使いたくなるMSN」（マイクロソフト）を目指し、使い勝手を高めた。 3カラムのレイアウトは従来のままだが、それぞれのカラムの役割を明確にし、各カラムに入る要素を分類、整理している。具体的には、左カラムにHotmailの受信状況や天気などを確認できる個人ツール類を、中央カラムにニュースなどの最新情報を配置。ディスプレイ広告や企画広告への誘導はすべて右カラムに集約した。 ま
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
ASCII.jp：もう配色には困らない！「Adobe Kuler」
「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな（得意な）色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」（クーラー）だ。Kulerは、さまざまな色の組み合わせ（配色パターン、Kulerでは「テーマ」と呼ぶ）をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上（2009年1月現在）ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ（以降の説明はログインしているものとして進める）。
Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
