コーディング案件をやっていると、CSSや画像などのリソースへのパスは「/」からのルート相対パスでお願いしますね、という案件もちらほら発生してきます。そんな時に、Mac上でVMwareで動いているWin IE6から、Mac上で動いているサーバにアクセスする方法を今日知りました。とても感動したのと自分へのメモがわりにこちらで公開しておきます。

以下、手順です。

1.とりあえずMac上にサーバをたてる

これは各々の方法でやっていただければと思いますが、MacであればMAMPをインストールしてしまうのが手っ取り早くて良い感じでしょう。

2.MacのIPを調べる

ターミナルを起動し、「ifconfig」と入力してEnterをします。僕の場合には以下のような感じで結果が帰ってきました。

[中略]
en0: flags=8863 mtu 1500
	inet6 fe80::21f:5bff:feee:3e0%en0 prefixlen 64 scopeid 0x4
	inet 192.168.1.101 netmask 0xffffff00 broadcast 192.168.1.255
	inet6 2408:2:20bb::21f:5bff:feee:3e0 prefixlen 64 autoconf
	ether 00:1f:5b:ee:03:e0
	media: autoselect (1000baseT ) status: active
	supported media: autoselect 10baseT/UTP  10baseT/UTP  10baseT/UTP  10baseT/UTP  100baseTX  100baseTX  100baseTX  100baseTX  1000baseT  1000baseT  1000baseT  none
[中略]

この中の「192.168.1.101」というのがMacのローカルIPアドレスですね。

3.IE6からMacのローカルIPアドレスにアクセスする

さきほど調べたIPアドレスにIE6からアクセスしましょう。アドレスバーに「http://IPアドレス/」を入力すればOKです。

以上でIE6から、Mac上で動いているサーバにアクセスできます。簡単ですね。

番外編：hostsファイルをいじってもうちょいスマートにアクセスする

さてMac上で動いているサーバにアクセスできたものの、毎回長々としたIPアドレスを入力するのは手間ですね。そんな方はWindowsのhostsファイルに一工夫加えて、スマートにアクセス可能です。Win XPであればhostsファイルは「C/WINDOWS/system32/drivers/etc」の中にあります。こちらをテキストエディタなどで開き、「IPアドレス[Tab]お好きな名前」を再終行に追加しますと、決めていただいたお好きな名前でアクセス可能です。つまりアドレスバーに「http://お好きな名前/」を入力すればOKですね。

感想

会社にプログラマーさんがいる環境って素敵だなと思いました。

ということで、「google ツールバー アンインストール Mac」で検索したらあっさり直す方法が書かれたページを発見しました。同じような症状に見舞われている方は以下のページをご参照ください。

「Mac(OS10.6)のFireFoxでGoogleツールバーが使えなくなった」

サンプルのデザインをもとに、5名くらいでサイト構成やページのマークアップ方法などをグループディスカッションをしながら検討し、最後に発表という内容でした。自分では当たり前だと思っていたことが実はマイノリティだったことを知ったりしてともて有意義な時間を過ごせました。皆さん、お疲れさまでした。

さて、グループディスカッション終了後に、参加者の方からこんなことしたいんだけどどうするよ？と質問にあがった内容が、なかなか面白かったです。

質問内容

上図が質問にあがった内容のスクリーンショットです。ポイントは以下の2つですね。

• 右下に表示されている矢印は、マウスオーバー時に右下にずれるような感じ
• テキストの左側にある枠線ですが、テキストが複数行になった時でも1行目分の高さである

右下の矢印

サンプルを見る限り、枠線や矢印部分も含め、このエリア全体がクリッカブルなリンクとなるような感じですね。というわけで、この矢印はa要素なり、要素が足りないようであればa要素の中にさらにspan要素を入れ込むなどして、そいつにdisplay: block;を指定してやったあとに背景画像として表示してあげればOKでしょう。

左上を基点にして背景の位置を考えてしいますと、テキスト量によって高さが変化する部分ですので、矢印の位置が一定になりません。背景画像は要素の右下に表示し、マウスオーバー時の右下にずれるような感じは、余白までを含めて画像を切り出してしまうことで解決可能です。

テキストの左側にある枠線

次に、テキストの左側にある枠線です。枠線ということでCSSのborderプロパティが考えられますが、テキストが複数業になった場合にも1行目分の高さが保たれるというのが曲者ですね。inline要素のborderとした場合にも、テキストの左側を縦あわせしないとですので、なかなか難しいことになります（できるかどうか試してません）。

画像を埋め込んで解決しました

というわけでどうしたものかと悩んだのですが、img要素で画像を埋め込んでしまえばすんなり行きました。文字サイズが拡大された時に、画像の大きさもそれに追随してくれるように、画像の高さをCSSでem指定します。指定する値はテキストのline-height分の高さを指定してあげればOKでしょう。

