ホームページ制作まん: 2009年7月アーカイブ

皆さんこんにちは。

今日もPhotoshopの時間がやってきました。
※このシリーズはCS3でのご説明になっておりますのでご注意ください。


2回目の今日は「雲模様1」フィルタの使い勝手についてです。

「フィルタ」メニュー→「描画」の中にある「雲模様1」です。



Photoshop上で、さりげなく存在しているフィルタ。

あまり使われないことも多いですが、ちょっとした画像やグラフィックを作る時に、意外と活躍するのがこの「雲模様1」なのです。

今日は少しその例を挙げてみます。



例1　デジタル感に



ちょっとデジタルっぽいイメージの作り方。
※すべての例で描画色：黒　背景色：白　です。

①フィルタメニュー「描画」→「雲模様1」

②フィルタメニュー「ピクセレート」→「モザイク」

③フィルタメニュー「表現手法」→「輪郭検出」

④イメージメニュー「色調の補正」→「階調の反転」



例2　ズーム・スピード感に



ズームというか、少しスピードっぽいイメージの作り方。

①フィルタメニュー「描画」→「雲模様1」

②フィルタメニュー「ぼかし」→「ぼかし（放射状）」



例3　液体感に



リキッド・液体っぽい感じのイメージの作り方。

①フィルタメニュー「描画」→「雲模様1」

②フィルタメニュー「アーティスティック」→「ラップ」



はい、どうでしょうか。
ここでは簡単なものをご紹介していますが、雲模様1をベースにしてフィルタを組み合わせると、意外と簡単にいろんなイメージが作れますね。

あとは作る人の腕と工夫しだいで、より良いものができるかと思います。

雲模様1でどこまでやれるか、チャレンジしてみてはいかがでしょうか。

いざという時に役立つ、ちょっとしたPhotoshop講座です。

わりと初級な内容ですので、どっぷりとPhotoshopに浸っている上級の方には物足りないです。


さて、初回の今日は「写真などの画像を角丸に切る」です。



↑例えばこのような画像です。


では順を追って解説いきます。
※ちなみにこの講座はCS3での解説ですのであしからず。


1.元画像を用意
作りたいものの元となる画像をPhotoshopへ。
「レイヤー」メニューから「新規」→「背景からレイヤーへ」でレイヤー化しておきます。




2.新規レイヤーを作成
「レイヤー」メニューから「新規」→「レイヤー」で、角丸用に新規レイヤーを用意して、レイヤーパレットで元画像の下層へ移動させます。




3.角丸を作成
先ほど作成した新規レイヤーを選択しておきます。
次にツールメニューから長方形ツールを長押しして、角丸ツールを起動させます。
そのままドラッグで角丸を描画します。
描画した後は移動ツールを使いカンバス内の適宜の大きさに合わせます。







4.クリッピングマスクを適用
レイヤーパレットで元画像のレイヤーを選択して、「レイヤー」メニューから「クリッピングマスクを作成」を選択します。







以上で完成です。
あとは切り取りツールなどで余分なスペースをカットして、web用に保存しましょう。
背景画像を生かしたい場合などはgifや透過pngなどで保存すればOKです。

要するに透明部分をもった画像なりシェイプなりを下のレイヤーに置いて、上のレイヤーでクリッピングマスクを作成すればOKという訳です。

これを応用すれば、いろんな形に切り抜いた画像が作成できますね。

ここぞというポイントでぜひお使いください。

それは、現段階ではまだ『メイリオ』を捨てるという選択肢。

そして、フォントファミリーの設定を通常『MSPゴ、Osaka、平角ゴ』の設定から
『平角ゴ、Osaka、MSPゴ』に変えるとゆう選択。

・winユーザーの為にMSPゴは外せない。
・MacユーザーがMicrosoft OFFICEをインストールしてる場合、MSPゴが前にあると
　Osakaをころしてしまう。だからMSPゴよりOsakaが前。
・Osakaはデフォが太めの為、太字にしてもわかりずらい。
　なんで、それ対策としての平角ゴ。
・合わせて、MSPゴの半角英数（妙な子ぶり）対策としてVerdanaを設定。

