タグメモのカケラ

タグメモのカケラ http://www.happy-crossing.com/tagmemo/ 簡単な事から微妙（？）な事まで、
コーダー黒木の覚え書きメモです。]]> ja http://www.happy-crossing.com/tagmemo/log/eid18.html RSSフィードをhtmlで表示させるお客様から、普通のサイトだけどhtmlにRSSフィードを表示させたい！とお話をいただき色々調べてみた結果、個人的にはFeed2JSが使いやすかったから... Feed2JSが使いやすかったからメモ。

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

あー、そろそろ新しいことができるようになりたいな～]]> Coding memo > blog 2009-05-26T16:11:53+09:00 黒木　一紗 Serene Bach 黒木　一紗 http://www.happy-crossing.com/tagmemo/log/eid17.html 新年明けましておめでとうございます。新年が明けてから13日も経ってしまいましたが…新年明けましておめでとうございます。今年も不定期更新過ぎるブログですが、よろしくお願いい...
新年明けましておめでとうございます。
今年も不定期更新過ぎるブログですが、よろしくお願いいたします。

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

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

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

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

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

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

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

では、今年もマイペースに頑張りますのでよろしくお願いいたします。]]> Books 2009-01-13T12:51:29+09:00 黒木　一紗 Serene Bach 黒木　一紗 http://www.happy-crossing.com/tagmemo/log/eid16.html マージンの相殺すごい初歩的なところで引っかかってしまったのでメモ。元々、上下に隣接するボックスにそれぞれmarginの上下を指定すると相殺されるのは知っ...
元々、上下に隣接するボックスにそれぞれ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の仕様邦訳　マージンの相殺

]]> Coding memo > CSS 2008-11-26T17:12:49+09:00 黒木　一紗 Serene Bach 黒木　一紗 http://www.happy-crossing.com/tagmemo/log/eid15.html 今年も後少し…って、いつの間に！気がつけば11月も終わる…今年って…暇な時期が無いのは気のせいだろうか。。。夏休みとかも、2回ほど延期になって、無理やりもぎ取ったし（... 今年って…暇な時期が無いのは気のせいだろうか。。。
夏休みとかも、2回ほど延期になって、無理やりもぎ取ったし（汗）

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

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

ふ～、何か面倒だった。
他のblogもsb使ってるから、暇を見つけて直さなくちゃ。]]> memo 2008-11-26T16:33:24+09:00 黒木　一紗 Serene Bach 黒木　一紗 http://www.happy-crossing.com/tagmemo/log/eid14.html 気がつけば今年も半年… 6月ですね～。しかも中旬ですね～。いや～、忙しかったんです。今も忙しいのですが、本当に忙しくて、ここに書けそうなネタはあったのですが... しかも中旬ですね～。

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

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

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

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

では、また何か躓いたら書こうとは思っていますので…
（取り合えず書けそうなネタがあるかだけは探してみます。）]]> memo 2008-06-19T17:50:59+09:00 黒木　一紗 Serene Bach 黒木　一紗 http://www.happy-crossing.com/tagmemo/log/eid13.html 突然フォトショップが起動しなくなる新年明けましておめでとうございます。本年もマイペース更新ですが、よろしくお願い致します。さて、今日から仕事始めなのですが、早速会社... 本年もマイペース更新ですが、よろしくお願い致します。

さて、今日から仕事始めなのですが、早速会社のPCを立ち上げたらフォトショップが立ち上がらない……。
何故でしょう。。。
年末までは普通に動いていたのに。。。
新年からボイコットなのでしょうか（涙）

取り合えず、色々と調べてみた結果、環境設定のファイルを作り直したら起動できました。

私の場合、WindowsXPでPhotoShopはCS3を使っていたのですが、フォトショップを起動すると、環境設定の項目で引っかかってその先に進まずに応答なしになっていたので、下記サイトのA-4. 環境設定ファイルの指示通りやったら復帰できました。

Windows XP でのシステムエラーまたはフリーズ発生時のトラブルシューティング（Photoshop CS3）

