リンク付き画像をリストに入れたときにできる変なマージンの回避法

画像をリストタグとaタグでマークアップしたものをブラウズすると、変な余白が開く現象があります。
長年（過去2回ですが）苦しんできたこの現象の原因と回避法が分かりました。のでメモ。

HTMLバージョン

XHTMLTransitional、XML宣言あり。

タグの状況

liタグの中にaタグを入れその中にimgタグを入れている。

CSSの状況

ul、li、img共にマージンはゼロ。list-styleはnoneに。

表示：
marginを0にしているにもかかわらず、Firefox、Safari、IEで変なマージンがでる。

---

１．プレーンな状態。

CSSに何も指定していない状態。
ちなみにOperaはこの状態でもマージンがないです。

２．CSSで、ul、li、a、imgタグのmarginを0に。

margin: 0;の指定があるにもかかわらず、変な余白が。

３．imgにdisplay: block;を指定。

モダンブラウザでimg関連の余白の解決法としてよく挙げられるのは、
imgに対してdisplay: block;を指定して画像をブロック要素にする方法。

確かに、Firefox、Safariでは余白がなくなりましたが、
IEでは逆に余白が余計広がってしまいます。

４．liに画像の高さと同じheightを指定。

どうもIEでは、liタグの中にブロック要素があると余白ができるようです。
ので、imgに対するdisplay: block;を消し、
liに画像と同じ高さのheightを指定してみる。

Firefox、Safari、IE7、8で余白を消すことに成功しました。
が、最終関門IE5、6がしぶとく余白をあけています。
シェアが低くなっているとはいえ、まだ彼らを無視することはできない…。

というより、無視したくないので。

５．liにheightを指定したまま、overflow: hidden;を指定する。

これで完成！

ということで、ようやく完成しました。
ルールとしては、

liタグの中に入れるものはブロック要素にしないこと。
liタグには画像と同様の高さを指定し、overflow: hidden;すること。

以上を守ると、ほとんどのブラウザできちんと表示できます。

この問題を解くのに本日2時間費やしました。

以上、メモ終わり。

テンプレート作りのメモ

今アルバイトしている会社を辞めるにあたって、
Webサイトのコーディングテンプレートを作って置いていこうかと思っている。

私の代わりにコーディングが出来る人はもちろんいるのだが、
彼はわたしと違い、コーディング以外のほかの仕事もこなすことができる。

もしそれほどコーディング業務が好きではないのなら、
コーディングに費やす時間を、他の作業に当てたほうがもっと楽しく仕事ができると思い、
この考えに至りました。

以下、テンプレートを作るにあたってのメモ。

---

基礎部分

1. xml宣言をつける。
2. XHTMLTranditionalで作る。
3. 文字エンコードはutf-8にする。
4. meta content keywordは忘れずにつける。
5. import用CSSから読み込む。メディアはscrern, printにする。

IDとClass

1. body直下に#container
2. ロゴ、タイトル部は#header。ロゴは#logo
3. #headerや#footerによくある「お問い合わせ」系ナビゲーションはul.utility
4. グローバルナビゲーションは#gnavi
5. トップページによくあるFlashや画像などのキャッチコンテンツを入れる#catch
6. パンくずリストはp.tpath
7. フロートを含むコンテンツ部を囲む#contents
8. ３カラムサイトの場合、#mainと#subを囲む#leader
9. メインコンテンツを入れる#main
10. サブコンテンツ、ローカルナビゲーションを入れる#sub
11. ３カラムの場合の最後のひとつ#ad（広告の場合）
12. コピーライトなどフッターコンテンツは#footer

---

以上、メモ終わり。

内定先の昨年度の新人研修情報や、今年度の新人教育的な記事を見て
心躍らせる、3月中旬でした。

コーダーかプログラマーか

「彼女は、Web制作会社のSE、プログラマーでの就職が決まっています」
と、先日研究室の教授から紹介された。

「彼女」とは、無論私のことです。

が、
・・・なんか、違う。

第三者的な視点から見たら、
Webとは全然関係ない世界にいる人から見たら、
確かに私はプログラマーなのかもしれない。

だけど、SEって、システムエンジニア？
HTMLとCSS書くのがシステムエンジニア？
それがすごく腑に落ちなくて、今日までずっと引っかかっていた。

