Web閲覧環境による色の違いを考える

Windows環境の実機で確認しなかったための失敗

基金訓練の教室で使っているのはWindowsのノートパソコン。サイト作りは教室でも自分のMacBookProを使って作業をしていたため、ここ1ヶ月は全く使っていませんでした。もちろん、Windows上のブラウザーで見え方のチェックも行いましたが、Windows7がインストールしてある仮想マシン環境のParallels Desktop

そのため、最終プレゼンの直前に教室のパソコンでもチェックしてみたところで、今まで見ていた色と全く違う色の印象になっているのに気づきました。茶色系統の色が紫っぽい色になっている。ParallelsMacのカラーマネージメントシステムで動いているソフトウェア(のはず)なので気づきませんでした。

Webサイトを見るのは普通の人

製作する側ならカラーマネージメントをやればいい、FireFoxSafariで見ればいいで終わりですが、Webサイトを見るのは「普通にパソコンを使う」人。その人の使っているパソコンの画面での見た印象がすべてだから、色のことを考えると奥が深い…。

カラーマネージメントの話はこちらで
miyahan.com | 液晶ディスプレイとカラーマネージメント

カラーミーショップを使って通販サイトを作る

低予算でショッピングカートを導入したい

基金訓練を受講する前にあったWebサイトの制作予定。依頼者の意向で内容が変わりECサイトに急遽変更になりました。既に独自ドメインで使っているさくらインターネットレンタルサーバーではできないため、カラーミーショップを使うことにしました。

既存デザインをベースにカスタマイズする

完全に自分で作ろうとすると各項目の「独自タグ」をどこで使うかを把握するのに時間がかかったこともあり、プレゼンはあまりにもひどい状況でした。BOSSからは「商品をどう並べて見せたいのか決めて、それにあうテンプレートを使って改良する」というアドバイス

続きを読む

サイト管理で特定のファイルをアップロード対象外にする設定

クローク機能でアップロードしたくないファイル拡張子で指定

Dreamweaverの「サイト管理」で詳細設定にある「クローク」が今回のポイント。
「クロークを使用可能にする」へチェックを入れ、「次で終わるファイルをクロークする」で拡張子を設定する。半角スペースの後に続けて複数の拡張子を設定することができる。
psdやai、flaといったファイルを誤ってアップロードしないようにするための設定。

Bluetoothマウス探し

有線マウスだと外で作業する場合、ケーブルが邪魔になるので持ち歩きがやや大変。そこで無線式マウスを考えましたが、レシーバーを常時USBポートへ挿すことや紛失しそうな不安があります。そこでBluetooth内蔵機種のメリットを活かすべくBLuetoothマウスを探してみました。

続きを読む

FireFoxのAddonを探したりインストールする方法

「家のMacにインストールしたFireFoxへWebDeveloperなどのアドオンをインストールしたい」と他の受講生に方法を聞かれた。画像入りで説明だ m9(`・ω・´)

続きを読む

srollableとLightBoxを組み合わせる

簡単に説明すると写真一覧をスクロールさせて見せ、クリックしたら拡大するもの。
作例
scrollableとLightBox作例
HTMLのソースは以下の通り。CSSは作例から見てください。

続きを読む

ブラウザーの実装の違い

最新版の実装を確認した

昨日、CSS3で角丸を作りましたが、Mozilla Developer NetworkのCSSリファレンスで読んで気になったFireFox4と3.6.16の実装の違い(Geckoのバージョンによる実装の違い)を確認しました。

昨日試したもの。

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

これを以下のように変更して確認したところ、FireFox3.6.16では見えませんが、FireFox4は見えます(Safari5.0.4も見えます)。

border-radius: 20px;

次に逆のパターンも試してみた。

-moz-border-radius: 20px;
-webkit-border-radius: 20px;

FireFox4もSafari5.0.4も問題なし。それぞれエイリアスとしてサポートしているのだろうか。

クリックすると中の項目が展開されるタブ

Google AJAX Libraries APIを使いタブを展開する

例でカフェや喫茶店のメニューに使うという話があったが、使える場面を考えるのが課題になりそうです。
作例
http://webtrabeginner.gozaru.jp/to_hatena/ajax/sample_tab.html
ソースは以下の通り。

続きを読む