どうも通勤中は気持ちの切り替えってのもあって、マンガか小説を読むか、DSをやってしまうのですよ。。。
てか、その時間帯しかできないのですよね、そういう事って。
うーん、やっぱりダメダメだぁ。。。
計画性を持って購入しないからこういう事になるんですよね（反省）
読んでみたい！という衝動だけで購入するのは危険だと学習しました（遅い）
- とりあえず、家にあるけど読んでいない本リスト。
速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)
技術評論社
この本は、新しい辞書っぽい本が欲しくて購入したんだけど、ちっとも活用できていないのは、中にどんな事が書いてあるか分かって無いからなんだよね…。
きちんと目を通さないと…。
- なんとなく、こっちも中途半端だったな～。
DREAMWEAVER8による至極のCSSレイアウトデザイン! パーフェクトブック。
ソシム
DWのCSSに対する認識とか、どのくらいまでプレビューに反映されるのかとか、そういうのが知りたくて買ったんだけど、パラっと見ただけ…（意味なし）
スタイルシート・ステップアップ・アレンジブック―基本とそのバリエーションでマスターするCSS活用術
毎日コミュニケーションズ
あー、これに至っては、何で買ったのか覚えてない…。
取り合えず、辞書っぽいのが必要だったのかな？
でも、あまり使えず。。。
- こっちもちゃんと読み返さないと
Designing with Web Standards―XHTML+CSSを中心とした「Web標準」によるデザインの実践 (Web designing books)
毎日コミュニケーションズ
CSSをやるにあたって、一番最初に読んだ本がコレだった記憶が…。
正直、何が何だか分からなかった。。。
でも、先輩の推薦本だからと思って必死に読んだんだけど、結局意味分からないまま読んでたので、あまり覚えてない。
ざっとあげただけでこの冊数。。。
本、買わないでいいじゃん…。
てか、年内に読み終わるかも不安になってきた（涙）]]>- http://www.happy-crossing.com/tagmemo/log/eid9.html
Saturday Night Webder！ えっと…何ヶ月サボったのでしょうか。。。最後の記事が9月20日なのですが。。。う～ん、いけないいけない。。。別に書くネタが無かった訳で...
う～ん、いけないいけない。。。
別に書くネタが無かった訳ではないのですが、こちらまで手が回らずに、結局放置。
当初の目的を失いつつある感じが、相変わらず私らしいブログですね。（ぇ）
さて、先日、グループ会社の社長からのお誘いもあり、Saturday Night Webder！に参加してみました。
今をときめく？Six Apartの上ノ郷谷太一氏のスペシャルトーク、面白かったです。
CSSNoteみたいなノリなのかと思いきや、全然違う感じで、デザインとは何か？みたいな事をスライドを交えつつのお話でした。
渋谷のクラブで開催されたこのイベント。
正直、ちょっと気が引けたというか、足が向かなかったのですよ、場所柄的にも。
でも、社長がお金を出してくださるという事と、後輩1人で乗り込んだら辛かろうと思って参加したのですが、予想以上に楽しかったです。
全体的な印象としては、何をもってデザインというか。
見えているところだけがデザインではないという事でした。
私は、デザイナーという職種ですが、メインはコーダー。
名刺に書かれたデザイナーという言葉に戸惑う事も多いんです。
私はデザインをしているのではなくて、組んでいるだけなのに。。。と。
その戸惑いが、時に不安になる事もある。
組むという事は正直誰でも出来る。
デザインは技術のほかにセンスやら感性も問われるけど、コーダーは知識さえあれば出来てしまう。
誰でも出来る事を仕事にしている不安感や危機感。
そんなのと隣り合わせになってしまう時も正直あります。
でも、今回のお話を聞いて、自分の仕事に少し自信が持てました。
情報をデザインする。
何も見栄えだけでは無いんですよね。
もっともっと内側を追求する事だってできる。
それに気が付かせてもらえただけでも、今回のイベントは行って良かったな～って思いました。
正直、ちょっと悩んでいましたので。
今回お話された事は、手帳にちゃんとまとめておこうと思っています。
また不安に思う事があっても、これを読んで頑張ろう！って思えるように。
もし行かれた方いましたら、お疲れ様でした。
もしかしたら名刺を交換させて頂いているかもしれないですね。
また何処かでお会いできたら、ぜひ声をかけてください。
中々小心者で、自分から声をかけるのが苦手なものですから…。
今回出会えたつながりも大切にしつつ、お話の内容を胸の内にとめて、日々頑張ります！
とりあえず、年末まで倒れないで乗り切るぞ～！]]>- http://www.happy-crossing.com/tagmemo/log/eid8.html
ネットスケープで背景がボックスの下まで表示されない 久々に引っかかったネスケの罠。てか、有名なバグだよな～って後になって思い出したあたり、アタシの記憶力低下の危機だ！さて本題ですが、...
さて本題ですが、ネスケで背景や背景色を指定した時に、ボックスの下までいかずに表示されている文字の部分の一番下とかで止まってしまうやっかいなバグがあります。
divで囲ってるにも関わらず、余白とかを認識してくれないのか、背景画像が途中で切れたみたいになってしまう。
背景色もそう。
2カラムで高さが違うときとか、背景画像で背景色を対応したりするんだけど、そういう時もネスケだけは途中で表示されなくなってしまうんだよね。。。
文字や画像などの内容がある部分までしか背景画像や背景色が表示されない。
そんな時は、CSSの指定にマージンとボーダーの指定を入れてください。
例）2カラムで、全体に背景を指定
#contents {
width: 780px;
background: url(images/contents_bk.gif) top left repeat-y;/*ここで全体にかかる背景指定*/
margin: 0px;
padding: 0px;
border-bottom: 1px solid #FFFFFF;/*ネスケ対策*/
}
#left {
margin: 0px;
padding: 0px;
width: 200px;
float: left;
}
#right {
margin: 0px;
padding: 0px;
width: 580px;
float: right;
}
これを入れる事によって、背景が指定したdiv全体に表示されます。
背景画像や背景色をdivでボックス指定する時には、マージンが0pxだろうと入れてあげる癖をつけるといいかも。
別に入れてもソースが増える以外の害は無いし、たった1行だから読み込みが重くなる訳でもないと思うし。
まぁ、解決方法が分かれば何て事は無いんだけど。。。
何でこうもブラウザっちゅうヤツはバラバラなんかな。
]]>- http://www.happy-crossing.com/tagmemo/log/eid7.html
フロートを組むと、IEで文字の一部が下に複製される 去年からずーっと後輩のNちゃんと悩んでいた事。それはフロートを組んだときに、右側のボックスエリアにある文字の一部が下に複製されてしま...
当時色々と調べたんだけど解決策が見つからなくて、妥協策として<div class="clear"></div>という空のdivを入れてみたり、スペースを入れて複製を見えなくさせてみたり、CSSで高さを指定して消えたこともあったりと…
何ともいい加減な対応しか出来なくて…。
一番まともな（この中では）空のdivを入れるのも、複製は止められなくて、下に変なマージンが空いてしまったり…。
出るときと出ないときがあって、原因も分からないまま半年以上過ぎていたのですが、今回同じ現象が今やってる案件で起こって、丁度時間もあったので色々と本腰を入れて調べてみた結果、やっと原因が分かりました。
これが何て事は無い原因で…。
問題はCSSではなく、htmlにあったのです。
原因：
フロートのボックス指定の間に2行以上のコメントタグを入れると発生する。
言葉で説明しても何のこっちゃ？って感じだと思いますので、サンプルソースを。。。
- CSSの指定
- #left {
margin: 0px;
padding: 0px;
width: 300px;
float: left;
}
#right {
margin: 0px;
padding: 0px;
width: 500px;
float: right;
} - htmlの指定
- <!--left area Start -->
<div id="left">
<p>こちらは左側です</p>
</div>
<!--left area End -->
<!--right area Start -->
<div id="right">
<p>こちらは右側です</p>
</div>
<!--right area End -->
と、このように組むと発生します。
それは、
<!--left area Start -->
<div id="left">
<p>こちらは左側です</p>
</div>
<!--left area End -->
<!--right area Start -->
<div id="right">
<p>こちらは右側です</p>
</div>
<!--right area End -->
太字の所、ここに2行のコメントタグが入っているから。
このコメントタグの行数が多ければ多いほど、複製される文字数も増えます。
これを
- htmlの指定
- <!--left area Start -->
<div id="left">
<p>こちらは左側です</p>
</div>
<!--left area End -->
<div id="right">
<!--right area Start -->
<p>こちらは右側です</p>
<!--right area End -->
</div>
と、してあげると、html上で連続したフロート指定のボックスとボックスの間にコメントは1行なので、複製される現象は起こりません。
ただ、これだとコメントをつけるルールが曖昧というか中途半端なので、
- htmlの指定
- <div id="left">
<!--left area Start -->
<p>こちらは左側です</p>
<!--left area End -->
</div>
<div id="right">
<!--right area Start -->
<p>こちらは右側です</p>
<!--right area End -->
</div>
このように、コメントタグはdivで指定したボックスの内側にいれてあげれば、複製の心配も無く、コメントをつけるルールも統一できます。
まさかこんな原因だとは思わず、後輩と2人で脱力してしまいましたが（笑）何とか無事解決ということで！
]]>- http://www.happy-crossing.com/tagmemo/log/eid6.html
IEで、ボーダーがうまく表示されない たまに、スクロールするとボーダーが消えてしまったり、点線だったはずが直線になってしまったりという事例がある。また、高さを指定した要...
また、高さを指定した要素の中にボーダーを指定した時もうまく表示されない事がある。
これを回避するには、ボーダーを指定しているのと同じIDやクラスに
position:relative
を追加すれば回避できる。
relativeは指定されたボックス内で相対的な位置を取る為、特に影響は起こらない。
]]>- http://www.happy-crossing.com/tagmemo/log/eid5.html
DreamweaverCS3のコードビューでの変な動き ソフトの事をこっちに書くかどうか迷ったけど、お仕事の事だしと思ってこっちに書く事に。先日、adobe製品のアップデート版を頂きCS3へとバージ...
先日、adobe製品のアップデート版を頂きCS3へとバージョンアップしたのですが、CS3の中でDreamweaverのソースコードビューがおかしな事に。
htmlやcssファイルを開くと、本来半角スペースなのに、凄いスペースが入っていたり、一部分をドラッグすると、文字が動いてうまく選択できなかったり。
入力したい部分にカーソルもってきて数字とか文字を入力すると、違うところに入力されたり。。。
でも、コピーしてテキストエディターで見ると、全然変なスペースとか入ってないの。
昨日は私だけだったんだけど、今日は後輩もこの現象になってしまい…
ソースは表示されているんだけど、この変なスペースと、ドラッグしたときに文字が動いてしまったりするのと、入力してるところと違う場所に入力されるのは、非常に作業効率が下がる！
という事で、Adobeに電話。
色々調べて頂いた結果、元々デフォルトでの表示崩れらしく、修正パッチが出る予定は無し。
うーん困った。
取り合えず、色々相談して調べて頂いてる途中で、回避策は見つかったものの…
アタシのPCでそれやると、凄い見難い現象になるんだよなぁ。
文字がガサガサに荒れてる感じになって、凄い読み難い現象になるんだが…
仕方ないか。。。
一応、回避策を載せておきます。
（アタシ達はこれで直りましたが、直らない場合もありますのでご了承下さい。）
環境設定のフォント部分で、コードビューのフォント指定をMS ゴシックにする。
これで100％直る保証はありませんが、私達はこれで何とか作業できています。
という事で、一応メモメモ。
追記：
この件に関して、朝からAdobeに問い合わせていたのですが、先ほどAdobeの方からご連絡があり、正式に不具合と認定された為、今後修正パッチがリリースされるとの事です。
何時出るかというのはまだ決まってないそうなのですが、今後リリースされる修正パッチに組み込まれるそうです。
また、当面の対応策として、MS Pゴシックのフォントサイズ8・11・14では、この現象が出ないので、そちらを使っていただければとも教えて頂きました！
AdobeのOさん、丁寧な対応ありがとうございました！！
]]>
