リニューアルしました。
このページは、2005年8月後半から2010年12月までのアーカイブです。
2005年8月後半から2010年12月までのアーカイブトップへ
そろそろスタイルシートの内容も分かってきたので、もう少し細部を作りこむようにしてみました。
お題は、「カフェ」。
ペット同伴可のカフェってあるじゃないですか。そういうお店のサイトにどうかなあ、というカンジで。
タイトルなどのフォントは、COM4tの「Familian Elder」の文字間を少し詰めて使ってます。
今回苦労した点
・カフェっぽいフォントを探し回ったこと。
・ペインターの使い方を忘れたので、しばらくぐりぐりやっていたこと。
・ページ右のメニューのリスト部分、IEとその他でだいぶ違ったのね・・・。
今回は800＊600の画面に納めることを目標にしてみました。
あまりファンシー爆発モードなのは苦手なので、やや甘かったか。
次はやりすぎというくらい爆発してみます。
（星は、ロリポップを参考。ファンシー・プリティ系＝星を使う・・・。）
あと、Fireworksで3pxの斜線がほしかったので、新規のテクスチャつくった（はじめてかも）。
今回、特に不具合はなかったハズ。
グリッドの高さはアバウトだったんですが、偶然にもぴたりと決まりました。
マックIEで、やや#quickSummary下の隙間が狭くなりますが、気にならない程度。
今回も最後までマックIEに悩まされたぜ・・・。
今回の発見
グリッドレイアウトにする方法。
#pageHeaderの高さを指定すれば、#preambleと#linkListの高さをそろえることが可能！
今回の不具合箇所
#preambleや#explanationなどの部分、同じ内容だからとまとめて書くとOperaで不具合。
#quickSummaryの背景に絵をいれようとしたけれど、padding-bottomの数字を大きくすると、マックIEで表示がずれてボックスが伸びてしまう（線は途中までしかない）。なのでbodyの背景にいれましたよ・・・。
各ボックスにボーダーを指定してましたが、#participationの右だけ、マックIEでずれる。なので、#containerの背景にやや太目の線を書いた画像を入れて表示。線を太めにするのは、マックでずれる分をカバーするため。
昨日からあれこれとやっていたマックIEの不具合の原因が、やっとわかりました･･･。
スタイルシートに日本語でコメントを色々書いたせいでした。不具合が起こる文字があるようです。コメント全削除したら直りました。ううう･･･。
参考：コメントに使うと直後のスタイル指定が無効になる文字がある
ちなみにこちらのサイト、マックの不具合がいろいろ載っていて有益なサイトでした。検索ですぐ見つかってよかった。
というわけで、スタイルシートに書くと余計なバグで悩むかもしれないので、こっちに書き出しておきます。
今回の発見
背景つきのセンター合わせのやり方がわかりませんでしたが、これは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で文字が右にずれてしまう。
本文を画像で囲むデザインにトライ。
・・・かなりきつかった。
本文の中のＰタグの、さらに中のクラスに指定を入れるところまでさかのぼりました。
これのやり方は何パターンかあるようですが、よくわからんかったのでできる方で。
マック不具合箇所
safariとFirefoxで#quickSummaryの位置が合わない。
しかたがないので、重ならない位置に移動・・・。すごい妥協案。
あと、#linkList acronymの部分、マックのIEでおかしくなるんで削除。
ちょっとだけキルビルテイスト。
これで縞があったら阪神タイガース（タイガースのフォント探したんだけど、みつからなくて断念）ですが。
またしても、WinのＩＥだとすんなり思った位置に動かせるようになりましたが、他のブラウザだとね・・・。
今回苦労した点は#supportingTextの中身の位置指定が効かず、一個ずつ指定するはめになったこと。
これをしないと#participationの表示がずれ、#footer部分の指定が効かないという症状。
どっかのタグと当たってたらしく、修正後は#footerの指定も効くようになりました。
でも、このレイアウトだと、文字サイズの指定ができない場合はがガタガタになりますね。
だー、やっとできた～。丸１日かかりますた、はふ～。
一度、全部終わってから、そうだマックで見ておこう、と思ったのが運のつき。
ガタガタやんけ～；；
・・・他の人のはどうなってんのかな？
うっ！ちゃんと表示されてる！マジ！？
・・・ということで、レイアウトが似ている人のソースを参考に、一個づつタグを見直していくことにしました。
おかげでだいぶ勉強になりましたが・・・。
マックの不具合箇所をおおまかに上げると、
コンテンツ全体を囲んでいる#containerがセンター寄せできない。
これには、margin:auto;で対応。はじめて知りました。左右を自動調節すれば、勝手に真ん中に来るってやつ。
あと、height: 1500px;を追加しないと、カメの画像の高さが読み込まれないようで、全体の位置がずれてしまった。これは裏技っぽいなあ。
でも、まだマックのIE5で、resources:の画像が出ない～。
もう知らんよ；；
一応マックのSafari、Firefox、Operaでは正常に表示されてるんで許してくれ。
細かい部分がよくわからんなあ。表示されないところとか、何の意味があるんだかわからんタグで悩むことしばしば。気づいた点をＣＳＳに書き込みながら進めてます。
練習２
以前雑誌に紹介されていたZen Gardenのソースを勉強中。
HTMLには一切触らずに、CSSだけでレイアウトを変えていくのです。
自分でやってみると、けっこう難しい。
今まで知らなかった方法がいっぱい出てきて、とても参考になります。
とりあえず、どこがどこに対応しているのか解析するため、適当な画像を置いてみる。ふむふむ。
練習1
