2007'12.31.Mon
まー、こんな辺鄙な所に来る人なんてほとんどいないだろうと言うことで書きましょう。
実はここ数ヶ月、某サイトさんのリニューアルを手伝って、というか無理矢理仕事奪っていましてですね。（その割に仕上げが遅いとか色々マズイ状況なのですが、、、
えー、来年に持ち越すのは流石にマズイと追い込んでいたワケですよ。
で、最後に簡単な解説をつけようとしたらアラ大変。簡単な解説っていいながらどんどんディープな部分に向かっていく……
解説を書くと言うことは、つまりその課程に置いて自分の書いたソースを読むわけですよ。
まあ日進月歩といいますように、制作が長期になると必然的に昔のソースと最新のソースで差が生じるわけですよ。
そんな点を見つけるたびにチマチマ直していましたらですね。
『……まてよ、この背景画像をこうやってこーやると、もっと素敵になるんじゃない？』
みたいな展開に当然なるわけですねー！＜普通ならねぇ！
で、まあこれくらいならちょっといじるだけで実装できるだろー。それがCSSの強みなんだからナー。
とかやってたらまんまとデスマーチに入りました。
これはヤバイ。何がヤバイってなぜレイアウトが崩れるのか分からない！！
CSSの指定がダブったりしてるんですよね。
こんな感じ↓
div.main_text{
width: 600px;}
～この間100行以上
body#content div.main_text{
width: 580px;}
みたいなね。なんでトップはちゃんと表示されるのに子ページになると表示ずれるかナー。っていう原因はだいたいこんな感じ。
まれにブラウザのバグもあるけどね。ほとんどのバグは設計の最初期から回避策をとっているから現れないのだけれど。
で、
ともかくある程度の実装を終わらせたわけですよ。
あーつかれた、これで寝れるなあと思った今日未明、午前3時45分頃。
最後にトップの表示でも見るか、と思ってレンダリングしたら
恐怖の、表示ズレ！
まったく、どこに原因があるというのだっ！
まあなにが原因かってそりゃー長びいた制作期間と冗長化されたＣＳＳファイルで、つまりまったく分割せずにつくった僕が悪いんですけど。
実際こんなにデカイファイルになると思わなかったんだもの。
わかってたらモジュール毎にＣＳＳ分割してたよ、、、
んで、ともかく何が言いたいかというと
_ ∩
( ﾟ∀ﾟ)彡 デスマ！ デスマ！
⊂彡
∧ ∧ ／￣￣￣￣￣￣￣￣￣
|￣￣（ ﾟДﾟ)￣￣| ＜ もう寝る！
|＼⌒⌒⌒⌒⌒⌒＼ ＼
| ＼ ＼ ￣￣￣￣￣￣￣￣￣
＼ ｜⌒⌒⌒⌒⌒⌒｜
＼ |＿＿＿＿＿＿＿|
実はここ数ヶ月、某サイトさんのリニューアルを手伝って、というか無理矢理仕事奪っていましてですね。（その割に仕上げが遅いとか色々マズイ状況なのですが、、、
えー、来年に持ち越すのは流石にマズイと追い込んでいたワケですよ。
で、最後に簡単な解説をつけようとしたらアラ大変。簡単な解説っていいながらどんどんディープな部分に向かっていく……
解説を書くと言うことは、つまりその課程に置いて自分の書いたソースを読むわけですよ。
まあ日進月歩といいますように、制作が長期になると必然的に昔のソースと最新のソースで差が生じるわけですよ。
そんな点を見つけるたびにチマチマ直していましたらですね。
『……まてよ、この背景画像をこうやってこーやると、もっと素敵になるんじゃない？』
みたいな展開に当然なるわけですねー！＜普通ならねぇ！
で、まあこれくらいならちょっといじるだけで実装できるだろー。それがCSSの強みなんだからナー。
とかやってたらまんまとデスマーチに入りました。
これはヤバイ。何がヤバイってなぜレイアウトが崩れるのか分からない！！
CSSの指定がダブったりしてるんですよね。
こんな感じ↓
div.main_text{
width: 600px;}
～この間100行以上
body#content div.main_text{
width: 580px;}
みたいなね。なんでトップはちゃんと表示されるのに子ページになると表示ずれるかナー。っていう原因はだいたいこんな感じ。
まれにブラウザのバグもあるけどね。ほとんどのバグは設計の最初期から回避策をとっているから現れないのだけれど。
で、
ともかくある程度の実装を終わらせたわけですよ。
あーつかれた、これで寝れるなあと思った今日未明、午前3時45分頃。
最後にトップの表示でも見るか、と思ってレンダリングしたら
恐怖の、表示ズレ！
まったく、どこに原因があるというのだっ！
まあなにが原因かってそりゃー長びいた制作期間と冗長化されたＣＳＳファイルで、つまりまったく分割せずにつくった僕が悪いんですけど。
実際こんなにデカイファイルになると思わなかったんだもの。
わかってたらモジュール毎にＣＳＳ分割してたよ、、、
んで、ともかく何が言いたいかというと
_ ∩
( ﾟ∀ﾟ)彡 デスマ！ デスマ！
⊂彡
∧ ∧ ／￣￣￣￣￣￣￣￣￣
|￣￣（ ﾟДﾟ)￣￣| ＜ もう寝る！
|＼⌒⌒⌒⌒⌒⌒＼ ＼
| ＼ ＼ ￣￣￣￣￣￣￣￣￣
＼ ｜⌒⌒⌒⌒⌒⌒｜
＼ |＿＿＿＿＿＿＿|
PR
2007'12.31.Mon
連続的なHTMLで終了箇所にのみ特殊な背景を表示させるサンプル。
テキストやリストに対してpadding-bottomを設定し、padding部分が背景となる。
その下に更にh2が続く場合は、h2の持っているmargin-top: -Xpx;によって殺される。
……あれ？一番上ってどうなってるの？
・html
<div id="RIGHT">
<h2>メニュー１</h2>
<div>
<ul>
<li>リスト１
<li>リスト２
<li>リスト３
<li>リスト４
</ul>
</div>
<h2>メニュー２</h2>
<div>
<ul>
<li>リスト１
<li>リスト２
<li>リスト３
<li>リスト４
</ul>
</div>
<!-- div id=RIGHT end --></div>
・css
div#RIGHT{
margin-top: 20px;}
div#RIGHT h2{
margin-top: -20px;}
div#RIGHT div{
background-image: url(image/right_bg.gif);
background-position: bottom;
background-repeat: no-repeat;}
あとはこれをベースに調整していけば、うまくできるはず、、、（まだ実行してない
＿＿＿＿＿＿＿＿＿
いや、ほんとごめんなさい。作業遅延出まくりデス。死にそう。
でもホントに辛い時は死にそう、なんて言えないよなあ。
つまりまだ加速できる、ぜー。
__________________
テスト用にHTML書いてみた。発想から10分でプロトタイプを作り上げるという早業！ operaでチェックして動いたから問題ないでしょう。
HTMLにstyleでCSSを埋め込んでるので読みにくいのはかんべんな。
幅を指定しているのはtestを改行するため。
h1とh2の間に20pxの空間を持たせるために、一番外側のdivのmarginは40pxにセットしています。h2のネガティブは20px。
<body id="CONTENT">
<h1>h2 Negative-margin test</h1>
<div style="width: 200px; margin-top: 40px;">
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
</div>
</body>
＿＿＿＿＿＿＿＿
あれ？ 文字参照がうまくいってない？
ま、これ理解できる位の人なら文字参照の不具合なんて気にしないでしょう。気にしないで下さい。自分で置換とか使って直して下さい。
……なんて投げやり！
テキストやリストに対してpadding-bottomを設定し、padding部分が背景となる。
その下に更にh2が続く場合は、h2の持っているmargin-top: -Xpx;によって殺される。
……あれ？一番上ってどうなってるの？
・html
<div id="RIGHT">
<h2>メニュー１</h2>
<div>
<ul>
<li>リスト１
<li>リスト２
<li>リスト３
<li>リスト４
</ul>
</div>
<h2>メニュー２</h2>
<div>
<ul>
<li>リスト１
<li>リスト２
<li>リスト３
<li>リスト４
</ul>
</div>
<!-- div id=RIGHT end --></div>
・css
div#RIGHT{
margin-top: 20px;}
div#RIGHT h2{
margin-top: -20px;}
div#RIGHT div{
background-image: url(image/right_bg.gif);
background-position: bottom;
background-repeat: no-repeat;}
あとはこれをベースに調整していけば、うまくできるはず、、、（まだ実行してない
＿＿＿＿＿＿＿＿＿
いや、ほんとごめんなさい。作業遅延出まくりデス。死にそう。
でもホントに辛い時は死にそう、なんて言えないよなあ。
つまりまだ加速できる、ぜー。
__________________
テスト用にHTML書いてみた。発想から10分でプロトタイプを作り上げるという早業！ operaでチェックして動いたから問題ないでしょう。
HTMLにstyleでCSSを埋め込んでるので読みにくいのはかんべんな。
幅を指定しているのはtestを改行するため。
h1とh2の間に20pxの空間を持たせるために、一番外側のdivのmarginは40pxにセットしています。h2のネガティブは20px。
<body id="CONTENT">
<h1>h2 Negative-margin test</h1>
<div style="width: 200px; margin-top: 40px;">
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
</div>
</body>
＿＿＿＿＿＿＿＿
あれ？ 文字参照がうまくいってない？
ま、これ理解できる位の人なら文字参照の不具合なんて気にしないでしょう。気にしないで下さい。自分で置換とか使って直して下さい。
……なんて投げやり！
2007'12.29.Sat
むしろ頼子さんに手伝って欲しい。
やばいっす。ここへ来てまさかの修羅場。
なんとか敵の飛行隊を迎撃したのはいいけど燃料無し、みたいな？
全て母上が原因です。あの方冬期講座マックスで登録して下さいますモノですからさあ大変。
宿題やる時間無いっての。講座終わったらそのまま別の講座に直行ぶっつづけ数時間おつかれさまだっての。
だいたいそんな感じ。
＿＿＿＿＿＿＿＿＿＿
そろそろ潮時なのかもしれない。
と思うことが増えてきました。
このブログが消えることはないと思いますが、本家が消えたときは察して下さい（見てる人いないと思うけど）
あと、復活するときは同サイト名・同ハンドルでやるんで見かけたら生暖かく見守って下さい。
……とか書いているウチはまだ大丈夫らしい。知り合いのネトゲ廃人が言ってた。本当に怖いのはある日ぱったり消えるヤツだって。
そう言うヤツは復帰の可能性はほとんど無いし、戻ってきても名前を変えてるから分からないんだそうで。
やばいっす。ここへ来てまさかの修羅場。
なんとか敵の飛行隊を迎撃したのはいいけど燃料無し、みたいな？
全て母上が原因です。あの方冬期講座マックスで登録して下さいますモノですからさあ大変。
宿題やる時間無いっての。講座終わったらそのまま別の講座に直行ぶっつづけ数時間おつかれさまだっての。
だいたいそんな感じ。
＿＿＿＿＿＿＿＿＿＿
そろそろ潮時なのかもしれない。
と思うことが増えてきました。
このブログが消えることはないと思いますが、本家が消えたときは察して下さい（見てる人いないと思うけど）
あと、復活するときは同サイト名・同ハンドルでやるんで見かけたら生暖かく見守って下さい。
……とか書いているウチはまだ大丈夫らしい。知り合いのネトゲ廃人が言ってた。本当に怖いのはある日ぱったり消えるヤツだって。
そう言うヤツは復帰の可能性はほとんど無いし、戻ってきても名前を変えてるから分からないんだそうで。
2007'12.27.Thu
仕方あるめえと割り切って新しく注文した自転車が到着しましたー。
ジャイアント社製CR3200(08年モデル・シルバー)であります。
ちなみに前に乗ってたのは同社製CR3000(07年モデル・白)。主な違いは前サスの有無。
ちなみに07のCR3000はレバー式だったチェンジャーが、08のCR3200はグリップシフトに変わっていて少し残念。
なんか2nd GIGの最後にウチコマが出てきた時の気分。ほら、全体的な性能は上がっているんだろうけど、なんか、個性？ ゴーストが無いんだって！
いま考えるとなぜCR3000シリーズにこだわったのか。いっそエスケープでも買えばよかったのに俺。
んで、走ってみると後ろブレーキに違和感。とりあえず年始まで回してワイヤーが伸びたら調整に出そう。
今回目玉の前サスは柔らかすぎな感じ。これも次回調整。
調整ついでにレバー式のチェンジャーに変えれるかどうか聞いてみようかなー。
前回CR3000で記事を書いたときに、意外と情報を探している人が多かったらしいのでさらにメモ。
07のCR3000と比べると08のCR3200はどうもフレームが微妙に変わった気がする。いや、セッティングの違いかも知れないけれど。
もし買いに行ったお店に07モデルと08モデルがあるならそれぞれ試乗してみるのもいいと思います。
ジャイアント社製CR3200(08年モデル・シルバー)であります。
ちなみに前に乗ってたのは同社製CR3000(07年モデル・白)。主な違いは前サスの有無。
ちなみに07のCR3000はレバー式だったチェンジャーが、08のCR3200はグリップシフトに変わっていて少し残念。
なんか2nd GIGの最後にウチコマが出てきた時の気分。ほら、全体的な性能は上がっているんだろうけど、なんか、個性？ ゴーストが無いんだって！
いま考えるとなぜCR3000シリーズにこだわったのか。いっそエスケープでも買えばよかったのに俺。
んで、走ってみると後ろブレーキに違和感。とりあえず年始まで回してワイヤーが伸びたら調整に出そう。
今回目玉の前サスは柔らかすぎな感じ。これも次回調整。
調整ついでにレバー式のチェンジャーに変えれるかどうか聞いてみようかなー。
前回CR3000で記事を書いたときに、意外と情報を探している人が多かったらしいのでさらにメモ。
07のCR3000と比べると08のCR3200はどうもフレームが微妙に変わった気がする。いや、セッティングの違いかも知れないけれど。
もし買いに行ったお店に07モデルと08モデルがあるならそれぞれ試乗してみるのもいいと思います。
2007'12.26.Wed
なんか冬休み講座に出てったり『クリスマスを寂しく過ごす男の会』に巻き込まれたり、街頭献血に巻き込まれてたらもう2007年が終わろうとしているではないか！
そしてちゃっかり絵日記機能を試してみる、が言わなきゃわからんですな。
で、悔いを残さずに新年を迎えるべくさっさと課題を終わらせ頼子ルートを一周したい所存。
そういえば献血。高齢化で必要となる血液の増加が予想されるのに献血人口は毎年20%減少しているそうですよ。なんか休憩スポットにあった資料の受け売りですが。
そしてせっせと年賀状をつくる。
とりあえずレイヤーの便利さに感動。こいつはすげーや。
ただやっぱりレイヤーと色選択といくらかのプラグインじゃ限界があるなあ。。。
あとやっぱり絵が描けたら楽しそうなので大学が決まったらその練習をしたい。
最短でもあと９ヶ月か。決まっても遊んでる訳にはいかないし、なんだかんだ言って１年半は厳しそうだ。
髪は女の命と言いますが、ＰＣは理系の命です。そしてウチのＰＣが死にそう≒俺が死にそう。こいつはピンチだＺＥ☆
で、悔いを残さずに新年を迎えるべくさっさと課題を終わらせ頼子ルートを一周したい所存。
そういえば献血。高齢化で必要となる血液の増加が予想されるのに献血人口は毎年20%減少しているそうですよ。なんか休憩スポットにあった資料の受け売りですが。
そしてせっせと年賀状をつくる。
とりあえずレイヤーの便利さに感動。こいつはすげーや。
ただやっぱりレイヤーと色選択といくらかのプラグインじゃ限界があるなあ。。。
あとやっぱり絵が描けたら楽しそうなので大学が決まったらその練習をしたい。
最短でもあと９ヶ月か。決まっても遊んでる訳にはいかないし、なんだかんだ言って１年半は厳しそうだ。
髪は女の命と言いますが、ＰＣは理系の命です。そしてウチのＰＣが死にそう≒俺が死にそう。こいつはピンチだＺＥ☆
カレンダー
プロフィール
リンク
最新記事
最新トラックバック
ブログ内検索
バーコード