これが現段階での最善策だと。

Fontもユーザーによって好みがあるけど、そろそろMSP卒業したい・・・

使う時、いつもホントはどっちなんだろうと悩む...

意識をして制作を使うようにしてるけど、それが何でかの理由は不明。

何となく、自然と、もしくは意図的に「制作」を使うようにしている。

「制作」と「製作」、これってどう違うんだ？

オンラインの三省堂辞書でさっそくチェック。

制作：(芸術)作品を作ること
製作：物品を作ること

...。
納得がいかない。
もう一回、調べてみる。

制作：芸術作品(絵画、工芸品、展覧会の出品作品など)
製作：実用的で量産できるもの(精密機械、器具など)

...。

お芝居や部隊、映画が芸術作品だと「制作」と表記するのが正しいの？

しかし、違う。
映画のDVDやのジャケ、色々見ると「製作」の文字が多い。
映画は芸術ではなく、娯楽（実用的？）なの？

いや、よく読んだ。
そしたら、続きがあった。

「映画、レコード、演劇、放送、テレビ、ドキュメンタリー番組などは内容により使い分ける」

そして例が一つ。

芸術映画の「制作」
娯楽映画の「製作」

意味不明。

さらに、こう来た。

制作：作品を作る為の実作業
製作：作品の企画、資金調達、出資、制作、宣伝、興行全般

つまり、作品そのものを作る人を「制作」といい、
その作品に関わる(協力者を含む)すべての人を「製作」と表記するの？
「製作」の中に「制作」があるという関係なの？
会社単位になると「制作」よりも「製作」の方が立場が上なの？

うーん...。

いまだに理解度70%ではあるが。

結局の所、使い方は当ってたのだろうか、間違ってたのだろうか...。

いまだ、よくわからず。

最近使う用途があった「PEAR」のインストールについて、忘備録としてご紹介します。

PEAR（ペアと発音）は簡単に説明するとPHPのライブラリ集です。
いろいろな拡張モジュール、アプリケーションなどが登録されていて、ネットワーク経由でそれらを取得・利用することができます。

ここでは最も簡単（だと思われる）go-pearとFTPを利用したインストール方法をご紹介します。
（※ちなにみここでのご説明はロリポップ！でのインストール例です。ご使用のサーバによっては別途設定が必要な場合もあるかと思います。）

大まかにはサーバ内にgo-pearをアップロード、ブラウザからアクセスしてインストール、といった流れです。
あらかじめサーバ内にgo-pear用とインストール用のフォルダを適宜な名前で2つ用意しておくと良いかも知れません。

※例として、
go-pear用→go_pear
インストール用→in_pear


手順1　go-pearを準備、アップロード

http://pear.php.net/go-pear
このURLを開き、表示されたスクリプトをgo-pear.phpと名前を付けてローカルに保存してください。
保存したものをFTPソフトなどでサーバへアップロードします。
ブラウザからアクセスできるディレクトリならOKです。
go-pear用のフォルダをご用意した方はそちらに。
（ここではgo-pearフォルダ）


手順2　go-pear.phpへアクセスしてインストール

先ほどアップしたgo-pear.phpへブラウザからアクセスしてください。
すると以下のような画面になりますので、「Next≫」をクリック。





次に設定の画面へ移りますので、ここで各種設定を行います。



①にはサーバのフルパスと、PEARをインストールするディレクトリを入力します。
「/home/sites/lolipop.jp/users/lolipop.jp-dp********/web/in_pear」（ここではin_pearフォルダ）といった具合に入力。

②にはPHPのパスを入力します。
ロリポップ！の場合は「/usr/local/bin/php」です。

③このチェック欄がある場合はチェック。
go-pearのバージョンによっては無い場合もあります。

以上を入力したら、下にある「Install」ボタンをクリック。
すると英語のログがずら～っと流れ、エラーがなければ、
「Installation Completed !」と表示され、インストールが完了します。




