WEBデザイン Archive

ブログやサイトにプログラムのコードを書いて説明したい場合に、エディタのようにコードをハイライト表示してあげると分かりやすくなるけど、ちまちまと色付けをするのは面倒くさい。そんな人にお手軽自動ハイライトJavaScirptをご紹介。

すでに相当有名になっているものだが、Googleが公開している「google-code-prettify」というもの。使い方は非常に簡単。続きを読むで、導入方法とサンプルを。

続きを読む！

フォームのセレクタ <select></select> を使うとき、デザイン上、横幅を固定にしなくてはならず、その上、<option></option> の文字列が長すぎて固定の横幅に入りきらない場合の回避策。

は、結論から言えば見つからなかった。

とは言いつつも、Windows InternetExplorer以外であれば、選択して展開されるボックスが横に間延びして全てを表示してくれるので、ユーザビリティが損なわれているという1点に目をつぶれば問題はない。

それも嫌な場合は、FirefoxであればCSSで回避することもできる。

続きを読む！

Microsoftが自信を持ってお届けする最新でモダンでセンセーショナルで最先端を突っ走るブラウザInternetExplorer7の表示・動作チェックしてしていて、ふと疑問に思ったこと。一般ユーザにInternetExplorer7が行き渡るのはいつ頃？

Internet Explorer 7 の配布予定日

日本語、韓国語、簡体字中国語、繁体字中国語、ヘブライ語　2007 年第 2 四半期

Internet Explorer 7 の自動更新による配布：Microsoft

というわけで、このままの予定では2007年7月～9月あたりに自動更新として提供されるらしい。ただ、セキュリティパッチとは違って自動更新通知の際に、インストールするかどうか選択できるらしいので、XPのユーザ全てがIE7にバージョンアップするわけではなさそう。

特にきっちりとした企業ではバージョンアップ禁止とかもありうるし。…そういった会社のシステム管理者周辺の人はルールを守ってない人、多いけど。

IE7のブラウザシェアは今のところ5～6%ぐらいだから、大多数では決してないけれど、今のうちから表示・動作は完璧にしておかないとね。

検索結果順位によってクリックされる確立がだいぶ変わってくるとSEO会社の人から聞いていたが、本当にだいぶ変わっていた。

3位と4位の間で相当な差が出てきている。もちろん曜日や順位の変わった時間帯・キーワードの属性によって差の出方は違ってくるのだろうが、それでも1ページ以内にいても1位と10位では雲泥の差になると思われる。

もし、SEO会社にお願いするのであれば、1ページ以内に入ったら…という成功報酬よりも、5位以内や1位になったら…と条件を厳しくした成功報酬にしたほうがコストパフォーマンスは良いかもしれない（そもそもSEO会社にお願いしている時点でCPが悪い気もする）。

Web creators vol.64で知った韓国の映画サイト。Cyborg2006という映画らしい。

• Cyborg2006

とにかく凄い。映画の内容を絵本にみたてて紹介していくのだが、飛び出す絵本になっており、部屋やキャラクターが飛び出て組み立てられていく。

紹介も、ほぼ動画で紹介しており、韓国のブロードバンド事情がうかがえる。とはいっても、最初の読み込みさえ終われば、日本の一般的な環境でもスムーズに見られるように制作されている。

実用的なサイトでは、うるさいアニメーションが、映画などのプロモーションサイトとしては効果的。

Adobeが3月27日、ニューヨークにてスペシャルイベントを開催し「Creative Suite 3」を発表するとのこと。発売自体は春ごろになるらしいが（レパードと同時期？）、スペシャルイベントではパッケージ内容を発表するみたい。

個人的な希望は、Photoshop＋Dreamweaver＋Illustrator＋FlashのWEBパッケージを出してくれると嬉しいな。FireworksやAcrobatもあったら便利だけど。

そんなスペシャルイベントのサイトも公開されている。ZAPAブロ～グ2.0さんのエントリ「もしかしてAdobeの時代が来るのか？」や「Flex2,ActionScript3.0が優れている9の理由とAjaxとの差」を読んで感じたけど、最近のAdobeサイトはクオリティが高い。Flashを少し敬遠していたけど、頑張って波に乗ってみよう。便乗で。

• What is in the box?

あわせてYouTubeでもプロモーション動画が公開されている。

意味としては…複数のクリエイターで、色々な形のものを簡単にイメージできるよ…ってことなんだろうか。

うざいくらいなアニメーションFaviconを作ってみたよ。

忘れかけてるサイトのキャラクター「とうふ君」の顔を色変え色変え。…うざかったらコメントください。速度・動き調整します。

2007/2/25 追記

LOVE IS DESIGNさんのエントリに触発されて作ってみました。リンクにリンク先Faviconを表示させるAPIをうちでも導入してみようかな。

Photoshopを使って写真をポップに加工できるテクニックが4つ紹介されていた。すごく簡単。

• 4 Easy Photoshop Techniques to Make Your Pictures Pop!

その中の、ぼかしとオーバーレイを使った表現を試してみた。

続きを読む！

そろそろ写真素材サイトをまとめておかないと、ブックマークしただけで、実際必要になったときに忘れてしまいそうなのでメモまとめ。

高解像度な素材サイト。

• stock.xchng

  個人的に最強写真素材サイト

• IMAGE*AFTER

  質はそんなに高くないけど量は結構ある。

• STOCK VAULT

  上と同じカンジ。

