相対ルートパスのサイトをローカルで見る方法（バーチャルホスト設定）

配属最初の一週間が終わりました。

かなりお仕事を振っていただいて、楽しく作業をしている反面、
細かいミスが多くてげんなりしてしまいます。

当事者として仕事に関わることは楽しいけれど、
一歩引いて作業をしないと周りが見えなくなってしまうな、
とも感じている今日この頃です。

---

前置き長くなりましたが、今回は
「相対ルートパスのサイトをローカルで見る方法」（バーチャルホスト設定方法）のメモ。

なぜこれを設定するのかというと、
まずはWebサイトのリンクのパスからの話にさかのぼります。

パスの書き方には3種類あります。

絶対パス

http://granshe.blog.shinobi.jp/など、http://からパスを書くもの。
外部リンクを貼るときはこれ。

相対パス

../index.htmlや../company/about.htmlなど、記述してあるHTMLから見て、リンク先のHTMLがどのディレクトリにあるのかを指定。
同じサーバに上がっていないとできない。

ルート相対パス

/index.htmlや/company/about.htmlなど、はじめに「/」がつきます。
この/が、「ルート」を示します。すべてのページ共通でサイトのルートディレクトリからどこにリンクするのかを示します。
相対パスと書いてある通り、同じサーバに上がっていないとできません。

です。

大規模で、かつ階層が深いサイトの場合、
どのページに対しても同じパスでリンクを貼ることができるので、
相対ルートパスは本当に便利です（と、最近実感しました）。

しかし、この相対ルートパスは、
「ローカル上でサイトが確認できない

XAMPPを使ってローカルサーバを立ててこれを解消できるのですが、
自由にバーチャルホストの場所を指定する方法を知らなくて、
なんて自由度のないシステムなんだ！と思っていたのですが、
現場の先輩におしえていただきました！

これで、どこのフォルダにサイトを作っても、
ローカル上で動作確認、レンダリングチェックが可能に。

XAMPPが既にインストールされているものと仮定して、手順は2つだけ。

下記は、Cドライブ直下にXAMPPをインストールし、
Dドライブ直下の「sitemane」というフォルダに作ったサイトを
バーチャルホストとして指定する例です。

１．C:\xampp\apache\conf\extraの中にある「httpd-vhosts.conf」の最下部に下記コードを追加。

<VirtualHost *:80>
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@sitename
    DocumentRoot D:/sitename
    ServerName sitename
  <Directory "D:/sitename">
    Options Indexes FollowSymLinks Includes ExecCGI
    Order deny,allow
    Deny from All
    Allow from localhost 127.0.0.1
  </Directory>
</VirtualHost>


と入れる。

２．C:\WINDOWS\system32\drivers\etcの中にある「hosts」の最下行のlocalhostの後ろに半角スペースを空け、サーバ名を記入。

127.0.0.1       localhost sitemane

または、

127.0.0.1       localhost
127.0.0.1       sitemane

でもOKです。

これでローカル上で相対ルートパスサイトをきちんと見ることができます。
注意して欲しいのは、サイトのパスに半角スペースが入るとダメなようですので、
（たとえば「Program Files」など。）注意してください。

以上、メモ終わり。

生かすコーディング 殺すコーディング

最近技術的なことよりも、啓蒙的な記事が多くなってきたのが気になる今日この頃です。

6月1日付けでついに現場配属となり、大海に投げ出されたわけですが、
現場に配属されてからは、やっぱり技術的なことより考え方、仕事のやり方を知ることが多くて、
思想的な記事が多くなるのもそれと関係しているのかなあと思います。

今日は、軽いキャンペーンページをコーディングする作業をしました。
コンテンツは以前会社で作ったものをそのまま利用できる部分もあり、
HTMLはコピペし、足りない部分のCSSは追加するといった形態でした。

とくにマークアップに決まりはないとのことだったので、
ガシガシ自己流にコーディングしていたのですが、
ふと、帰りの電車の中で
「わたしはコードを殺していたんじゃないか」
という言葉が浮かんできました。

