Birdis Land's Weblog

Birdis Land's Favorites!の日記のページをブログ化しました。

2006-10-11 Wednesday

このブログのサイトデザインについて

ブログをスタートするにあたり、サイトのデザインをどうするか、でちょっと悩みましたが、やはりHTMLで書いたメインサイトのデザインに極力似せようと思いました。もう何年も使っているので新鮮味はないですが、自作なだけに愛着があります。サイトの基本構成としては、ヘッダ(サイトID)の下にナビゲーションブロックとメインブロック(コンテンツ)、そしてその下にフッタという、オーソドックスなスタイルですが、せっかくXHTML+CSSで作るので、HTMLでは出来ないことを実現したいと思い、次のような仕様を盛り込むことにしました。

  • ブロック要素はヘッダ(サイトID)、ナビゲーションブロック、メインブロック(コンテンツ)、フッタの4要素。
  • ナビゲーションブロックの幅は固定する。
  • メインブロックの幅は可変。(ブラウザの幅を変えるとコンテンツの幅も変わる、いわゆるリキッドデザイン)
  • ただし、サイト全体の幅には上限を設ける。(ワイドな画面で全画面表示したとき、サイトが画面いっぱい横に伸びるのは格好悪いので)
  • ブラウザの表示はナビゲーションブロックが左でメインブロックは右。(X)HTMLではナビゲーションブロックの前にメインブロックを記述。(PDAやCSS非対応でプアな環境でのブラウズを考慮)
  • サイト全体はセンタリング。
  • VGA画面でもレイアウトが崩れない。(PDA等での閲覧を考慮)出来れば、幅320ピクセル程度まで縮めても横スクロールバーが出ないようにする。

これだけの仕様を全て満たすテンプレートがあれば、それを流用しようと思いましたが、要件を満たすテンプレは簡単には見つからなかったので、それなら自分で作ったほうが早いと思い、作成に着手しました。XHTML+CSSで段組をするのは初めてだったので、かなりてこずりましたが、何とか実現。デザイン上の細かいアラはいっぱいありますが、それは今後少しずつ修正していくとします。今回のテンプレ作成で出てきたネタや、以前から仕事でWebページをコーディングしてきて思った事、身につけたHTML/CSS関連のtipsなんかも、このブログで取り上げて行きたいと思ってます。

2006-12-11 Monday

ブログのテンプレートはやっぱりオリジナルがいい

せっかくHTML/CSSというカテゴリーを作ったのに、このブログのサイトデザインについてという記事を1本アップした後は全くエントリーが無かったので、今週はちょっと力を入れて、このブログのテンプレ作成にまつわる話を書いてみたいと思います。

このブログをはじめる前、メインサイトはHTML手書きで作ってました。また、仕事で会社のWebサイトを作ってますが、これもやはり全て手書きで作っているので、基本的なHTMLやCSSの知識は一応あるつもりでした。しかし、自分の書いているHTMLは4.01のTransitionalなのに対し、ブログのテンプレートはXHTML+CSSで書かれているため、その違いに戸惑いました。また、ブログのベースHTMLは静的なページでなく動的なページの元となるものなので、ベースHTMLをシステムがどのように書き換えるかも考慮してコードを書かないと、実際にページを生成させたときに予想外の見え方をしてしまうのもやっかいでした。動的に変化する部分は独自ブロックと独自タグを埋め込むのですが、これについてはCGIのスクリプトなどをいじった経験があるので何とかなりました。しかし、何より面倒だったのが、静的なページなら、ローカルに保存したコードをちょこっといじり、上書き保存してブラウザをリロードすれば、いじった内容がすぐ確認できるのに対し、ブログのテンプレート(ベースHTML)の修正の場合は、修正した後、いちいち再構築させないといじった結果がブラウザで確認できないということ。再構築にかかる時間は数秒とはいえ、テンプレ作成は初めてで手探りの作業だったため、何十回と再構築を繰り返すのが非常に面倒でした。

テンプレの作成は、静的ページをHTMLで一から書きあげるより大変な作業でしたが、しかし、一度出来てしまうと苦労した甲斐があります。ブログをはじめた頃は、他人の作ったシステムで動く、他人の作ったデザインのサイトで、自分のオリジナルはテキストと写真のみなので、何か違和感があるというか、自分のサイトじゃないような感じがしていましたが、テンプレを自作してオリジナルデザインになって、ようやく自分のサイトになった気がします。

次回は、テンプレ作成で得た知識や困った事など、もうちょっと具体的な話を書くつもりです。

2006-12-13 Wednesday

CSSのfloat属性で段組デザインに挑戦

前回のエントリー「ブログのテンプレートはやっぱりオリジナルがいい」の続きです。テンプレ作成で苦労した点の具体例、最初にあがるのが段組です。ブログサイトのデザインというと、一般的には下記のようにヘッダとフッタ、そしてその間は、2段か3段の段組(マルチカラム)になっています。

ヘッダ
コンテンツ
ナビ
ゲーション
フッタ

CSSが普及する前のHTMLだと、段組は普通<table>でやりました。セマンティックWebという考えからすると邪道ですが、静的なソリッドデザインのWebページのレイアウトなら、CSSが普及した今でも<table>を使うほうが楽で、融通も利いて、なおかつブラウザの表示も確実なので、メリットは大きい気がします。これはもちろん私のスキル不足な面も大きいのですが、仕事で作るWebページは積極的にCSSを使い、意味と見栄えを出来るだけ切り離した作りを心がけているものの、ページ全体のレイアウトだけは未だに<table>を多く使っています。しかし、ブログのテンプレートでは、<div>のfloat属性で段組しているようなので、素直に従うことにしました。