手順3　使いたいパッケージをインストール
イストールが完了したら、そのまま画面を進めると管理ページに入ります。
一度画面を閉じてしまった方はpearをインストールしたディレクトリのindex.phpへアクセスしてください。

パッケージ名が判っている場合は画面下の「Quick-install a package」へ入力し、「Install」をクリックすれば自動でインストールしてくれます。

パッケージ名が正確に判らない場合などは画面左の「Package Search」から検索してください。




以上で終了です。
作業が終わったら、最初にアップしたgo-pear.phpを念のため削除しておくと良いでしょう。
また、管理ページにはパスワードをかけるか、一時的に削除しておきましょう。

先日、脱MSゴシックを試みた。

Windowsユーザーがwebを見る際、自分でブラウザーのフォントを自分で設定しない限り、
ほとんどの確率でMSゴシックである。

しかし、いい加減なんとかならないものかと色々と考えてみた。

Macユーザーは、ちょっと太めのOsakaか平角ゴシックで十分見た目もきれいに出来る。

しかし、winユーザーの場合、OSやブラウザーの種類、バージョンの幅があり過ぎるため、すべての人に、共通のきれいなフォントでwebを見てもらうことが難しい。

そこで白羽の矢を立てたのが『メイリオ』である。

アウトラインがスムースで、見ていてつかれない。

しかもVistaには標準装備と来ている。

これを使う手はない、と思いつつフォントファミリーの編集へ。

しかし、なぜかうまくいかない。

設定はちゃんとしたはず。

しかし、ブラウザー、バージョンともに統一表示が出来ない。

さんざん、考えた挙句、妥協案を発見。

次回へ。

ＷＥＢ制作やＤＴＰなどでＴＸＴのチェックを数人でやる必要がでたときに使えそうなＷＥＢツール。


オンラインで同じＴＸＴを確認しながらリアルタイムで修正がかけられる。
さらに打ち込んだ人が誰かもわかるように色分けもされます。


日本語も通るし中々使い勝手が良いと思います。

EtherPad



簡単なチャットの機能などもついていて、会員登録の必要が無く
すぐに使用することができます。

どこまで実用性があるかわかりませんが
簡単にGIFアニメーションを作れるサイトをご紹介します。

白黒反転させたり横にスクロールしたりぼかしたり。
実際に自分でやろうとするより手軽にできます。↓

LooGix



なぜモデルが全てビーン氏なのか気になります。

エフェクトの種類は豊富なので覚えておいて損はないかと思います。

先日、windowsのサーバーでのweb制作を行った時のトラブルを。

まったくPHPが動作しないし、かといってどこを見てもCGIのパスや
SENDMAILパスはなし。

散々調べた結果、最初から無かったことが判明。

PHPはコンパネ内で、許可するかしないかが選べる。
これってアパッチを起動するかしないかって事？

なおかつ、Fast CGIとして扱う設定。（なんだ、Fast CGIって？）

CGIは自分でCGI-BIN作らないとダメらしい。

CGI-BINってつくれるんだ・・・と初認識。

サーバー関係はさっぱりなんで、かなりの苦戦。

やっぱりここも知っとかないとダメだと痛感。

いつも使い慣れているサービスから、降りるとこんなに勝手が変わってしまう。

色々勉強になりました。

以前から存在は知ってたけど、実際どこまで効力を発揮するんだろうといつも思う。

気になったので、Official Siteにお邪魔し、『資格の目的と構成』を一読してみた。

Web検定は、皆さんの仕事におけるコミュニケーションを円滑にすることにより、効率的な商取引を促すこと目的としています。社団法人 全日本能率連盟登録資格として、5つの認定資格で構成されます。

とある。
その5つの構成がこちら。

・webリテラシー
・webデザイン
・webディレクション
・webプロデュース
・webプログラミング

あるに越したことは、ないと思うけど、実際大きな企業さんとかは選考基準とかに
響くのだろうか？

資格があってポートレートの貧弱な人と、資格がなくてもポートレートが充実してる人。

