カテゴリ: ウェブデザイン

2010年2月4日 (木)

ケチケチ固定幅センタリング法

カテゴリ: ウェブデザイン | コメント (0) | トラックバック (0)

　相変わらず私は「IE6を含むほとんどのブラウザで同じように表示できて、固定幅でセンタリングして、固定配置(fixed)ブロックも入れて、かつXHTML1.1準拠のソースコード」にこだわる、変なサイト作りを続けています。
　一昨日の雑記で書いたように、この方法はやたらと<div>要素が増殖する傾向にあり、一個でも抜くとたちどころにすべてのブロックが崩壊してします。
　とはいえ<div>や<span>のような文法的に意味のないタグを乱用するのは、プログラマとしてどうなのかと思う今日この頃。

　そんなこんなで、可能な限り現状のデザインを維持しつつ、<div>タグをケチる（減らす）ことにしてみました。

続きを読む

2010年1月29日 (金)

CSSでルビを振る

カテゴリ: ウェブデザイン | コメント (3) | トラックバック (0)

　私のペンネームは「かのう神路(しんぢ)」であって、けっして「かのう神路(かみじ)」ではありません。
　……我ながら紛らわしい当て字だこと。
　こんな読みづらい名前なので、ルビ振らないと誰も読めないんですが、IE 以外のブラウザはほとんど <ruby> タグに対応してません。
　Firefox のアドオンで対応する手もありますが、ユーザーにいちいち「拡張機能入れてたも」と言うわけにもいきません。まあ、対応してなければ単に「かのう神路(しんぢ)」と表示されるだけなんですが、やはり見栄えがよろしくない。

　ってなわけで、実は二年ほど前からIE以外でもルビを表示できるよう、CSS にちょっと仕掛けをしてあります。
　XHTML 1.0 では使えませんが、1.1 なら <ruby> タグが定義されてますので、HNがよく誤読される人などは参考にしてみてください。

続きを読む

2010年1月27日 (水)

勝手にウィンドウを開くんじゃない！

カテゴリ: ウェブデザイン | コメント (0) | トラックバック (0)

　Google の Custom Search Element はインラインで（画面遷移をせずに）検索結果を表示してくれるので、サイト内検索にうってつけです。
　CSS に “position: absolute” で指定しとけば自サイトのレイアウトが崩れることもなく、Google からコードをコピペするだけで誰でも簡単に使える優れもの。
　……なんですが、微妙に欠点が。
　検索結果をクリックすると、別ウィンドウ（またはタブ）にリンクしちゃうんですよね。

　私はいわゆる「<a href=”http://～” target=”_blank”>～</a>」でリンク貼るのが嫌いな人なんで、自サイト内だろうがお友達サイトへの外部リンクだろうが、すべからく同一ウィンドウ内だけで遷移するようにしとります。
　そんなわけで、結局一週間でノーマル版（普通に Google で検索するのと同じ画面）に戻しちゃいました。ノーマル版なら別ウィンドウ開かないので。
　他人のサイトでやってる分には気にもとめないくせに、自サイト内で別ウィンドウリンクがあると異常に気になるのよ。
　たとえサイト内検索なんざ滅多に使う人はいないと知っていても！（笑）

　そりゃタブブラウザならマウスの中ボタン一発ですぐ閉じられますが、あちこちのページで target=”_blank” をやられたら、たちまちタブまみれになっちゃいますがな。
　てゆーかタブ開くのは自動でも、閉じるのは手動なんスよ。ぶっちゃけ何回もやってるとめんどいです。
　新しいタブや別ウィンドウで開くかどうかはユーザーが決めるべきであって、サイト側でその選択権を勝手に奪うべきではない、と思うんですよボク。

　もっとも、ノーマル版に戻したのは CSE 版だと XHTML 1.1 の仕様から外れてしまうってのが最大の理由だったりするんですが。（笑）
　application/xhtml+xml の Content-type を指定すると、ド派手にエラーが吐き出されました。とほほ。
　text/html にすると一発で通りましたが、XHTML 1.1 の Content-type を text/html にするのは、厳密には間違いなのですよ。
　ちなみに IE8 はいまだに text/html 以外は受け付けてくれません。ゆえに間違っていようがなんだろうが、IE にだけは text/html を指定してるこのサイト。
　（Firefox などのちゃんと application/xhtml+xml を受け取るブラウザには、正しい Content-type を出力しています）

2009年9月10日 (木)

非矩形ブロックの position:fixed

カテゴリ: ウェブデザイン | コメント (0) | トラックバック (0)

　透過PNG固定ブロックでメニューとか作ってると、ついついロゴとか大きくしてみたり、フッター部分の上にちょっとしたボタンを付けたくなったりします。……ていうかそれ私ですが。
　ところが固定ブロックの一部分だけをはみ出させたりした場合、いささか困った状況になる場合があります。特にページ全体をセンタリングしたり、ページレイアウトが固定幅だったり、本文に float レイアウトを使ったりしてるときは。……てゆーかそれも私ですが！

　今回はそんな「ページの上とかに固定ブロックのメニューを表示しつつ、固定幅レイアウトで、float 段組して、なおかつセンタリングしたい」というワガママちゃんのためのTips。
　なにより自分が忘れないうちにメモっときます。(笑)

続きを読む

2009年2月28日 (土)

増殖するレコード

カテゴリ: ウェブデザイン | コメント (0) | トラックバック (0)

　なんぞ前回の記事書いたときに気づいたのですが、 WordPress 投稿データテーブルのレコード数が一気に倍に増殖しておりました。
　なにコレ!?　この間までなんともなかったのに!?　バグっすか!?　それとも誰ぞに乗っ取られたのこのブログ!?
　……とかビビりまくりな小心者オレ様でしたが、フタを開けてみればなんのこたない。 WordPress の新機能が原因でした。

続きを読む