その他、floatの指定などを細かく行いましたが、実際に指定を行ってみたサンプルを用意しましたので、ご興味がありましたらご確認ください。

僕以外の回答例

@debiruさんの回答：CSS Holic / sample1_rev2

address要素について

また、当日はaddress要素に関しましても若干議論がありました。改めてHTML4.01の邦訳を参照してみますと、以下のようにあります。

ADDRESS要素は、文書全体、あるいはフォームなど文書の主要部分に関する問い合せ先を示すのに用いられる。 たいてい、文書の冒頭か末尾に現れる。

こちらを読む限り、たいていの場合はサイト所有者の連絡先をマークアップするのに用いられるのがaddress要素ということになりますね。例外としましては、サイト所有者と違う組織・団体の方などの文書がサイト内にある場合などでしょう。そういった場合にはその違う組織・団体の方などの連絡先をaddress要素でマークアップすることになるということですね。

「ユーザーがその連絡先にサイトのミスを指摘すると編集を迅速に行えるのかどうか？」などが出ましたが、仕様にないことを考えだすとキリがなくなって来てしまいますので、仕様として決まっていることをそのままに受け止め、その情報が「文書全体、あるいはフォームなど文書の主要部分に関する問い合せ先」なのかどうか？だけを判断すればそれほど難しいことはないのではないでしょうか。

仕様書回りのことに関しましては、同日に開催された『日本ウェブ協会アカデミックプログラム Vol.7「HTML仕様書を読む」』の動画が公開されています。太田さんの話術だけでも結構おもしろいですので、一度ご覧になってみると良いと思います。

Photoshop CS5が起動しない

先週土曜日にぴちぴちばの魚介生活ブログに掲載する写真を加工するために、そういえばCS5になったPhotoshopはじめてだ！ワクワクするなーと思ったのですが、一向にPhotoshopさんが起動してくれません。あら？画像を右クリックで「このアプリケーションで開く」からやったのがまずかった？と思って、アプリケーションフォルダからPhotoshopの起動を試みるもこれまたダメ。というわけで、本日Adobeの方に対処方法を教えていただきましたので、一応こちらに公開しておきます。

僕の環境

ちなみに今回Photoshopが起動しないという現象は、Mac OS X 10.5.8でおきました。

対処方法

セーフモードで起動してみる

いったん電源を落とし、shiftキーを押しながら電源をつけて、アップルマークが現れたらshiftキーを離します。そうするとMacがセーフモードで起動するので、その状態でPhotoshopが起動しないかを試してみる。もし起動したらMacを再起動し、通常モードでもPhotoshopがちゃんと起動するかを確かめてみる。

ちなみに僕の場合、セーフモードではPhotoshopが起動しませんでした。

ルートユーザとしてログインする

セーフモードでダメでも、ルート管理者としてログインする方法があるとのこと。

「Finder→移動→ユーティリティ→ディレクトリユーティリティ」を開き、「変更するにはカギをクリックします」をクリックしてロックを解除後、メニューの「編集→ルートユーザを有効にする」を行ないます。パスワードを決めてOKを押したらディレクトリユーティリティは終了します。

Macを再起動すると、その他のユーザでログイン的なものが出てきますので、そちらからユーザ名を「root」、パスワードはさきほど決めたものでログインします。ルートユーザでログインしたら、その状態でPhotoshopが起動しないかを試してみる。もし起動したらMacを再起動し、通常モードでもPhotoshopがちゃんと起動するかを確かめてみるというものです。

ちなみに僕の場合は、ルートユーザとしてログインしている状態ではPhotoshopが起動したのですが、通常モードではやはり起動しませんでした。まさに一喜一憂とはこのことかと。

Adobeのお兄さんから聞いた方法は以上2点、どちらを試してもPhotoshopは起動してくれません。

一度アンインストールしてから再インストールしてみた

もうこうなったら面倒だけどもということで、しょうがなく再インストールしてみたら無事起動しました。急がば回れとはよく言ったものですね。

僕は1日のちょうど真ん中くらいのセッションで「これだけはおさえておきたい、CSSレイアウトの基本」と題して、CSS Nite ビギナーズ（東京版）でお話したことに、ちょっとだけ最近の傾向なども交えてのセッションになる予定です。

東京、大阪で開催されたCSS Nite ビギナーズと違い、今回は話題のHTML5/CSS3のセッションも持たれています。(X)HTML+CSSのワークフローからjQueryのことまで、今制作現場でどのようなことが求められているのかを一通り確認しておきたいという方にもオススメですね。

すでに満員間近となっているようですので、ご興味のある方はお早めにお申し込みください。

まずはイカの塩辛と蛤の2商品のみですが、夏にはバーベキューセットを、また、その日捕れた鮮魚を時間限定で販売など、次の展開も考えております。