CSSもある程度コピペでいけるはずなのに、
いつもの自分のやり方でやろうとしていた。
いつもの自分のやり方でやるために、わざわざCSSを再リセットしていた。

冷静になって考えてみると、自分のマークアップに書き換えるよりも、
コピペ部分をうまく利用して改変していく方が早いし、スマートな気がしてきた。

そして、自分を誇示する為に、私はコードを殺していたんだ、
と気づいたのでした。

そう考えると、リセットCSSもある意味コードを殺していると言えるかもしれないですね。

コードは書いた人を示すけれど、コードを使って自分を誇示するべきではない。
更新作業ならなおさら、前に作業した人と見分けがつかないくらいに、
コードを生かすことを考えてもいいんじゃないか。

今まで、更新系の作業が苦手だったのも、
「自分のやりかたでできない」つまり、「自分を誇示できない」からだったのかもしれない。
自分自身の能力を示す為のコーディングなんて、正真正銘、自己満足でしかないのに。

明日は生かすコーディングをしよう。
自分自身のためではなく、作業がスムーズにいく方法を選ぼう。

と、感じました。

「好きなことは仕事にしちゃいけない」理由

タイトルどおりですが、
最近ようやく、「好きなことは仕事にしちゃいけない」理由が自分なりに分かりました。

Web制作を仕事にすると決める前から、
「好きなことは仕事にしちゃいけない」という言葉はよく知っていました。
それでも、「好きではないことを仕事にすることなんてできない」
と思ってこの道を選びました。

マークアップするのはすごく楽しいし、CSSを組むのも好き。
だけれども、「好きなことは仕事にしちゃいけない」という、
その本当の意味も理解できました。

仕事というものは、必ずお金が絡んでくる。
自分の技術の対価として、お金が返ってくる。そして、納期という時間の制限も出てくる。
つまり、自分の思うままに制作することはできないということ。

獣医を例にすると分かりやすいと思う。
獣医になれば、動物と触れ合い、動物の命を救うことができるけれど、
動物の死を目の前で看取ったり、場合によっては安楽死とか、殺さなければならないこともある。
だから、「動物好きの人が獣医になるって、本当はすごくつらいことなんじゃないか」って思ったとき、
ああ、「好きなことを仕事にするということはつらさも伴う」んだなということが理解できたのです。

HTMLやCSSに命はないけれど、
私にとってWebサイトは自分が生んだ子供に等しい存在です。
キレイにマークアップしてあげたいし、きちんと構造化したい。
（コードにとってそれは幸せかどうか分からないけれど）

でもそれは、納期や工程、報酬によって実現できないこともある。
自分や会社にとっての利害関係が絡んだとたんに、自分の好きなようにマークアップができなくなる。

納期内で商品を納めるために、納得のいかないマークアップをするときもあるだろう。
そのつらさに耐えられないから、
「好きなことは仕事にしちゃいけない」という言葉が出たんだと思う。

マークアップというのは、クライアントに理解されにくい部分であり、
自己満足でしかない場合も多いけれど、私はマークアップが好きです。
この仕事を選んだのも、自分の好きなマークアップに触れていられるからです。

「好きなことは仕事にしちゃいけない」とい言うのは、やっぱり逃げているだけだと思う。
仕事にすることで失われる「何か」は、自分の努力によって減らすことができると思うから。

汚いコードを書くのは本当につらいけれど、それは自分の能力のなさのせいでしかなくて。
自分の無力を棚に上げて、会社や環境のせいにすることはしたくない。

この気持ちを忘れずに、これからもマークアップしていけたらという戒めをこめて、
記事を書きました。

IEでmargin-bottomがfloatした要素にも適用されるバグ

先日制作作業をしていたら出くわしたバグについてのメモ。

ボックスの中に、margin-bottomを指定した要素を配置していて、
その後続の要素がすべてフロートしていた場合、
margin-bottomがフロートしているボックスの下にmargin-bottomが発生し、
フロートボックス群と親ボックスの間にmarginができるというものです。

発生環境

• IE5.5
• IE6
• IE7

発生条件