前者は前者なりに、しっかりと資格という形で勉強してきた過程を示し、後者は後者で実力主義のweb業界に沿っているとも思う。

ちなみにブログパーツにある練習問題では10問中4問しか正解できず、不合格な結果に。

よく制作中に使いたい素材を探しにネット上を徘徊して回ったりします。


でもすぐにイメージに合ったものが見付かることはとても少ないです。
大体いくつかサイトを巡る羽目になってしまいます。

そこで見つけたこのサイト↓
More than 100,000 icons in one place

こちらはフリーアイコンを100,000個以上も集めたサイト。
しかもただのリンク集ではなく、アイコン一つ一つをページ内でダウンロードできます。

しかもアイコンのクオリティも中々高く、そのまま使用できそうなものばかりです。

Windows上でもアイコンとして使ってみてもいいと思う。

全国のOperaユーザーの皆さん、もうOpera10-Beta2は試しましたか？

新たに追加された機能として、

・Opera Turbo
　圧縮技術によってブラウジングのスピードアップ

・新しいタブ機能
　サイズ変更可能なタブとサムネイル表示など

・スピードダイアルのカスタマイズ
　多くのユーザーから要望の多かったカスタマイズ機能

・統合されたweb機能
　webメールサービスと同様の機能を搭載

・リサイズ可能な検索フィールド
　文字通りリサイズ可能なフィールドを搭載

・レンダリングエンジンの高速化
　Presto 2.2によってGmailやFacebookなどのリソースを多用しているページで効果大

などなど多数です。

さらに今回はOpera10の新機能として、「ブラウザにサーバ機能を持たせる」というものが発表されています。

ＯＳの種類を問わず、クライアント同士で相互接続ができるほか、専用アプリケーションによってブラウザの新次元体験が可能らしいです。
どんなものになるのか、早く体験したいですね。

まだまだシェアの伸びが緩やかなブラウザですが、個人的に好きです。
さらなる発展が楽しみですね。

先日、次期Firefoxのバージョンで変更される予定のデザイン案が公開されました。

ツールバーからメニューボタンが無くなり、いくつかのボタンに集約されるようです。

Firefox/3.7 Windows Theme Mockups


見ているとシンプルな構造を目指しているような感じがあります。
確かに選択する範囲が狭ければ迷うことは無いだろうけど
最初は思うように操作でき無そうな・・・

また、Firefox3.7程ではないのですがFirefox4.0のデザイン構想も検討されているようです。

Firefox4.0では、さらにステータスバーやブックマークバーが取り払われ、ロケーションバーと検索バーが統合され、ロケーションバーにプログレスバーが埋め込まれ、タブの位置が最上部に移動されるといった具合です。

Google Chromeに少し似ていると感じるのは私だけでしょうか？

確かにシンプルを目指していくとこうなってしまうのは頷けるような気がします。

たまに気になる有名サイトのロゴで使用されているフォント。

印象に残るロゴを作るには一番重要になってきます。





Pico Alphabet (Modified)





FFF Forward (Modified)





Triplex





Black Rose





FF Nuvo





Agenda Italic





Lubalin Graph





National (Modified)





Neo Sans Medium





Frutiger Black





Avenir Book





Alternate Gothic No. 2





Whitney





Klavika (Modified)





Helvetica Rounded Bold

javascriptファンの皆さんも、そうでない方もこんにちは。

特にIE6の表示に悩まされ制作に行き詰った方は必見です。


IE6ify!

このブックマークレットを使うと、
表示されているページのレイアウトがかのIE6のごとく崩れます。

使い方は簡単です。

下の画像のリンク先をブックマークとして保存。
崩したいページで使えばOK。

↑簡単に楽しみたい方はクリック連打！

または以下のスクリプトをアドレスバーへ貼り付けてみてください。