しかし、仕事始め一発目でこんな事になるとは…
ちょっと幸先悪い？（苦笑）]]> PhotoShop 2008-01-07T12:25:22+09:00 黒木　一紗 Serene Bach 黒木　一紗 http://www.happy-crossing.com/tagmemo/log/eid12.html Σ画面が突然逆さまに！ちょっと何時もとは違うジャンルなのですが、まさに今社内で起こった珍事だったので（笑）後輩が突然「クロさん、画面が突然逆さになったん...
後輩が突然「クロさん、画面が突然逆さになったんですけど！！」と大慌てで来たので、ちょっと見に行ってみたら本当に逆さに（笑）
180℃逆さですよ、マウスの動きとかも全部逆に動くの。
どうしたものかと再起動してみたものの直らず。
ちょっと検索かけてみたら、どうやら逆さにする機能があるらしいですね。

Ctrl＋Alt＋↑

これを押すと画面がクルっと逆さになります。
何かの拍子に押してしまったみたいで、普通にCtrl＋Alt＋↑をもう一度押したら直りました（笑）

間違っても、うちの後輩みたいに力技でモニターを回転しようとしたり、何とか見ようと首をギリギリまで曲げてみたりしなくても直りますので落ち着いてCtrl＋Alt＋↑を押してくださいね（笑）

しかし………
いったい何のための機能なのか不明ですが、ちょっとした珍事でした（笑）]]> memo 2007-12-20T18:10:24+09:00 黒木　一紗 Serene Bach 黒木　一紗 http://www.happy-crossing.com/tagmemo/log/eid11.html IE6で画像の下に余白が入る IE6で画像の下に変な余白が入る事があります。改行バグかな～と思って改行を取ってみてもなくならない。CSSでmarginとpaddingを0pxにしてもなくなら... 改行バグかな～と思って改行を取ってみてもなくならない。
CSSでmarginとpaddingを0pxにしてもなくならない。
どうしたものか…。

色々と試した結果、以下でなおりました。

回避策：
vertical-align: bottom;

ただ、全体にかけると高さが無い画像は今度は上が空いたりして使い勝手が悪いので、必要なところだけ指定するのをオススメします。

画像の下に何故余白が入るのかは分かりませんが、vertical-align: bottom;で縦位置を下基準にする事で回避しています。

注意：親ボックスなどではなく、画像自体にかけないとキキメはありませんので、imgタグに設定してください。]]> Coding memo > Windows IE > ～IE6 2007-12-10T17:00:25+09:00 黒木　一紗 Serene Bach 黒木　一紗 http://www.happy-crossing.com/tagmemo/log/eid10.html そろそろ… 年末のお休みも近づいてきた事だし、勉強用にCSSの本を何冊か購入しようかと思ったのですが、本棚を見つめてやめました。気が付けば、読んで... 気が付けば、読んでいないCSSの本が何冊もある！
どうも通勤中は気持ちの切り替えってのもあって、マンガか小説を読むか、DSをやってしまうのですよ。。。
てか、その時間帯しかできないのですよね、そういう事って。

うーん、やっぱりダメダメだぁ。。。
計画性を持って購入しないからこういう事になるんですよね（反省）
読んでみたい！という衝動だけで購入するのは危険だと学習しました（遅い）

とりあえず、家にあるけど読んでいない本リスト。: ちゃんとCSSするためのスタイルガイド入門 (スタイルシートスタイルブック (2))
翔泳社

ずっとちゃんと読まなきゃ！って思って、さわりしか読んでない本。。。
ダメダメだなぁ。

Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。
インプレスジャパン

下のと2冊一緒に購入したのに、本棚をカラフルにしただけという…。
年内には読まないと…。

Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。
インプレスジャパン

こっちに至っては、開いてもいない（最低）

速習Webテクニックスタイルシート上級レイアウト (Quick Master of Web Technique)
技術評論社

この本は、新しい辞書っぽい本が欲しくて購入したんだけど、ちっとも活用できていないのは、中にどんな事が書いてあるか分かって無いからなんだよね…。
きちんと目を通さないと…。

なんとなく、こっちも中途半端だったな～。: DREAMWEAVER8による至極のCSSレイアウトデザイン! パーフェクトブック。
ソシム

DWのCSSに対する認識とか、どのくらいまでプレビューに反映されるのかとか、そういうのが知りたくて買ったんだけど、パラっと見ただけ…（意味なし）