• Free Stock Photography

  カテゴリ分けされていて、数はそんなにないけど、質は安定している。

• ゆんフリー写真素材集

  なぜか多言語に対応した写真素材サイト。数も質もそれなり。ただ、使いどころが難しい写真が多い。

• NWYH Stock Image Library

  どっかの会社が自分たちで、オフィス系の写真を撮って、素材として提供しているサイト。案外使いやすい素材が多い。

テクスチャ素材サイト

• Mayang's Free Texture Library

  質・量共に満足レベル。問題は、僕があまりテクスチャを使わないこと。

• Texture Library

  面白いテクスチャがけっこうある。

見つけ次第、更新予定。

Honda Icon Museum

ホンダの車やバイクなどのドット絵アイコンをダウンロードできるサイト。ドット絵が減ってきている昨今、ここまできっちり作りこんでいるのは珍しい。

こういう遊び心が満載なサイトを作りたいな。何気にミニゲームがあったりして（笑）。

しかしこのミニゲームのランキング上位の人はどれだけの時間をかけたんだろう…。それともなにか攻略法が存在するんだろうか。

久々にドット絵を描きたくなるサイトでした。

こんなネタがあったとは…

コピペすると、四角の枠の中にメッセージが現れる不思議な絵

考えもしなかった :) 面白い。

WindowsのInternetExplorer6環境において、以下のようなリンクテキストに背景画像をCSSで指定して、:hoverの時に画像を切り替える（またはずらす）と、画像の再読み込みが入り一瞬ちらつく（フラッシュする）ような動作をする。

<ul> 
    <li><a href="test.html">テストページ</a></li> 
</ul>

li{ 

test-indent:-9999px; 

} 

li a{ 

    display:block; 

    width:100px; 

    height:100px; 

    background-image:url(01.gif); 

    background-repeat:no-repeat; 

    background-position:0px 0px; 

} 

li a:hover{ 

    background-image:url(01.gif); 

    background-repeat:no-repeat; 

    background-position:0px -100px; 

}

おそらく、CSSで指定した背景画像はあらかじめ読み込んでおくのではなく、アクションが起こされた段階で読み込みをしているのが原因だと思われる。とりあえず、IEの「インターネットオプション」→「インターネット一時ファイル」→「設定」の項目で「自動的に確認する」にチェックを入れると、そのような症状はなくなる。

JavaScriptで画像の先読みをさせても、解消しないのでもはやIE7に期待するしかないのかな :(

メールフォームを作っていて、なぜかMacのIE5だと、入力部分の表示がおかしくなってしまう現象に出くわして、小一時間頭を悩ませていたら、CSSの特徴、というか便利な点である継承を忘れていた :P

症状

こんな感じに、入力文字がかぶったり、カーソルがずれて表示されたりする。

原因

body{
 letter-spacing : 1px;
}

inputタグ自体には、なんのスタイルも指定していないのになんで、表示がおかしくなる？！ :( と悩んでいたら、普通に body から継承されて、input に letter-spacing が適用されていました :P MacIEには、letter-spacingのバグがあるみたいですね。

とりあえず、input に letter-spacing:0px; と指定し直すことで回避しました。

よくある角が丸いデザインをCSSで作ってみるテスト。色々なところでやられているけど、自分でもやってみたりして、どれくらい実用度があるのかを確かめる。

通常は<table>タグを使って、セルを9個に分けて作るが、それだとHTMLの構造上かなり問題があるので、HTMLはいじらずにCSSのみで実現するのがルール。

一番最初に思いついたのが、角丸画像を3つに分けて使用する方法。説明するより見た方が分かりやすいかな。

<dl>
	<dt>タイトル</dt>
	<dd>文章</dd>
</dl>

HTMLはこんな感じ。無理はない構造だと思う :D

dl{
	background-image:url("./bottom.gif");
	background-repeat:no-repeat;
	width:300px;
	background-position:bottom;
	padding:0 0 25px 0;
	margin:0 0 25px 0;
}
dt{
	background-image:url("./top.gif");
	background-repeat:no-repeat;
	height:40px;
	background-position:center top;
	padding:5px 0 0 40px;
	margin:0;
	color:#ffffff;
	font-weight:bold;
}
dd{
	background-image:url("./middle.gif");
	background-repeat:repeat-y;
	background-position:top center;
	padding:0 30px;
	margin:0;
}

dl / dt / dd に一つずつ背景画像を指定してあげればあら、簡単に出来ました。見本はこっちにあります。角丸テーブルCSS版1

ただ、欠点としては dt のテキスト量が多くなって折り返すと背景画像からはみ出してしまうという点。これは、究極的には空要素の div を一つ入れることで解決するが… :(

あと、横幅にも弱いのが欠点 orz

カテゴリはWebだけど、Macintoshでも良いかも。

Cultured Code - Xyleというソフトがある。このソフトはなにやら、WebページのHTMLソースとCSSの構造を簡単に見ることができるらしい。らしいというか、まだ使ったことがないので詳細は分からないけど、ぜひ使ってみたい :)

ただ、Macintosh OSX専用なのと、シェアウェアというのと、画面解像度が高くないと使いにくそうだなぁーというのが難点 :( まぁ、シェアウェアは仕方ないとしても、僕のPowerBook'12だとDreamWeaverも使いにくいもんな :(

あと、これってこのソフトで編集作業って出来るのかな。