置換インライン要素の縦方向の位置をborderで調整してみる

同じ行内にラジオボタンもしくはちっちゃな画像とか(つまり置換インライン要素)とテキストが混じっている場合、テキストの表示される縦方向の位置がブラウザによって結構違っていたりして、困りませんか?これを調整するには普通、ラジオボタンにvertical-alignプロパティを指定しますよね。baseline(規定値)とか、middleとか、bottomとか。

しかしvertical-alignプロパティで同じ値を指定しても、やっぱりブラウザによって微妙に位置がズレてしまうし、ピクセル単位での細かい指定ができません。これをborderで強引にやってみました。

置換インライン要素に縦方向のborderを設定してやることによって、borderの太さ分だけ縦位置をズラしてあげることができる……はずです。もちろんvertical-alignも併用するといいでしょう。
border-colorは背景色と同じにできるのがベストですが、背景画像があったりするとアウトなのでtransparentにします。

以下、実際にやってみたサンプルへのリンクです。

サンプルを見た方は既にお気づきかもしれませんが、残念ながらすごい微妙です。私がサンプルを表示確認をしたブラウザはIE6、IE7、Firefox2、Opera9、Safari3です。

Continue reading

コーダーのための(X)HTMLテンプレート

あ!ああいうコードを書いたらどうなるんだろう?!とアイデアを思いついた時に、ポンと開いてすぐコードを書き始められるテンプレートがあったら便利だなと思ったので、作りました。
以下のリンクからお好きにお持ち帰りください。

コーダーのための(X)HTMLテンプレート(zip形式)

(X)HTMLのテンプレートなんて、いくらでも配布されていると思いますのでありがたみはないと思いますが・・・。

で、内容は以下のようなものになります。

  • 文字コードShift_JISとUTF-8の2種類のファイルを用意。
  • HTML 4.01 Strict/Transitionalのそれぞれシステム識別子有りと無しを用意。
  • XHTML 1.0 Strict/TransitionalのそれぞれXML宣言有りと無しを用意
    (ただし文字コードShift_JISではXML宣言の省略はできないのでXML宣言有り版のみ)
  • すぐにCSSやJavaScriptを書けるようにstyle要素とscript要素を予め記述

Continue reading

文字化けしたMP3タグ情報(ID3タグ)の直し方

いろいろ一段落して、ようやくMacBookへの環境移行を本格的に進めています。
そんな中で起こった問題がiTunesライブラリの文字化け。
Windows環境でエンコードしたMP3をMacにコピーすると、ID3タグが文字化けを起こしてしまいます。

こりゃどっかで聞いたことある現象だなぁ?と思い、ググったら、やっぱりそんな記事がありました

ライブラリのリストで該当の曲を選び、右クリック(Ctrl+クリック)して「ID3タグを変換…」を選択。

iTunes スクリーンショット1

「文字列を変換」にチェックし、「ASCIIからISO Latin-1へ」を選択して「OK」。

iTunes スクリーンショット2

この通り、直りました。

iTunes スクリーンショット3

もしかしてこれって全部手動でタグ情報を打ち直しなのか・・・とか思っていただけに、ホント助かりました。。

MacBook購入

おめでとうございます。このMacBookはあなたに出逢うために作られたのです。

物欲に負け、ついにMacBookを購入。

自前のMacは初めてだし、ノートパソコンも初めてなので、本当に溺愛しそうです。
ともかくも今はウキウキワクワクな気分です。