webレイアウト、プログラムリスト、お知らせ

ど～も、PBロッキーです．ここしばらく時間を見つつ サイトのデザインをいじっています．

PB-100 の宇宙では 2009 年頃を転機に、個人ホームページ時代なサイトから現在の形へとアップデートを続けてまいりました．

メインコンテンツとメニューが縦に並ぶ 2 カラムとしたのはそのときです．

あわせてディスプレイサイズが横 640px までの環境で快適に閲覧できるよう、横幅を固定の 619px としました．

さて、Web サイトのレイアウトには、いくつかの手法があってそれぞれに一長一短があります．（僕が 2009 年に PB-100の宇宙をいじっていたときは、固定幅レイアウトのほかにはリキッドレイアウトの話題を良く見た気がします．）

このたびは、最大サイズを横 619px とするフレキシブルレイアウトとしました．

すると画像のように、横幅をムギュっと縮めてもレイアウトが崩れません．この状態で Safari 3.2 のブラウザの幅はスクロールバーの幅を含んで 346px です．

フレキシブルレイアウトの弱点は、 ie6 以下のサポートができない点です．これは、max-width といった css 指定が ie6 以下にはないためで、画像のサイズをカラムに合わせて変更することができません．( js を使って画像のサイズを変更することは可能です．)

ということで、ie6 以下については、ブラウザの表示エリアの幅が 640px 以下だとレイアウトが崩れたり、イメージがはみ出したりしてしまいます．このようなケースはごくごく限られるため、この辺であきらめるとします．

最後に、このデザインの変更はまだ反映できていません．サイトが（ pureCssPopup のための変態的なタグ構造のため）スマートフォンでスクロールできない、という致命的な状況なのでさっさと更新しなくちゃいけないのですが、、、

そんなサイト構造にしていて気付いたのですが、pbPrinter にエラーを発見しました．

pbPrinter は表示エリアのリサイズ時には、それに合わせてシート数やシートあたりの横幅を自動で変更します．この部分でエラーが起きていました．

また ie では <pre> タグ内にできた <div> （などのブロック）要素のサイズの計算が他のブラウザと異なり、フレキシブルレイアウトを崩してしまう、問題も発見しました．

タグを遡る処理を追加して、<pre> タグ内に <div> を置くことがないようにしました．

あわせて、<pre> タグ内の改行文字が ie と 他のブラウザで異なるため <pre> タグでコードを囲んでいる場合 ie で正しい改行位置を取得できない不具合を修正しました．

また冗長なコードを修正し負荷を抑えるようにしました．これは、複数のプログラムリストを処理する際に顕著です．

現在 float:left で配置している PB フォントを絶対配置に変更すればブラウザのレンダリング負荷の点でさらに有利に思いますが、これについてはまだ後日．