STR STORAGE | Entry | U-boat

有限会社U-boat様のサイトを制作させて頂きました。

http://uboatdata.sakura.ne.jp/

CSS

既存のデザインに導入するには結構な博打になってしまう『マルチカラムのheightを揃える』を最初から想定したレイアウトで組んでみました。隠しているだけで、実際には32768px（多分理論値）もの高さがあるので、縦軸50%にワンポイントみたいな感じで背景画像を使う事が不可能になってしまいますね。それ以外ではそんなに不都合は無し。Firefoxとかで馬鹿みたいにフォントサイズを大きくしてみると上限の32768pxでカラムの高さが揃わなくなるのを確認出来ます。

他には、以前書いたcontent生成で影を付けるを実戦で初めて導入してみました。あちらのエントリーではクロスブラウザを考慮した振り分けには触れていませんでしたので、こちらで補足いたします。

HTML

<h1 title="Text Shadow">
 Text Shadow
</h1>

CSS

/* モダンブラウザ向け指定 */
html body h1
{
font-family:Arial,sans-serif;
font-size:120%;
line-height:2;
color:#333333;
}
/* 子供セレクタハックでIE6以外を上書き */
html > body h1
{
color:#000000;
}
/* IE7も上書きされてしまったのでスター7ハックでIE7のみ戻す */
*:first-child+html > body h1
{
color:#333333;
}
 /* IE6・IE7以外のブラウザではテキストが複製される */
 html body h1:after
 {
 margin:-2.1em 0px 0px -2px;
 display:block;
 content:attr(title);
 color:#333333;
 }

contentが利かないIE6・IE7でこのテクニックを何の捻りも無く使った場合、他のブラウザと色指定が変わってしまうという問題が発生してしまいます。複製は無理でも色ぐらい揃えておきたいのでCSSハックを利用し改善しています。

スクリーンショット

こんな具合です。色調の関係でほとんど分かりませんけど。

Ajax

インデックスにはAnimated InnerFade with JQueryを使っています。ポートフォリオには30枚程度の写真を用意し、PHPでランダムに5枚選出し表示させています。ページによってはjQuery Cycle Pluginも利用しています。

リンクが回る効果について質問を受けましたが、これはScrolloversというライブラリです。少しレスポンスが悪いですね。文字色だけでなく背景色の書き換えも面白いかと考えテストしてみましたが、IEでは上手く動かなかったので、結局文字色の変更だけに留めています。

その他

hover擬似クラスでフォーカスが当たる効果はCSSのみで行っていますが、IE6の為にjQueryで補完しています。