PB-100の宇宙の中の人
PBロッキーの日記

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

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 のための変態的なタグ構造のため)スマートフォンでスクロールできない、という致命的な状況なのでさっさと更新しなくちゃいけないのですが、、、

Web制作者は知っておきたいwebサイトのレイアウト7選
2011/03/29 ギャラリーにエフェクトを設定しました

pbPrinter ( pbListImageMaker ) のアップデート

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

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

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

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

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

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

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

PB-100 活動のこれから、つまり 100活

ここしばらくみっちりと js 等のフロント技術をやってきたおかげで、PB-100 の宇宙 の発足当初には思いもよらなかった成果がでるようになってまいりました.

この pbPrinter などは、サイト公開当初から切に欲しかったものです.

今ならもっと難しいことも視野に入ってきつつあります.これからもジワジワやっていきたいと思います.よろしくお願いいたします.

お知らせ

最後に、ひい氏による PB-100 ブログ PROGRAMS for PB-100 をご紹介いたします.

ひい氏オリジナルの PB-100 用ゲーム作品を公開しているブログになります.

社長業の傍ら、コンスタンスにゲーム作品を発表されている、ということで僕も見習わなくてはいけません.

ゲームの紹介等も大変見やすいので、まだご覧になっていないそこのあなた、ぜひ一度ネッツサーフィンしてみてください.ではでは~

PB-RACER for PB-100