• あるボックス内で、１つの要素（Aとする）以外がすべてフロートしている。
• 要素Aはフロートボックスよりも前に記述されている。
• 要素Aにmargin-bottomが指定されている。
• 要素Aの親ボックスに高さを指定しているか、
  displayをinlineやinline-blockにしている

以上の条件を満たすと、
要素Aに指定したmargin-bottomが、フロートしたボックスにも適用されてしまいます。
例を見る。
おそらく上記ページをIE7以下で見ると表示がおかしくなるのではないでしょうか。

フロートボックスにmargin-bottomが適用されないというバグは以前ご紹介しましたね。

どうしてもこの条件で余白を明けたい場合はpadding-bottomを使うしかなさそうです。
私の場合はpadding-bottomで解決できたのでよかったですが。

今まで出くわしたことのなかったバグだったのでIE標準モードだけでのことかと思ったのですが、
xml宣言をつけた互換モードでも同じバグが確認できました。

きちんと覚えておかねば!

定義リストdlのリスト項目ごとに下線を引く方法

以前、最新情報リストを作るとき、下記のように、日付と、内容のペアごとに下線が引かれているデザインが上がってきたことがありました。

このように、日付と情報をペアにしたような情報を表示する場合、
私はほとんど定義リストを使っていました。
方法としては、dtにfloat:left;をかけ、ddを右に回り込ませ、それぞれに下ボーダーを指定するもの。その場合、たとえば下図のようにdtが1行でddが二行になってしまう場合はボーダーがもちろんズレます。

この状況を回避するすべを知らなかった私は、当時、

<dl><dt>2009年4月1日</dt><dd>入社式がありました。</dd></dl>
<dl><dt>2009年3月23日</dt><dd>卒業式がありました。</dd></dl>
<dl><dt>2009年1月31日</dt><dd>卒論発表会がありました。</dd></dl>

という暴挙に出ていました。
当時は、汚いコードだなとは感じつつ、デザインを犠牲にしたくないという思いが強くて、
これで実装していました。

が、先日、

<dl>
<dt>2009年4月1日</dt><dd>入社式がありました。</dd>
<dt>2009年3月23日</dt><dd>卒業式がありました。</dd>
<dt>2009年1月31日</dt><dd>卒論発表会がありました。</dd>
</dl>

のコードで下ボーダーを実現する表現を、社内のフロントエンドエンジニアの方に教えていただきました。

1. dtに幅を指定する。
2. ddに対し、dtの高さと同様の数値のネガティブマージン（padding-top）を指定。
3. ３．ddに対し、dtの幅と同じ数値のpadding-leftを指定。
4. ddに対し、border-bottomを指定。

こうすると、border-bottomはddにかかっているので、
ddの項目が増えたとしても線は段違いにならずまっすぐ引かれます。

dtの幅をemなど相対的な表記にすると幅が可変になるので、文字サイズの変化にも対応できます。
他にも、絶対配置と相対配置を駆使すれば実現可能だと思います。（未確認）

今まで、絶対配置やネガティブマージンにあまり良い印象がありませんでした。
理由としては、なんだかHTMLのデフォルトの配置を乱すイレギュラーなものだという見方があり、ブラウザ間で表示の差異が出そう、という気がしていたからです。

実際今回の例ではブラウザの差異は出なかったし、
多少、CSSが汚いかなぁという気もしますが、こうやって実装することができるんだなと感動しました。

最近制作から実を離していたので、新しい技術に目を向けることが多く、
そんな学習の仕方で良いのかなぁ、という疑問が湧いてきているころだったので、
この方法を教えてもらったときはかなり感動してしまいました。

技術的な面での発見はもちろん、
今までHTMLコードが汚かったのは、デザインのせいでも、HTMLの仕様のせいでもなく、
マークアップの知識が未熟な自分自身のせいなのだ、と身をもって感じて、
それはもう本当に、衝撃的でした。

結果的に言えば、コードが汚いのはコーダーの責任なのに、
そこから無意識のうちに逃げていたのかもしれません。

マークアップの楽しさを再発見できた気がしました。