5月末までは塩辛と蛤のセットを20%オフで販売しておりますので、是非この機会にぴちぴちばの味をお試しいただければ嬉しく思います。

アドレスが変更になっている方が多く、Gmailがエラーをはくようになってしまい、お世話になっている方でもメールが送信できていない方もいらっしゃいましたので、以下にメールの内容を転載させていただきます。

日頃より大変お世話になっております。
(株)まぼろしの小林です。

この度弊社にて千葉魚介の通販サイトを立ち上げることとなりました。
日頃よりお世話になっている皆様にもぜひ知っていただきたいと思い、ご連絡させていただきました。

—————————–
『千葉の新鮮魚介をそのまま食卓へ – ぴちぴちば』
(URL:http://pitipitiba.com/)
—————————–

ぴちぴちばでは、その日の朝に千葉の海で獲れた素材を中心にご家庭にお届けします。
塩辛などの加工品も、ご注文いただいた翌日から新鮮魚介で仕込みを開始する徹底ぶりで、
スーパーなどでは普段お目にかかれない商品を取り揃えています。
まだまだ商品数も少ないですが、夏のバーベキューセットや、時間限定の朝捕れ魚介販売など、今後商品ラインナップを徐々に増やしていく予定です。

私も実際に塩辛、蛤を食べたのですが、今まで食べたものとは桁違いのおいしさです。
千葉のブランド魚介だけに多少値は張りますが、築地なんかよりも安くご提供しております。
自信を持って皆様にお薦めします！

お時間のあるときにでもぜひ一度サイトをご覧いただけると嬉しいです。
そして気に入って下さりましたら、ぜひ一度ご賞味ください。
5月中ならばオープニングセールも行っております。

また皆様と一緒にサイトを育てていければと考えておりますので、
ご提案・改善点などございましたらご意見いただけますと幸いです。

今後とも、株式会社まぼろしとぴちぴちばをよろしくお願い申し上げます。

CSS Niteの終了エントリーで参加された方のブログを拝見することができますし、イベントサイトではイベントに関係したツイートをみることもできますので、当日参加できなかった方でもイベントの雰囲気をつかめるかと思います。

また人数などの関係から、とても参加したかったのに行けなかったという方も、ちょっと内容を変えた再演版のようなかんじでCSS Nite LP, Disk 9.2（reprise）が開催されますのでご参加を検討されても良いですね。

先日のエントリー、「CSS Nite LP9 連動 第2回コーディングコンテスト」で、併催されたコーディングコンテストに参加したことを書きましたが、優秀賞にはならなかったものの、なんとか入賞することができて良かったです。

普段から仲良くさせていただいている方も審査員に名を連ねておりましたので、その方々が気をきかせていただき入賞したのかな、などと思っていたのですが、懇親会の場で、なんと小久保さんや矢倉さんからも高評価なお言葉をいただき、とても嬉しかったです。あ、あとroleをrollと書き間違ってしまっていたのは完全にケアレスミスでした。スミマセン。

今回の受賞に邁進せず、今後とも地道に精進を続けてまいりたい思います。自社内だけではマークアップの工程が追いつかない！など、お力になれることがございましたらお気軽にご相談いただけば幸いです。よろしくお願いいたします！

日本版はとてもポップな表紙だったのですが、台湾版では渋いエンジ色が基調となった重厚なデザインとなっています。この辺は、お国がらというところでしょうか。

自分の名前もしっかりと刻印されていて、もしかしたらこれによって台湾の方でも僕を知っているという人が増えるかもしれませんね。自分の中ではだいぶ前に執筆した感じなので、その後書籍が一人歩きしてこんな結果が生まれると、とても嬉しく、同時になんだか不思議な気持ちになるものです。

改めまして、まだまだ執筆者としてしょぼすぎた僕を支えていただいた、共著者のこもりさん、神森さん、矢野さん、編集者の泉岡さん、ありがとうございました！

• Firefox3.6以降のCSSハック
• IE9へのCSSハック

いやー、こういうの見つけ出しちゃう方ってすごいですね。ChoromeとかOperaなんかもドンドン見つけてしまってください！

と、思うのですが、なんだか実装者が面倒になる一方ですよね。こういうの。

そろそろ特定のブラウザだけにCSSを指定する方法を準備してもらいたい

各ブラウザのW3C仕様への準拠がドドドーっと進んできていますので、これからはもうCSSハックとかはいらなかなーとか思ったりもします。実際に、PC用のサイトをコーディングして、最近FirefoxやSafariへのハックを使った記憶がありません。

ただ、今後僕たちが担保しなきゃいけないデバイスがめっちゃ増えていった時のことを考えると、今のうちから何かしらの対策を練っておいて欲しいなと思うんですよね。

例えば、冷蔵庫に普通にブラウザが搭載されたとしましょう。ワンソースマルチユースの精神のもと、PC向けと、冷蔵庫向けのHTMLを一緒にした場合に、「あー、最近結構売れている、東芝の○○○だけはどうしても表示がおかしくなっちゃうなー」などがあるかもしれません。

たとえwebkitを採用してくれたとしても、素のwebkitから先は各社のエンジニアさんに託されるわけでして、そんなときはむしろwebkitであるがゆえにハックがしずらくでウザイなんとことにもなりかねないなーと思います。

というわけで、例えばですが、

@[メーカ名]-[機種名]-[バージョン番号] {
	[セレクタ] {
		[プロパティ]: [値];
	}
}

なんてふうに書くと、特定のヤツだけに簡単にスタイルを指定できるみたいなのを各社の方々が用意しておくとか、なにかしら簡単なヤツが欲しいなと思っています！

と、こうなってくるとIEのコンディショナル・コメントってすげー優れた機能ですね！

CSS Nite LP9 連動 第2回コーディングコンテストが開催されています。僕も応募しましたのですが、取り組んだ際の反省などを。

いろいろデカイこと言ってすみません

えーっといきなり謝ってしまいますが、「賞を狙っているんですよー」などと大きなことを言ってしまいすみませんでした。何名かの、すでに応募作品を公開されているを見る限り「あー、ここはこうやれば良かったのか」などなど反省点がわんさかありまして、柄にもなく自信をなくしました。

残念な点

• ページ上部の影ですが、body:afterなんかでやるのが一番スマートっぽいですね。気づかずにbodyにたいしてbox-shadow: insetを使ってます。さらにそうするとページの左右にもぼかしたぶんだけ影が出てしまったので強引に消したりしています。さらにその強引さがゆえに思いもかけないことが起こったりします。
• rgbaを利用する部分ですが、どの色をどれくらいの透明度にしたら思い通りの色になるのか良くわからなかったので、実際のデザインと比べると微妙に（大幅な部分もありますが）色が違ってたりします。
• HTML5からはtime要素があるんですね。知りませんでした。
• 一応メディアクエってiPhone用とか用意しておきましたが、僕のMacのiPhoneyではスクリーンサイズが大きいのでメディアクエった感じにはなりません。とりあえずスクリーン用のものを取り外して普通にlink要素でiPhone用を読み込んで調整しましたが、最終的にiPhoneでメディアクエリーが適用されているのかは未確認です。
• グローバルナビの四隅が若干ジャギっていますね。背景はすべてa要素に一括で指定しているのですが、liとaに分けた方が良かったのかなー。でもこの辺ってブラウザが悪いよねと思ってそのままに。

その他、マイクロフォーマットとか全然指定しないんですね、とかもあると思いますが、その辺は僕の仕様です。

結構気に入っている箇所

• Non JavaScript！つっても僕があまり得意ではないので使用していないだけなのですが。
• 画像拡大部分の「target-box」。Non JavaScriptということで拡大画像表示はtarget擬似クラスを利用してdisplayの値を切り替えています。ブラウザウィンドウが小さい方ですと、画像下部に配置した画像間のリンクと画像を閉じるリンクが見きれてしまいますので、画像自体にも画像を閉じるリンクを指定しています。で、最初はもっと一意な感じのIDを指定していたのですが、なんだかthickboxなんかに対抗するという意味でも、ライブラリみたいなクラス名を指定しておいたというのが自分的には一番グッと来ている部分だったりします。
• クリック出来る範囲は広い方が良いですよね。ということで、HTML5からaの中にいろいろ要素を持てますので、hnとpとかをまとめてaでククッている箇所が結構あります。便利だなーと思う反面、最後にNVDAで読み上げてみると、都度都度「リンク」と読み上げてから段落なんかが読み上げられるので、これはどうしたものかと今でも悩みどころでもあります。
  あ、クリック出来る範囲は広い方が良いですよねの精神のもと、お知らせセクションの「重要」などのアイコンっぽいのもaに入れてしまっているので、アイコンと後続の文字の間にもunderlineが引かれてたりしますが、デザイナーさんからダメだよ！って言われたらすぐに直します。
• Operaのスモールスクリーンモードが結構良い感じかなーと。ご確認ください。
• あ、あとIE用のCSSファイル名とか。IEさん、ごめんなさい。

こんな感じでしょう。最後に僕が応募したものを以下に置いておきます。

応募したもの

http://maboroshi.biz/clearskysource/cssnite-lp9-contest2/

注釈

サイト内検索を利用するとそのままsix apartさんのものを利用できるようになっていますのでご注意ください。

アクセス解析は当ブログのものを仕込んでいますが、応募したものではsix apartさんが利用しているサイトカタリストのものになっています。