float属性はあまり使ったことがなかったので、「CSS」「段組」といったキーワードでググってヒットしたサイトをいくつか拝見して、基本的なところから勉強し直しました。スタイルシート段組レイアウト基礎クイズ - [ホームページ作成]All Aboutで満点が取れるようになったのでテンプレ作成にチャレンジ。固定幅の単純な2カラムの段組は簡単に作れました。しかし、「 このブログのサイトデザインについて」で挙げた仕様を満たす段組レイアウトを作成しようと思うと、とたんに挫折。特にナビゲーションのブロック(段)とコンテンツのブロック(段)の順番を、コード内の記述順はコンテンツ→ナビゲーションで、ブラウザの表示はナビゲーション(左)→コンテンツ(右)にする、という点が苦労しました。コード内でコンテンツの記述を先にするメリットは、遅い回線で見たり、サーバに負荷がかかっていてナビゲーション内に配置したカウンタなどの表示に時間がかかるときなどでも、コンテンツの表示が先に行われるので、見る人のストレスが少ないというのが一つ。そして、PDAや古いブラウザなどで、CSSを切って表示したときに、コンテンツが先に表示されるので、スクロールしなくてもコンテンツにすぐたどり着けるという点。いずれも、ADSLやFTTHで最近のブラウザを使っている大多数の人にとっては関係のない話で、マイノリティに対する気遣いですが、個人的にはこだわりたいところです。

ナビゲーションブロックが右のレイアウトにすれば、苦労しなくてもコード内と表示の順番が一致しますし、実際世の中のブログサイトのデザインを見ていると、右側にナビゲーションを持ってきているサイトの方が多そうですが、メインサイトのデザインを踏襲し、ナビは左という事にもこだわりたかったのです。

で、試行錯誤の結果、最終的に、CSSによる段組(マルチカラム)レイアウト講座で紹介されている、ネガティブマージン(マージンの値をマイナスにする)を使うことで解決しました。具体的には、コンテンツのブロックにナビゲーションブロックの幅の分だけマイナスのマージンを設定してコンテンツとナビゲーションを重ねてやり、コンテンツのブロックの中に子要素を設けてナビゲーションの幅の分のプラスのマージンを設定してナビゲーションとコンテンツが重ならないようにするという方法です。ポイントは負のマージンでブロックを重ねる事と、コンテンツの中に子要素を設けてナビげーションのブロックと重ならないようにするという事でしょうか。って、非常に分かりにくい文章ですが、自分の備忘録として書いているんで、すみません。

とにかく、ヘッダ、ナビ、コンテンツ、フッタから成る下図のような基本的な段組レイアウトは完成しました。

ヘッダ
ナビ
ゲーション
コンテンツ
フッタ

そこで、次に色とか文字の大きさといった細かい部分をCSSで指定していったのですが、またまた問題が出てきました。(続く)

2006-12-15 Friday

サイドバーの背景色を最後まで表示さす

前々回のエントリー「ブログのテンプレートはやっぱりオリジナルがいい」からの続きネタです。

CSSが普及していなかった時代、HTMLで複雑なレイアウトを実現するための小技がいろいろありました。本来は表組のために使われるべき<table>でレイアウトを作るというのも(小技というよりは大技ですが)その一つですし、その<table>で列の幅を固定するために、1×1ピクセルの透明gif画像をwidth属性で幅を指定して敷き詰めるというtipsは、今でもよく使われてます。時代は(X)HTML+CSSになりましたが、CSSによるデザインでも、似たようなトリッキーな小技はいろいろあるようです。今回はその一つ。<div>のflaot属性で作った段組レイアウトで、左右のカラムに別々の背景色を適用する方法です。

<table>で段組をする場合は<td>の背景色をbgcolor属性なりCSSなりで指定するだけでいいので簡単だったんですが、<div>のflaot属性だと事は簡単ではありません。単純に<div>の背景色をCSSで指定してやるだけでは、左右のブロックで天地方向の長さが違う場合、短い方の下側の背景色が最後まで表示されずに切れてしまいます。

ヘッダ
ナビ
コンテンツ
ほげほげ
ほげほげ
ほげほげ
ほげほげ
フッタ

と、こんな感じです。上のサンプルでのサイドバー(ナビ)の部分の青い背景色をフッタまで伸ばしたいのですが、いい方法が思いつかなかったので、ネットで探した結果、小粋空間: CSSでサイドバーの背景を最後まで表示するで紹介されていたテクニックを使うことにしました。自分の備忘録も兼ねてその方法を書いておくと、ナビゲーションブロックの幅と同じ長さで高さ1pixのgif画像作成し、background属性で背景画像に指定し、repeat-yで縦方向のみ敷き詰める、ということです。他にもいろいろなやり方があると思いますが、ナビゲーションブロックの幅を固定しているウチのサイトの場合、この方法でうまくいきました。

この手のtipsは一旦コードを書いてしまうと忘れがちなので、今後も備忘録として取り上げて行きたいと思います。

Search this site
Profile
Latest Entries
Recent Comments
Categories
Archives
Links
counter
Syndicate this site
Powered by
Serene Bach 2.20R