javascript:(function()
{var%20i=0,r=function(n){return%20Math.floor(Math.random()*n)},
f=document.getElementsByTagName('body')[0].getElementsByTagName('*'),
o=function(e){return%20typeof(e.style)=='object'&&e.tagName!='SCRIPT'},
s=function(){while(!o(e=f[r(f.length)])){}return%20e.style};while(i++<5)
{s().display=r(2)?'block':'inline';s().position=r(2)?'absolute':'relative';
s().margin=r(2)?'0':'1em';s().padding=r(2)?'0':'1em';s().width=r(2)?'':'auto';}})();


連続で使っていく（つまり連射する）と、どんどん崩れていくのですが、
「IE6のアルゴリズムを追及した」という、
妙にリアルなIE6な動きで崩れていくのが皮肉たっぷりで楽しいです。

特に意味はありませんけど、一息入れたい方はぜひどうぞ。

javascriptファンの皆さんこんにちは。

今日はフォーム内のパスワードを確認する小技をご紹介します。

ログインが必要なサイトのほとんどはＩＤとパスワードを入力するためのフォームが設置されています。

このようなフォーム内のパスワードは通常アスタリスクで隠されています。

...が、たまに「なんだっけ？」と確認したい時がありますね。



そんなときは以下のjavascriptをぜひアドレスバーへ貼り付けてみてください。

javascript:(function(){var s,F,j,f,i; s = ""; F = document.forms;
for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i)
{ if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; } }
if (s) alert("Passwords in forms on this page:\n\n" + s);
else alert("There are no passwords in forms on this page.");})();

するとあら不思議。

ダイアログにパスワードが表示されます。

ブックマークレットとして利用すると便利かと思います。

先日、日本らしい色を使う手前上、色々調べていたらこんなのを発見。

≪日本の伝統色　和色大辞典≫

色の名前、かっこ良くないですか？

英語表記や#CCCCCCとかは見慣れてしまってますが、改めて感じで色を表現。

日本人ならではの感性ですよね。

他にも色の事がたくさん載っているので、遊びに行ってください。

http://www.colordic.org/w/

Googleの画像検索にメガピクセルとアスペクトの検索オプションが追加されまし

元々画像サイズの「小・中・大・特大」のプションはあったが、それに加えて
「メガピクセル」単位での検索ができるようになりました。

通常の検索「パソコン」

メガピクセル指定の検索方法「パソコン」の場合


・2メガピクセル以上の「パソコン」画像を検索
http://images.google.co.jp/images?hl=ja&q=%83p%83\%83R%83%93&imgsz=2mp


・4メガピクセル以上の「パソコン」画像を検索
http://images.google.co.jp/images?hl=ja&q=%83p%83\%83R%83%93&imgsz=4mp


・8メガピクセル以上の「パソコン」画像を検索
http://images.google.co.jp/images?hl=ja&q=%83p%83\%83R%83%93&imgsz=8mp


・12メガピクセル以上の「パソコン」画像を検索
http://images.google.co.jp/images?hl=ja&q=%83p%83\%83R%83%93&imgsz=12mp


このように「imgsz」というパラメータを加えてやります。
対応のパラメータ値は2mp, 4mp, 8mp, 12mpとなっています。


2Ｍピクセル　「パソコン」画像検索結果





そしてもう一つ追加されたオプションは、アスペクト比（縦横比）での指定検索です。

・正方形の「パソコン画像を検索
http://images.google.co.jp/images?hl=ja&q=パソコン&btnG=画像検索&imgar=s

・正方形に近い「パソコン」画像を検索
http://images.google.co.jp/images?hl=ja&q=パソコン&btnG=画像検索&imgar=ns

・縦長の「パソコン」画像を検索
http://images.google.co.jp/images?hl=ja&q=パソコン&btnG=画像検索&imgar=t

・横長の「パソコン」画像を検索
http://images.google.co.jp/images?hl=ja&q=パソコン&btnG=画像検索&imgar=w

・パノラマの「パソコン」画像を検索
http://images.google.co.jp/images?hl=ja&q=パソコン&btnG=画像検索&imgar=xw

このように今度は「imgar」というパラメータを付ければ、指定したアスペクト（縦横比）でフィルタリングされ画像が検索されるというわけです。

正方形に近い　「パソコン」画像検索結果

