わたくしごとで恐縮ですが、Webサイトを作る場合に意思の疎通を妨げるのが言葉に対する認識の違いだったりします。
例として
A「ブログ形式(weblog)で更新していくなんてどうですか？」
B「ブログ形式(日記)？そんなもんいらないよ」
みたいな
まぁこれはどちらも間違いじゃないですし詳しい方が歩み寄れば良いのですが、やはり現場レベルの人間と営業の方が話したりすると、そういう言葉に対する認識のズレによってギスギスしちゃったりするもんです。
Firefox等でサイトを見た場合ページの内容量(使用モニタからはみ出した場合)によってスクロールが出たり出なかったりして、一瞬レイアウトがずれているように感じてしまうことがあります。
もちろんレイアウトはズレて無いのですが、製作中にいちいちカクカクされると本来なら気づくべきレイアウトのミスも見逃してしまいがち。また最終的に出来上がったときにカクカクされるとイマイチ印象がよくない。なのでそういうときはＣＳＳで常にスクロールバーを表示させましょう。一番簡単なやり方は
CSS
html>/**/body { overflow-y:scroll;}
このhtml>/**/bodyはIE7以外(Operaもだよね？)のモダンブラウザにCSSを適用させる為のCSSハック。
Firefox2, safari3.1.1(win), IE6, 7 , 8(IEtester) で確認。
注意として、この場合Operaには適用されないみたいなので気をつけてください。
なので完全にしたい人は別々にハックしてください。
あとIE8 beta1についてはまさしくインターネットファッキンエクスプローラー（どこかのサイトがそう呼んでた）
なのでノーコメントで。
てかIE8だとズレまくりんぐ。
ひょんなことから管理することになった情報サイトの直帰率が異常に高いので、とりあえず新規のページだけフッターに関連記事や新着記事等のリンクをincludeさせる事にした。
phpでやろうかと思ったのですが(includeくらいしか使えないレベルですが)、それもいろいろ設定するのが面倒なので、とりあえずしばらくはテストと割り切ってssiで実験してみた。
一通り作り終わった後に気づいたのですが＜ul＞とひとつめの＜li＞との間に謎の20px程のスペースが入るのです。
最初は「あーまた変なところにマージン付けちゃったかな」と思ったのだが、何度CSSを見直してもそれらしきモノが見当たらない。困った困ったという事でGoogle先生にご相談。
それで出てきた答えがこちら
Webアクセシビリティについての覚書
何も悪いことをしていないのに、SSI（インクルード）を使ったらIEで謎の半角スペースが入ってしまう問題
なんとか問題は解決。UTF-8の場合BOMをつけてるとIEで半角スペースが入るようです。それプラス読み込む方読み込まれる方のダブルパンチが原因で変な20px程の謎マージン？が入ってしまったのですね！＞＜；
覚えておこう。
「手軽にネット上でチラシを配信したいんだけど…できればFlashを使った今風な感じで・・・」という相談を持ちかけられたのでお手軽な方法を考えてみた。忘れないうちにメモを。
今回はまずサンプルページをご覧ください。
mediabox&zoomifyサンプルページ
では下準備として今回Zoomifyで表示させたい画像を用意してください。今回は利用者にFlashでズームしながら画像を見てもらうわけなので、準備する画像もそこそこの解像度のものを選びましょう。ちなみにサンプルページの画像は2400ｘ1800ｐｘです。
用意をするのが面倒な方はサンプルで使用した変な画像をお使いください
sample.jpg - 2.08MB
つかえるもんならフリー素材として使っていただいて結構です。
まずリキッドレイアウトの説明からですが、横幅100％で2カラムのリキッドレイアウトを作ります。3カラムはその応用になるので割愛。また現実問題としてサイドバーは固定の方が使いやすいので200pxで固定します。今回の肝はリキッドさせながらサイドバーを固定させる所でしょうか。投稿記事の表示される部分はwidth:100%;を指定してサイドバーは200pxを指定します。
全然目新しいことでもなんでもないのですが、とりあえず忘れないようにメモっときます。
CSS
#container { float: left; width: 100%; margin-right: -200px; } #content { margin-right: 200px;} .post { width: 90%; margin: 0 auto; } #sidebar { float: right; width: 200px; }
XHTML
<div id="container"> <div id="content"> <div class="post">テスト</div> </div> </div> <div id="sidebar">サイドです</div>
これに背景色等を加えるとこうなります
サンプル1
これはこれで良いのですが、最近は解像度が高いディスプレイも増えてきているので、100％だと間延びしてしまいかねません。
ですのでリキッドを生かしながら、サイトの横幅の最小値を従来どおりの760px、最大値を最近増えてきている960pxで固定させてみます。つまりサイトの横幅がユーザーのディスプレイにあわせて、760px～960pxの間で可変するようなります。
今回は簡単に#liquid-fixを作り、上で使ったXHTMLの全体をそれで包み込みます。その為には#liquid-fixに最大幅と最小幅を指定します。
指定にはmax-width / max-height / min-width / min-heightを使います。
対応ブラウザについてはHTMLクイックリファレンス - max-width をどうぞ。それに加えIE7でも正式対応しております。
ではmin&max-widthを利用して#liquid-fixに横幅を指定します。
CSS
#liquid-fix { min-width: 760px; max-width: 960px; }
これを上のCSSに書き足して、あとはHTMLで全体を包むとこうなります。
サンプル2
しかしこのままでは先ほど説明したとおり、IE6ではmin-width等をサポートしていないためサンプル１と変化がありません。ここでdoxdesk.com のminmax.js を使います。
利用は簡単で、minmax.jsをサーバーにアップロードしてhead内に
＜script type=”text/javascript” src=”○○/minmax.js”＞＜/script＞
と書くだけです。
するとIE6でもmin-width等を利用することができるようになります。
サンプル3
