タグメモのカケラ

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

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


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


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



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

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

新年明けましておめでとうございます。
本年もマイペース更新ですが、よろしくお願い致します。


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

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

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

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


しかし、仕事始め一発目でこんな事になるとは…
ちょっと幸先悪い？（苦笑）

ちょっと何時もとは違うジャンルなのですが、まさに今社内で起こった珍事だったので（笑）

後輩が突然「クロさん、画面が突然逆さになったんですけど！！」と大慌てで来たので、ちょっと見に行ってみたら本当に逆さに（笑）
180℃逆さですよ、マウスの動きとかも全部逆に動くの。
どうしたものかと再起動してみたものの直らず。
ちょっと検索かけてみたら、どうやら逆さにする機能があるらしいですね。

Ctrl＋Alt＋↑

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

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

しかし………
いったい何のための機能なのか不明ですが、ちょっとした珍事でした（笑）

IE6で画像の下に変な余白が入る事があります。
改行バグかな～と思って改行を取ってみてもなくならない。
CSSでmarginとpaddingを0pxにしてもなくならない。
どうしたものか…。

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

回避策：
vertical-align: bottom;

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

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

年末のお休みも近づいてきた事だし、勉強用に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サイト
秀和システム

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

ざっとあげただけでこの冊数。。。
本、買わないでいいじゃん…。
てか、年内に読み終わるかも不安になってきた（涙）

えっと…何ヶ月サボったのでしょうか。。。
最後の記事が9月20日なのですが。。。
う～ん、いけないいけない。。。

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

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

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

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

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

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


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

とりあえず、年末まで倒れないで乗り切るぞ～！

久々に引っかかったネスケの罠。
てか、有名なバグだよな～って後になって思い出したあたり、アタシの記憶力低下の危機だ！

さて本題ですが、ネスケで背景や背景色を指定した時に、ボックスの下までいかずに表示されている文字の部分の一番下とかで止まってしまうやっかいなバグがあります。
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行だから読み込みが重くなる訳でもないと思うし。

まぁ、解決方法が分かれば何て事は無いんだけど。。。
何でこうもブラウザっちゅうヤツはバラバラなんかな。
　

去年からずーっと後輩の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人で脱力してしまいましたが（笑）何とか無事解決ということで！
　

たまに、スクロールするとボーダーが消えてしまったり、点線だったはずが直線になってしまったりという事例がある。

また、高さを指定した要素の中にボーダーを指定した時もうまく表示されない事がある。

これを回避するには、ボーダーを指定しているのと同じIDやクラスに
position:relative
を追加すれば回避できる。
relativeは指定されたボックス内で相対的な位置を取る為、特に影響は起こらない。

　

ソフトの事をこっちに書くかどうか迷ったけど、お仕事の事だしと思ってこっちに書く事に。

先日、adobe製品のアップデート版を頂きCS3へとバージョンアップしたのですが、CS3の中でDreamweaverのソースコードビューがおかしな事に。

htmlやcssファイルを開くと、本来半角スペースなのに、凄いスペースが入っていたり、一部分をドラッグすると、文字が動いてうまく選択できなかったり。
入力したい部分にカーソルもってきて数字とか文字を入力すると、違うところに入力されたり。。。
でも、コピーしてテキストエディターで見ると、全然変なスペースとか入ってないの。

昨日は私だけだったんだけど、今日は後輩もこの現象になってしまい…
ソースは表示されているんだけど、この変なスペースと、ドラッグしたときに文字が動いてしまったりするのと、入力してるところと違う場所に入力されるのは、非常に作業効率が下がる！
という事で、Adobeに電話。
色々調べて頂いた結果、元々デフォルトでの表示崩れらしく、修正パッチが出る予定は無し。
うーん困った。

取り合えず、色々相談して調べて頂いてる途中で、回避策は見つかったものの…
アタシのPCでそれやると、凄い見難い現象になるんだよなぁ。
文字がガサガサに荒れてる感じになって、凄い読み難い現象になるんだが…
仕方ないか。。。

一応、回避策を載せておきます。
（アタシ達はこれで直りましたが、直らない場合もありますのでご了承下さい。）

環境設定のフォント部分で、コードビューのフォント指定をMS ゴシックにする。

これで100％直る保証はありませんが、私達はこれで何とか作業できています。
という事で、一応メモメモ。
　

追記：
この件に関して、朝からAdobeに問い合わせていたのですが、先ほどAdobeの方からご連絡があり、正式に不具合と認定された為、今後修正パッチがリリースされるとの事です。
何時出るかというのはまだ決まってないそうなのですが、今後リリースされる修正パッチに組み込まれるそうです。

また、当面の対応策として、MS Pゴシックのフォントサイズ8・11・14では、この現象が出ないので、そちらを使っていただければとも教えて頂きました！

AdobeのOさん、丁寧な対応ありがとうございました！！