素材探しなどには非常に役に立つオプションだと思います

adobeが面白いコンテンツを始めていました。

その名もadobe TV。

CS4 Web Premiumのセミナーコンテンツが6本公開されています。

特設サイト「Adobe CS4 わたしたちが届けたいコト」がこちら↓

インターフェイスも面白いですが、コンテンツのクオリティ、ソートー高いですね。

動画もズームやスローを使って、とても分かりやすく作られています。

説明に使ったサンプルファイルもダウンロードできてしまいます。

さらにダウンロードした人にはWeb Premiumの15%オフクーポンがもらえてしまう。

adobeさん、ものすごい、大盤振る舞いじゃないですか...

こちらのサイトは複数の写真と音楽をアップするだけで、その音楽にあわせてかっこいいスライドショー的なものを作ってくれるサイト。


自動的に音楽を解析し、リズムにあわせて写真を動かしているようです。
デスクトップアプリケーションで似たようなものはありますが、ウェブツールでもありました。





一風変わったスライドショーをサクッとつくれます。
写真の表示の仕方も豊富です。


自分の持っている写真で色々試してみると面白いかも。

ボタンを作ってダウンロードできるサービス。

似たようなページは沢山ありますが
設定項目が細かくあり、割と今風のものができるのでご紹介。

PhotoshopやIllustratorがなくてもある程度自由なものが簡単に作れると思います。

また、CSSでの出力もできるみたいです。
イメージどおりのボタンがうまく作れないときなど参考にしてみては。

Da Button Factory

無料で自由に使えるアイコンを大量に集めたページ。

無料で商用利用も問題なく私用できるものばかり集めているので
いちいちライセンスを確認せずにガンガン使えるので
気楽に探して即私用できる。

素材探しにはどうしても時間がかかってしまいますが
こんな感じのサイトを沢山抱えておけば
いざというときに役に立つかも。

iconPot

多種多様なアドオンが存在するFirefox。
ちょっと変わったものを見つけたのでご紹介。

Ghostery

Ghosteryは各種トラキングコードを検出し、どのようなコードかを教えてくれます。

最近は主に広告を出す関係で、ユーザーの行動履歴をトラッキングする手法が一般的。
知らぬ間にWEBの観覧履歴が外部に流れています。

しかしGhosteryを入れておけばそうしたコードが見つかったときにアイコンで教えてくれるので、自分がどういったデータを誰に提供しているかを把握することができるようになる。
当然GoogleAnalyticsなどもしっかり検出してました。

高度化するウェブではありますが、こうしたデータを使い、自分のデータは自分で守りたいですね。

【対象施設】 都内66の美術館・博物館・動物園・水族園
＊各施設指定の展示を1回ずつ利用いただけます。
【販売場所】 ぐるっとパスの全66対象施設の窓口等
【販売価格】 2,000円　大人料金のみ
【販売期間】 平成21年4月1日～平成22年1月31日
【有効期間】 最初に利用した日から2ヶ月間
（ただし最終有効期限は平成22年3月31日）

期間中、「ぐるっとパス」をご利用の方を対象に、スタンプラリーを開催します。
10館分のスタンプを集めて応募いただくと、抽選で毎回50名様にミュージアムグッズ
がもらえるらしい。

デザイナー、カメラマン、モデル、スタイリスト･･･。

それぞれが自分のフィールドで活躍するクリエイターが集まったユニット

「scrap graphic（スクラップ・グラフィック）」

いろいろな意味でかっこいいです。

また、サイト上でのabout us。

コンセプトが素敵なので抜粋紹介。

http://scrap-graphic.jp/

scrap-graphicについて

* スクラップ（廃物、くず）扱いをされる「デザイン」を、
* スクラップ（切り抜き、抜粋）して集めていく、
* スクラップブックとしてこのウェブサイトは存在しています。

愛と皮肉を込めて　〜 scrap-graphic〜

大量生産・大量消費・大量廃棄、使い捨ての時代。
デザインもまた使い捨てのシステムの中で育ってきました。
デザインがメディアにスクラップ（廃物、くず）扱いされて終わるシステムは、
年々加速しています。

