Zen Gardenのアーカイブ

このページは、2005年8月後半から2010年12月までのアーカイブです。
2005年8月後半から2010年12月までのアーカイブトップへ
現在のトップページへ

Zen Garden カフェ・テイスト

Nagi
   2005.09.28 23:10

そろそろスタイルシートの内容も分かってきたので、もう少し細部を作りこむようにしてみました。
お題は、「カフェ」。

ペット同伴可のカフェってあるじゃないですか。そういうお店のサイトにどうかなあ、というカンジで。

タイトルなどのフォントは、COM4t「Familian Elder」の文字間を少し詰めて使ってます。

カフェ・テイスト

今回苦労した点
・カフェっぽいフォントを探し回ったこと。
・ペインターの使い方を忘れたので、しばらくぐりぐりやっていたこと。
・ページ右のメニューのリスト部分、IEとその他でだいぶ違ったのね・・・。

今回は800*600の画面に納めることを目標にしてみました。
あまりファンシー爆発モードなのは苦手なので、やや甘かったか。
次はやりすぎというくらい爆発してみます。
(星は、ロリポップを参考。ファンシー・プリティ系=星を使う・・・。)

あと、Fireworksで3pxの斜線がほしかったので、新規のテクスチャつくった(はじめてかも)。

今回、特に不具合はなかったハズ。
グリッドの高さはアバウトだったんですが、偶然にもぴたりと決まりました。
マックIEで、やや#quickSummary下の隙間が狭くなりますが、気にならない程度。

練習8

Zen Garden海洋SFバージョン

Nagi
   2005.09.25 18:49

今回も最後までマックIEに悩まされたぜ・・・。

今回の発見
グリッドレイアウトにする方法。
#pageHeaderの高さを指定すれば、#preambleと#linkListの高さをそろえることが可能!


今回の不具合箇所
#preambleや#explanationなどの部分、同じ内容だからとまとめて書くとOperaで不具合。

#quickSummaryの背景に絵をいれようとしたけれど、padding-bottomの数字を大きくすると、マックIEで表示がずれてボックスが伸びてしまう(線は途中までしかない)。なのでbodyの背景にいれましたよ・・・。

各ボックスにボーダーを指定してましたが、#participationの右だけ、マックIEでずれる。なので、#containerの背景にやや太目の線を書いた画像を入れて表示。線を太めにするのは、マックでずれる分をカバーするため。

練習7

Zen Garden日本の滝バージョン

Nagi
   2005.09.24 20:18

昨日からあれこれとやっていたマックIEの不具合の原因が、やっとわかりました・・・。

スタイルシートに日本語でコメントを色々書いたせいでした。不具合が起こる文字があるようです。コメント全削除したら直りました。ううう・・・。

参考:コメントに使うと直後のスタイル指定が無効になる文字がある
ちなみにこちらのサイト、マックの不具合がいろいろ載っていて有益なサイトでした。検索ですぐ見つかってよかった。

練習6

というわけで、スタイルシートに書くと余計なバグで悩むかもしれないので、こっちに書き出しておきます。

今回の発見
背景つきのセンター合わせのやり方がわかりませんでしたが、これはbodyのところに
background:#929B0E url(0005back.jpg) no-repeat center fixed; で解決。

今回の疑問点
#quickSummary p.p2を先頭に持ってくるようにしましたが、position:absolute;だと#quickSummaryを基準にしているようだ。なんかおかしいなあ。ブラウザウィンドウ基準の絶対値じゃないの? もしかして、入れ子にした場合は、親を基準にするのかも。まだposition:の意味がよくわかってません;;

今回の不具合箇所
#quickSummaryのところ、right:40px;がないとWinIEで表示がずれる。でも、あるとマックのIEで文字の改行位置が・・・。まあいいや。

#linkList ulのところ、padding: 0px;がないとマックのsafari、Firefoxで文字が右にずれてしまう。

本文を画像で囲むデザインにトライ。


・・・かなりきつかった。

本文の中のPタグの、さらに中のクラスに指定を入れるところまでさかのぼりました。
これのやり方は何パターンかあるようですが、よくわからんかったのでできる方で。

練習5

マック不具合箇所
safariとFirefoxで#quickSummaryの位置が合わない。
しかたがないので、重ならない位置に移動・・・。すごい妥協案。
あと、#linkList acronymの部分、マックのIEでおかしくなるんで削除。

Zen Gardenキルビル・バージョン

Nagi
   2005.09.21 17:00

ちょっとだけキルビルテイスト。
これで縞があったら阪神タイガース(タイガースのフォント探したんだけど、みつからなくて断念)ですが。

またしても、WinのIEだとすんなり思った位置に動かせるようになりましたが、他のブラウザだとね・・・。

今回苦労した点は#supportingTextの中身の位置指定が効かず、一個ずつ指定するはめになったこと。
これをしないと#participationの表示がずれ、#footer部分の指定が効かないという症状。
どっかのタグと当たってたらしく、修正後は#footerの指定も効くようになりました。

でも、このレイアウトだと、文字サイズの指定ができない場合はがガタガタになりますね。

練習4

Zen Garden海バージョン

Nagi
   2005.09.20 12:07

だー、やっとできた~。丸1日かかりますた、はふ~。
一度、全部終わってから、そうだマックで見ておこう、と思ったのが運のつき。

ガタガタやんけ~;;

・・・他の人のはどうなってんのかな?
うっ!ちゃんと表示されてる!マジ!?

・・・ということで、レイアウトが似ている人のソースを参考に、一個づつタグを見直していくことにしました。
おかげでだいぶ勉強になりましたが・・・。

練習3

マックの不具合箇所をおおまかに上げると、
コンテンツ全体を囲んでいる#containerがセンター寄せできない。
これには、margin:auto;で対応。はじめて知りました。左右を自動調節すれば、勝手に真ん中に来るってやつ。
あと、height: 1500px;を追加しないと、カメの画像の高さが読み込まれないようで、全体の位置がずれてしまった。これは裏技っぽいなあ。

でも、まだマックのIE5で、resources:の画像が出ない~。
もう知らんよ;;
一応マックのSafari、Firefox、Operaでは正常に表示されてるんで許してくれ。

Zen Garden猫バージョン

Nagi
   2005.09.16 20:44

細かい部分がよくわからんなあ。表示されないところとか、何の意味があるんだかわからんタグで悩むことしばしば。気づいた点をCSSに書き込みながら進めてます。
練習2

Zen Garden

Nagi
   2005.09.14 16:45

以前雑誌に紹介されていたZen Gardenのソースを勉強中。
HTMLには一切触らずに、CSSだけでレイアウトを変えていくのです。
自分でやってみると、けっこう難しい。
今まで知らなかった方法がいっぱい出てきて、とても参考になります。

とりあえず、どこがどこに対応しているのか解析するため、適当な画像を置いてみる。ふむふむ。
練習1