スタイルシート・デザイン XHTML + CSSで実践するWeb標準デザイン講座
MdN

一時期、標準という言葉に弱かった時期に購入した1冊。
何で同じようなのが何冊もあるんだ…。

スタイルシート・ステップアップ・アレンジブック―基本とそのバリエーションでマスターするCSS活用術
毎日コミュニケーションズ

あー、これに至っては、何で買ったのか覚えてない…。
取り合えず、辞書っぽいのが必要だったのかな？
でも、あまり使えず。。。

こっちもちゃんと読み返さないと: Designing with Web Standards―XHTML+CSSを中心とした「Web標準」によるデザインの実践 (Web designing books)
毎日コミュニケーションズ
CSSをやるにあたって、一番最初に読んだ本がコレだった記憶が…。
正直、何が何だか分からなかった。。。
でも、先輩の推薦本だからと思って必死に読んだんだけど、結局意味分からないまま読んでたので、あまり覚えてない。

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
秀和システム

部分的には何度も読んでる。
でも、全体を通して読んだ事無いなぁ。
これも一度読み返す必要ありそう。

ざっとあげただけでこの冊数。。。
本、買わないでいいじゃん…。
てか、年内に読み終わるかも不安になってきた（涙）]]> Books 2007-11-16T13:57:16+09:00 黒木　一紗 Serene Bach 黒木　一紗 http://www.happy-crossing.com/tagmemo/log/eid9.html Saturday Night Webder！えっと…何ヶ月サボったのでしょうか。。。最後の記事が9月20日なのですが。。。う～ん、いけないいけない。。。別に書くネタが無かった訳で... 最後の記事が9月20日なのですが。。。
う～ん、いけないいけない。。。

別に書くネタが無かった訳ではないのですが、こちらまで手が回らずに、結局放置。
当初の目的を失いつつある感じが、相変わらず私らしいブログですね。（ぇ）

さて、先日、グループ会社の社長からのお誘いもあり、Saturday Night Webder！に参加してみました。
今をときめく？Six Apartの上ノ郷谷太一氏のスペシャルトーク、面白かったです。
CSSNoteみたいなノリなのかと思いきや、全然違う感じで、デザインとは何か？みたいな事をスライドを交えつつのお話でした。

渋谷のクラブで開催されたこのイベント。
正直、ちょっと気が引けたというか、足が向かなかったのですよ、場所柄的にも。
でも、社長がお金を出してくださるという事と、後輩1人で乗り込んだら辛かろうと思って参加したのですが、予想以上に楽しかったです。

全体的な印象としては、何をもってデザインというか。
見えているところだけがデザインではないという事でした。
私は、デザイナーという職種ですが、メインはコーダー。
名刺に書かれたデザイナーという言葉に戸惑う事も多いんです。
私はデザインをしているのではなくて、組んでいるだけなのに。。。と。
その戸惑いが、時に不安になる事もある。
組むという事は正直誰でも出来る。
デザインは技術のほかにセンスやら感性も問われるけど、コーダーは知識さえあれば出来てしまう。
誰でも出来る事を仕事にしている不安感や危機感。
そんなのと隣り合わせになってしまう時も正直あります。

でも、今回のお話を聞いて、自分の仕事に少し自信が持てました。
情報をデザインする。
何も見栄えだけでは無いんですよね。
もっともっと内側を追求する事だってできる。
それに気が付かせてもらえただけでも、今回のイベントは行って良かったな～って思いました。
正直、ちょっと悩んでいましたので。

今回お話された事は、手帳にちゃんとまとめておこうと思っています。
また不安に思う事があっても、これを読んで頑張ろう！って思えるように。

もし行かれた方いましたら、お疲れ様でした。
もしかしたら名刺を交換させて頂いているかもしれないですね。
また何処かでお会いできたら、ぜひ声をかけてください。
中々小心者で、自分から声をかけるのが苦手なものですから…。
今回出会えたつながりも大切にしつつ、お話の内容を胸の内にとめて、日々頑張ります！

とりあえず、年末まで倒れないで乗り切るぞ～！]]> Event 2007-11-14T18:34:16+09:00 黒木　一紗 Serene Bach 黒木　一紗