一方で、地球環境保護活動いわゆるエコ活動などが近年クローズアップされ、
環境保護の意識の高まりと共に世界中にサステナビリティという言葉も
浸透してきています。
サステナビリティとは、「持続可能な、
ずっと保ち続けることができる」という意味です。

私たちはデザインするという行動と発想をもって単にデザインするということだけ
でなくコミュニケーションも含めたサステナビリティの実現に取り組んでいます。

scrap-graphicを通じて多くの出会いが生まれることを私たちは求めています。
同時に多くの方々がscrap-graphicを通じて出会いのきっかけになるよう努めることも、
私たちが取り組んでいることの一つです。

※scrap-graphicでは売り上げの一部を環境保護の寄付に充てる予定です。

以上。

けっこう前からたまに出てきますね、横長サイト。

個人のサイトは別にして、なかなか制作する機会はないのかなとも思います。

だって、ユーザビリティの面でも、デザインの面でもそうとう理解のある、こだわったクライアントさん以外、提案できないし、話もできなさそうですよね・・・

プロモーションサイトならともかく、コーポレートサイトには、ダメな気がします。

そんな横長を特集したページ

CSSファンの皆さん、こんにちは。
すでにご存じの方も多いかと思いますが、今回は「CSS Sprite」についてです。

"CSS Sprite"
この手法は、サイト内で使用するイメージを一つのマスター画像として作成し、
CSSにて随時マスター画像から切り取り（実際は切り取りではないかも）ページ内にイメージを読み込むという手法。

恩恵としては、
通常通りにイメージを配置するよりデータが軽くなり、さらにリクエスト数が減ることによって、
結果としてサイト表示の体感速度が飛躍的に向上するというもの。
（制作側としてはスライス時間短縮の恩恵があるかも...）

GoogleやYoutubeのプレイヤーなどがこの手法で有名です。



例として、

≪通常のイメージ配置方法≫

XHTMLで、

<div id="head">
<img src="/img/logo.png" /></a>
</div>

またはCSSで、

div#head {
    width: 250px;
    height: 60px;
    background-image: url(/img/logo.png);
    background-repeat: no-repeat;
}

などと記述しますが、


≪CSS Spriteでののイメージ配置方法≫

CSSで、

div#head {
    width: 250px;
    height: 60px;
    background-image: url(/img/logo.png);
    background-repeat: no-repeat;
    background-position: 0 -34px; /* マスター画像のうち，どの場所の画像を出すのか座標 x軸，y軸の順に指定する*/
}

XHTMLで、

<div id="head"></div>

上記でdivの背景画像としてアッサリと表示完了です。


表示速度の改善をお求めの方など、試してみてはいかがでしょう？

...ただしセオリーどおりIE6の透過pngにはくれぐれもご注意を。

CompareMyFilesは２つのファイルを比較してくれるサービスです。

比較したいファイルを２つアップロードすると、その２つのファイルを比較してくれます。

オプションで空行をスキップさせたり、合致行を非表示にしたりということが可能です。

余分な操作がなく、シンプルで使いやすいです。

たとえば突然PHPが動かなくなってしまったとき、動いていた状態のバックアップファイルがあれば比較して調べることができる。

そこまで利用頻度は高くないとおもいますが、自分のマシンが使えないときとか緊急時には
使えると思います。

WEBデザインをする時、ボタンやバナーなど様々なオブジェクトを作るはずです。

ふとしたときに便利なサイト。

背景パターンやハーフトーンなど、いろいろな用途に使えるグレイスケールのテクスチャー素材。

単純なものでも自分で作るとなると結構面倒なことも多く、これだけ揃っているととても重宝します。

PhotoshopやIllustratorなどツールを使用してオブジェクトを作る際に便利です。