別に、呼ばれ方なんてどうでもいいじゃんって、そう考えればすむことなんですが、
「SE」と呼ばれること、紹介されることがどうしても、腑に落ちなくて。

だって、私はシステムなんてこれっぽっちも作っていないんです。
私がしていることは、文章構造のマークアップと、インタフェースデザインを形成するためのプログラミングだけ。

それでも、自分の仕事を紹介するときに
「プログラマーだよ」ではなく
「ホームページ作る人だよ」と言うのは、
私がWebデザイナーに対して劣等感を持っていることの現われでしょう。
そして、プログラマーに対して抵抗を持っているからだと思います。

私も、はじめからコーダーがやりたかったわけではなくて。
はじめは、大まかな意味での「Webデザイナー」になりたかった。
そこから、現在の「コーディングがしたい」につながっていくのですが、
私のWeb制作への入り口は、プログラマーではなくデザイナーでした。
「Webデザイナーにならなかった」のではなく、「なれなかった」というのが自分の中のどこかに、かすかにあって、
それがこの違和感をもたらす要因なのだと思います。

そして、さらに私の大学というのは、SE関連の求人が多くて、学生内では
「SEとは、デザイン会社、ゲーム会社、映像会社に就職できなかった人が仕方なく就職する職業」
という、暗黙の印象があったように思います。

実際の仕事の重要度はどうかというと、
私はコーダーなんかよりもずっと、SEの方が重要だと思っています。
システムを組むのは、明らかにSE、人間じゃないとできないけれど、
ただ見栄えだけのWebサイトを作るためのコーディングは、機械でもできるからです。

それでも、私の大学には大して努力もせずに大学に入っただけで
そういった、見かけの華やかな業界に就職できると思っている人が大半で、
結果的に「SEにしかなれなかった」「しかたなくSEになりました」という学生のほうが多いです。

そんないきさつがあって、
自分はデザイナーではない、と否定しながら、
プログラマー、エンジニアとして扱われることに少なからず違和感を覚えるんです。

仕事の重要度は、デザイナーもプログラマーも同じはずなのに、
どうしてこういう変な意味をつけて解釈してしまうんでしょうね。
そんな自分がすごく嫌です。

卒業研究展

本日から、研究室の卒業制作展が始まりました。
インタラクティブコンテンツデザイン展といいます。
就職活動中の卵たちがサイトを作っています。なのでコードは見ないで下さい･･･。

駅から遠く、曲がりくねった道を歩く隠れ家的な場所にあります。

この時期に卒業制作展を開いている大学が多いようで、
昼過ぎに宣伝も兼ねて他大学の展示会を見に行きました。

１．「卒展」女子美術大学　芸術学部　デザイン学科　VDコース

芸術学部だけあって、Web系のものはありませんでしたが、
絵本、漫画、油絵、などなど手製アートがいっぱい飾ってありました。

２．「apartment」多摩美術大学 情報デザイン学科 情報デザインコース

情報デザインということで、主にパソコンを使った展示物が多かったです。
ずらっと並べられたMac、テレビ。受付応対のすばらしさ。学生の展示会とは思えません。

ということで、とてもすばらしい展示会でした。
そして、今回の記事で言いたいことは、「展覧会に対する想い」です。

「５分でできる」？

本日、HTMLコード置換の依頼を受けたのですが、

「どのくらいでできる？」

との問いに、

「置換自体はすぐにできますけど・・・5分くらいですかね」

と答えた。

正直、置換作業自体は一瞬のうちに終わるので1分くらいで終わると思っていたのですが、
実際はというと、ちゃんと5分かかりました。

作業時間というと、「自分が作業する時間」だということを考えがちですが、
実際には、修正データをダウンロードし、修正データを開き、そしてデータを渡すのにも時間が発生します。
その点を見落としていたんだ！と本日、今さらながらに気づいたのです。

作業の前準備、事後処理含めて作業時間なんだということが身にしみて分かりました。

学生生活も残すところ1ヶ月を切ってきて、時間のなさに本当に焦ってきて。
とにかく、「今の時期に勉強しなくては。吸収しなくては」という思いがあります。

---

学生時代に、何も残しておきたくない。
「後悔したくない」というよりも、「断ち切りたい」という気持ち。
学生時代に自分がやってきたことは、本当に貴重なことだし、大きな財産だけれど、
社会人として働く場には持ち込みたくない。

今の時期にすべてやりきって、
すっきりした気持ちで4月を迎えたいです。