タグメモのカケラ

お客様から、普通のサイトだけどhtmlにRSSフィードを表示させたい！とお話をいただき色々調べてみた結果、個人的にはFeed2JSが使いやすかったからメモ。

結局お仕事的にはお客様が用意したものを使うことになったんだけど（これが使いにくい/私的には）、勉強にはなったな～。
でも、用意してたのならもっと早く言ってよ…とは思った。
時間が無い案件だったから。


あー、そろそろ新しいことができるようになりたいな～

新年が明けてから13日も経ってしまいましたが…

新年明けましておめでとうございます。
今年も不定期更新過ぎるブログですが、よろしくお願いいたします。


今年はすごい穏やかな仕事の幕開けで、いつもなら年末提出したものの返答がバタバタと舞い込んでウギャーって悲鳴をあげるところなのですが、返答がこない…の…（汗）
年末に出してるの何件かあるんだけど……

返答が…こ…な…い……（…）

なので、まったりとした仕事始めとなりました。

で、今日もちょっと暇。
夕方から打ち合わせが入るんだけど、それまでむっちゃ暇。
なので、先日買った本を持ってきた。
暇だから今日は1日研究日だ～！！

現場のプロから学ぶXHTML+CSS
毎日コミュニケーションズ

個人的にcssniteってのがポイント高くて。
後、amazonのレビューも結構良かったんだよね～

今年は、まずは初心に戻って基礎固めをしたいなと思っています。
その上で、色々と手を出せたらいいな～と。
後、個人的な予測として今年は落ち着いていそうなので、まったく違う分野の資格も取ってみたいと思っています。
医療系とか、建築系とか。
お金はかかるけど将来の投資ってことで頑張ってみようかなと思っています。


では、今年もマイペースに頑張りますのでよろしくお願いいたします。

すごい初歩的なところで引っかかってしまったのでメモ。

元々、上下に隣接するボックスにそれぞれmarginの上下を指定すると相殺されるのは知っていたので、そうしないように組んでいるのですが、今回はそれでも相殺されてしまったので、うんうん唸ってしまいました。

外枠の背景色はエンジ

#contents_style {
width: 748px;
padding: 6px;
margin: 10px;
background-color: #990000;
}

それに対して、中のボックスは白

#contents_style div.step_area {
padding: 0px 10px 20px;
width: 564px;
background-color: #FFFFFF;
}

一番下にページトップ指定

#contents_style p.page_top {
margin-top: 10px;
}

これは普通にOK
白いボックスの中にページトップの画像を入れてもdiv.step_area内にpaddingを指定しているので、ページトップ指定の下に20pxの余白ができます。
同じサイト内で同じレイアウトだけど、白背景のボックスの余白指定が少しだけ違うために使いまわしができずに、上記と同じ事を、別のclassを作ってやってみたところ、マージン相殺に引っかかりました。

全体の指定は一緒。

それに対して、中のボックスは白

#contents_style div.area_box {
padding: 10px 10px 0px;
width: 564px;
background-color: #FFFFFF;
}

一番下にページトップ指定

#contents_style p.page_top {
margin-top: 10px;
margin-bottom: 20px;
}

同じことだと思うのですよ。
白い背景ボックスにpadding-bottom20px;でも、一番下に配置するページトップにmargin-bottom:20px;でも。
しかし…相殺が起こりました。
当然、上下指定が被るような事はしていません。

うがー、何故だぁーってなったんですね。

で、色々調べて分からず、ちょろっと仲間内に聞いてみたら…
このパターンもマージン相殺という事が発覚。
CSS2の仕様らしいっす。

ボックスを指定するときは、marginとpaddingの両方を指定する。
それは知ってたのですが、このマージン相殺、常に発生するわけではなく、それなりの条件をクリアすると発生するらしいです。

で、対応策としましては

margin指定ならpaddingに、padding指定ならmarginに、
相殺される箇所に1px指定してあげる。

普通に、難なくこれで直りました…。

上記ソースではどう直したかというと

それに対して、中のボックスは白

#contents_style div.area_box {
padding: 10px 10px 1px;
width: 564px;
background-color: #FFFFFF;
}

一番下にページトップ指定

#contents_style p.page_top {
margin-top: 10px;
}

これでOKです。
本当にパターンを知らないだけで初歩的なところに引っかかったな～と反省。

参考サイト　：　CSS2の仕様邦訳　マージンの相殺

気がつけば11月も終わる…
今年って…暇な時期が無いのは気のせいだろうか。。。
夏休みとかも、2回ほど延期になって、無理やりもぎ取ったし（汗）

まぁ、忙しいのはいいことだよね！
（結果的に、ここは放置状態になるけど）


さて、ずっと気になっていた表示崩れを直しました。
何が原因って、amazonの仕様が変わったのと、sbの仕様が対応されてなかったことです。
バージョンアップしてなかったしね～。
バージョンアップして、amazonの登録を全てやり直したら戻りました。

ふ～、何か面倒だった。
他のblogもsb使ってるから、暇を見つけて直さなくちゃ。

6月ですね～。
しかも中旬ですね～。

いや～、忙しかったんです。
今も忙しいのですが、本当に忙しくて、ここに書けそうなネタはあったのですが、書いている暇もないくらいで、結局何を書く予定だったのか忘れてしまいました…。。。


前回の書き込みが1月。
今6月。
半年もサボりましたか、自分。。。


コメントいただいた方、ありがとうございます。
こんなテキトーなメモですが、少しでもお役にたてて嬉しいです。



マイペース過ぎるメモ日記ですが、これからもちょっとお役に立てたら嬉しいです。

では、また何か躓いたら書こうとは思っていますので…
（取り合えず書けそうなネタがあるかだけは探してみます。）