Lunascape社の最新ブラウザとなる「Lunascape5.1.1」が7月3日にリリースされた模様。
従来のIE系レンダリング・エンジンであるTridentに加えて、現在シェアを伸ばしているGeckoエンジンの正式版を採用。
また、WebKitも最新のリビジョンを搭載、Geckoエンジン使用時での JavaScriptの処理速度が約110％（Lunascape5.1 比）向上したとのことです。



HTML5への対応も可能となっており、OggTheora（オッグセオラ）、OggVorbis（オッグボルビス）形式の動画などの再生を機能拡張なしに行うことができるとのこと。
ブラウジング中の速さだけでなく「起動」の早さにもこだわりがあるようです。



シェアとしてはまだまだIEやFirefoxなどに及ばないブラウザではありますが、独自の「こだわり」で突き進んでほしい気がするのは自分だけでしょうか。
たまにはメインブラウザ以外でネットを楽しんでみるのも一興かと。

グラフィックの制作を中心に手がける香港のデザイナー、Benny Luk氏のポートフォリオサイト。

背景全面に墨が水の中に溶けていく動画に目がいくけど、そこだけじゃない。

http://www.sixstation.com/

パッと見では気がつかないけど、トップページ中央に表示されている漢字の羅列。
これ時計です。

独特のカリグラフィーで表現されてて、かなり新鮮。

もうひとつ特徴的なのは、文字表記のほとんどに斜体がかかったセリフ系のビットマップフォント。

東洋的な要素が多いWebサイトの中で、このフォントがその雰囲気を中和して、洗練された印象を与えている。

改めてカリグラフィーやタイポグラフィーの力を再認識。

xhtml-css はそのページのソースのエラーを教えてくれるサイト。

似たようなサイトは沢山ありますが、こちらもシンプルで使いやすいのでご紹介。

urlを入力するだけでそのページのソースのエラーを表示してくれます。

しかもピンポイントでわかりやすい。
項目をクリックすれば詳細まで見ることができる。

そして一度見た場所は色が変わってくれるのでチェックに利用できると思う。

多少エラーがあってもだいたいページは表示されるけど
更新のときだとか、別のブラウザで見たときとか
色々な場面で不具合や不便さがでてきてしまう。

できる範囲でキレイにしておくのもいいかと思います。

xhtml-css

ホームページ制作をしていて
ついうっかりデッドリンクを見落としたままにしてしまうこと、怖いです。

ページの規模が大きくなればなるほど細かいところまで見ていくのは大変です。

そこで便利なのがこちらのページ。

似たようなツールは沢山ありますが、インターフェイスがわかりやすくシンプルなので
使い勝手はいいと思います。

チェックに若干時間はかかりますが
自分の身の回りのサイトを見てみるのもいいと思います。

ついに始まったようです。
下り最大40Mbpsの高速無線インターネット。
いつでもどこでもADSL並の速度でネットサーフィンが可能なサービス「WiMAX」。
サービス提供範囲はまだ主要都市部だけのようですが、人口カバー率90％に向けて現在拡大中とのこと。
海外のようにホットスポットの少ない日本では現在、Wi-Fi圏外だとイーモバイルやPHSなどの7.2Mbpsデータ通信が頼りでしたが、これからはWiMAXのような高速サービスにシフトしていきそうです。



パソコンメーカー各社もワイマックス通信端末を内蔵したノートＰＣを投入するらしいです。
富士通は12.1型「FMV-BIBLO LOOX R/D70」をすでに発売しており、
東芝は12.1型「ダイナブック　SS RX2/WAJ」、パナソニックも14.1型「レッツノートF8」を、それぞれ７月末に発売する予定だとか。

その一方、イーモバイルも8月上旬に高速データ通信技術「HSPA+」を使った国内初のサービスを開始するらしく、
PHS大手ウィルコムも10月に次世代PHS「XGP」の有料サービスを始める計画で、3陣営とも受信速度はほぼ同じ...らしいです。
3巴の激しい戦いが予想されそうですが、ユーザにとってサービスの向上は望ましいところ。

もっとも、Wi-Fi可能なエリアが日本にももっとたくさんあれば済む気もしますが、
日本のインターネット、どう進化するのでしょうか。