https://hp.submit.ne.jp/column/show/234
web制作してるとよく遭遇するケース集、もしくは、安易に呑んではいけない事例集。
珍しく早く帰宅したので
サイトのソース記述を全面的に書き換え中。
HTML4.01からXHTML1.0への移行……は、実行したら擬似インラインフレームがダメになることが判明したため断念。
いい方法はあるんだろうけどね、そこまで手を掛けるほど時間に余裕がありませぬ。
開設間もない頃はHTMLの知識もあんまりなかったのでソース記述がかなり適当。
とりあえず、改行が全て<div>区切りとか、正気の沙汰じゃない。
これを全部直そうと頑張ってるのだが……はあ、全部で158ページっすか、そうですか。
ひとまず過去日記は修正断念。
この子はこのまま強く生きるといいと思うんだ。
短編だけでも、と思ったら、これだけで100ページ超えてやんの。あはははははは。笑うしかねーや。
HTMLを覚えたてのピュアハートの頃ならまだしも、本業がwebクリエイターの今だとかなりだるい。
何しろ、常日頃から嫌になるくらいソースと格闘してるもんだから、仕事の延長上っぽくてげんなりする。
会社で運営してるCMSを導入したいところなんだけどね、うん、アレ販売用だし。
それをプライベートでこっそり借用した日にゃ、会社にいられませんよ。
というわけで、今日はdwtファイルとcss、試験的に1ページ書き換えたところで断念。
断念多いな今日。安国寺の僧侶、断念さん。いやなんでもない。
さて、いつ終わるかなコレ。（・ω・)
HTML4.01からXHTML1.0への移行……は、実行したら擬似インラインフレームがダメになることが判明したため断念。
いい方法はあるんだろうけどね、そこまで手を掛けるほど時間に余裕がありませぬ。
開設間もない頃はHTMLの知識もあんまりなかったのでソース記述がかなり適当。
とりあえず、改行が全て<div>区切りとか、正気の沙汰じゃない。
これを全部直そうと頑張ってるのだが……はあ、全部で158ページっすか、そうですか。
ひとまず過去日記は修正断念。
この子はこのまま強く生きるといいと思うんだ。
短編だけでも、と思ったら、これだけで100ページ超えてやんの。あはははははは。笑うしかねーや。
HTMLを覚えたてのピュアハートの頃ならまだしも、本業がwebクリエイターの今だとかなりだるい。
何しろ、常日頃から嫌になるくらいソースと格闘してるもんだから、仕事の延長上っぽくてげんなりする。
会社で運営してるCMSを導入したいところなんだけどね、うん、アレ販売用だし。
それをプライベートでこっそり借用した日にゃ、会社にいられませんよ。
というわけで、今日はdwtファイルとcss、試験的に1ページ書き換えたところで断念。
断念多いな今日。安国寺の僧侶、断念さん。いやなんでもない。
さて、いつ終わるかなコレ。（・ω・)
現在のサイトの仕様
俺の覚書なので、興味がない方はスルーして下さって結構でございます。
■構造
「壊χ」は、左右分割の2カラム構成になっている。
レイアウトの制御は全てCSSで行っている。htmlソースは4.01 Trandisionalに準拠（JAVAは組み込んでおらず、loose.dtdは指定していない。理由は後述）。
左のカラムは固定し、width、height値は共にpxで指定。
右カラムは擬似フレームとし、リキッドレイアウトとする（そのため、カラムにwidth属性は組み込んでいない。Operaではウインドウが文章量に応じて変動するが、IEやFirefoxやSafariでは問題なし）。
frameによる分割にしなかったのは、言うまでもなくSEOを意識してのこと。
■左カラム
position:fix（IEはCSSハックでabsoluteに指定）で固定。
bodyで指定したoverflow:hiddenが継承されているため、スクロールバーが出ないようになっている。
■右カラム
カラム本体は、position:fix（IEはCSSハックでabsoluteに指定）で固定。
メイン表示部分にのみoverflow:autoを指定してやることで、擬似インラインフレームが実現する（JAVAなしでloose.dtdを指定すると、この効果が現れない）。
左カラムをfloat:leftで左寄せにしても同じ効果は現れるが、ブラウザの大きさを変化するとカラム落ちが生じるので不採用。
画面左上を基準座標とし、そこから右に280px移動させて表示している。
margin-left:280pxでも同じ表示になるが、左カラムのナビゲーションバーが反応しない（反応するが、バー全体にhoverの効果が現れない）不具合が生じる。
これは、右カラムのボックスが左カラムに重なっていると解釈されることによる現象と思われる。
この干渉を防ぐため、left:280pxで右カラムを移動させている、というわけである。
また、IEではheight:100%でメイン表示部分を問題なく表示できるが、firefoxやoperaではウインドウが画面下にはみ出し、スクロールが効かない現象がおこる。そのため、:rootハックを利用し、height:90%に指定することでこの現象を回避させている。
■文字サイズ
bodyでfont-size:62.5%を指定。
実際の文字サイズは、emで指定。
これにより、1em＝10pxとなり、サイズの指定がしやすくなる。
右カラムは、margin、padding共にem値で指定。
ゆくゆくは、文字サイズに応じて画像の大きさも変動するようにする予定（これは、imgのwidth数値をemで指定してやることで実現する）。
■色
基本色は、黒（背景）、白（文字）、オレンジ（ボーダー）。
タグは、カテゴリーごとにborder色を変化させている。
��そのため、将来カテゴリーを拡張したくても、6種類までしか設定できない、ということになる。classを使えば問題は解決するのだが）
水平線は、濃紅色と灰色の二種類。状況に応じて使い分けている。
■リンクアクション
・左カラムのナビゲーションバーは、擬似クラスhoverでのみ背景色ならびに右ボーダー色が変わるように設定。
aタグにdisplay:blockとwidth数値を指定してやることで、バーのどこにカーソルを乗せてもロールオーバー効果が出るようになっている。
バーの上下余白は、line-heightで調整。
・メイン表示部はアンダーラインあり、文字色は表示色に同じである。擬似クラスhoverにのみ、文字色を赤くするプロパティを盛り込んである。
・強調したいリンクは、オレンジないしは黄色にしている。hoverについては上項と同じ。
■パンくず
各ページにおいて、パンくずリストをメイン表示部上部に表示。
ただし、リンクは設定していないので、ユーザビリティの面で不満である。
■その他
メールアドレスは、スパム対策のため画像で表示。
サイトバナーは88×31サイズ。
ファビコンを使用。
基本的に、divによるmargin調整は、ネストで判定処理している（サイト更新の利便性を慮って）。
■構造
「壊χ」は、左右分割の2カラム構成になっている。
レイアウトの制御は全てCSSで行っている。htmlソースは4.01 Trandisionalに準拠（JAVAは組み込んでおらず、loose.dtdは指定していない。理由は後述）。
左のカラムは固定し、width、height値は共にpxで指定。
右カラムは擬似フレームとし、リキッドレイアウトとする（そのため、カラムにwidth属性は組み込んでいない。Operaではウインドウが文章量に応じて変動するが、IEやFirefoxやSafariでは問題なし）。
frameによる分割にしなかったのは、言うまでもなくSEOを意識してのこと。
■左カラム
position:fix（IEはCSSハックでabsoluteに指定）で固定。
bodyで指定したoverflow:hiddenが継承されているため、スクロールバーが出ないようになっている。
■右カラム
カラム本体は、position:fix（IEはCSSハックでabsoluteに指定）で固定。
メイン表示部分にのみoverflow:autoを指定してやることで、擬似インラインフレームが実現する（JAVAなしでloose.dtdを指定すると、この効果が現れない）。
左カラムをfloat:leftで左寄せにしても同じ効果は現れるが、ブラウザの大きさを変化するとカラム落ちが生じるので不採用。
画面左上を基準座標とし、そこから右に280px移動させて表示している。
margin-left:280pxでも同じ表示になるが、左カラムのナビゲーションバーが反応しない（反応するが、バー全体にhoverの効果が現れない）不具合が生じる。
これは、右カラムのボックスが左カラムに重なっていると解釈されることによる現象と思われる。
この干渉を防ぐため、left:280pxで右カラムを移動させている、というわけである。
また、IEではheight:100%でメイン表示部分を問題なく表示できるが、firefoxやoperaではウインドウが画面下にはみ出し、スクロールが効かない現象がおこる。そのため、:rootハックを利用し、height:90%に指定することでこの現象を回避させている。
■文字サイズ
bodyでfont-size:62.5%を指定。
実際の文字サイズは、emで指定。
これにより、1em＝10pxとなり、サイズの指定がしやすくなる。
右カラムは、margin、padding共にem値で指定。
ゆくゆくは、文字サイズに応じて画像の大きさも変動するようにする予定（これは、imgのwidth数値をemで指定してやることで実現する）。
■色
基本色は、黒（背景）、白（文字）、オレンジ（ボーダー）。
��そのため、将来カテゴリーを拡張したくても、6種類までしか設定できない、ということになる。classを使えば問題は解決するのだが）
水平線は、濃紅色と灰色の二種類。状況に応じて使い分けている。
■リンクアクション
・左カラムのナビゲーションバーは、擬似クラスhoverでのみ背景色ならびに右ボーダー色が変わるように設定。
aタグにdisplay:blockとwidth数値を指定してやることで、バーのどこにカーソルを乗せてもロールオーバー効果が出るようになっている。
バーの上下余白は、line-heightで調整。
・メイン表示部はアンダーラインあり、文字色は表示色に同じである。擬似クラスhoverにのみ、文字色を赤くするプロパティを盛り込んである。
・強調したいリンクは、オレンジないしは黄色にしている。hoverについては上項と同じ。
■パンくず
各ページにおいて、パンくずリストをメイン表示部上部に表示。
ただし、リンクは設定していないので、ユーザビリティの面で不満である。
■その他
メールアドレスは、スパム対策のため画像で表示。
サイトバナーは88×31サイズ。
ファビコンを使用。
基本的に、divによるmargin調整は、ネストで判定処理している（サイト更新の利便性を慮って）。
投稿
