Webfactory - BLOG

テーブルを使わずにレイアウトを組むということに多少抵抗があったが理解すればこちらのほうがいい感じに仕上がる、デザインチェンジも楽々。中身とデザイン部分を完璧に切り離すことでプログラマーとの連携も取りやすくなるんだろうなぁ～。

ひとつだけ欠点があるとすれば複雑なレイアウトの場合はブラウザによって切り捨てる必要のあるものが出てくること、もちろん振り分けを使えばいいわけだが誰かひとつに統一してくれぃ！携帯もブラウザもOSも！

おお、なんということだ、CSS.難しい...。無謀にもCSSでNoTABLEデザインだぁ～！と変更に踏み切ったものの、見苦しい様に...。XHTML1.0準拠で作ろうと思っているのだが、1.1のいずれ変更するためにも廃止属性だけは使用しないで作成する必要がある。以下は、ちょっと注意するべき点があるので自分用のメモとしての覚書。

今現在、このサイトをテーブル多用スタイルからテーブルを一切使わない、XHTML1.0＆CSSスタイルに移行中です。現在30％という所ですが、サーバーのHTMLを直接編集しているので、移行をリアルタイムで味わえます。なにも面白いことは無いんだけどこんなことする人いないでしょうから興味ある人は見てみてください。サイト全体ですのでどこを変えているかは本人の気まぐれです。全てを変えてからアップするというのが普通であって、通常こういうことはタブーですが、自分のサイトということで....

ふぅ、やはり一筋縄ではいかないようだ、大体のページ構成は出来たものの全ページの移行となると結構しんどい。この点を考えたらMTは何て便利なんだと思ってしまう。手のかかる部分はあるものの、所詮、4,5ページのフォーマットを変えるだけで何ページあろうが全てを変更できる。

大体の構成を作成初期に図にしてみたのだけど、こんな感じになっている。ネットを見回って作ったものだからどれが正解なんてわからない、実用レベルに達しているのかは完成してブラウザチェックしてみないと何とも言えないところ....

スタイルシートデザインがこんなに楽しいとは...久しぶりのタグ打ちは楽しい、なんだか昔iMacでSimpleTextでHTMLをいじってた頃を思い出す。純粋に楽しかった.....そんな気持ちなのでついついこんな時間まで作業してしまった。とりあえず早く寝ないと...。そんなスタイルシートだけど今一つかめていない部分も多い、やはりまだまだ勉強あるのみ！

そう考えると現在のテーブルレイアウトに飽きていたんだなぁと気付く。この楽しさは、そう、新鮮味に他ならない。初めてHTMLをいじっていたころの新鮮味をいまスタイルシートで味わっているからこんなにも楽しいのだ。

CSSでデザインをしていると、とてもデザインの変更が楽になる。ということは良く聞いていた、今までは行間や文字サイズ、テーブル背景やリンク設定、それぐらいにしか使用していなかった、いや使用出来なかった。しかし！CSSでオールデザインしていくうちに自分の未熟さから、この使い方は違っていたと思うところも出てくる、で、その修正をしているとその素晴らしさに気付いた。

CSSの切り替えを考慮しながら作っているとややこしくなってくる、CSSはとりあえずNETSCAPE4.7以下は無視の方向で作成。で、とりあえずは「小」「大」は置いといて、一つの基本をしっかり作る。切り替えはCSSだからこそ出来る利点なので、デザインチェンジや今までのフォントサイズ変更として使用したい。

タイトル周りをｈ1タグに修正。

a name="top" を div id="top" に変更すると、とりあえずエラーは出なくなった、しかしこれはXHTML1.1からで1.0では推奨されていない。

brタグにクラスを当てるとエラーが出た。

プログラミングってやったことある人はわかると思うけど、ソースのどこかに間違いがあればエラーが返りますよね？はっきりと行まで指定して...HTMLでもタグの閉じ忘れとかすぐに見つけられるのだけど（もちろん慣れているというのが大きい）スタイルシートの場合エラーが見つけにくい...。

WindowsのIE6.0、いっちばん標準のはずのブラウザに悩まされる。CSSでの細かなエラー、気になっていた画像周りのPaddingはこのサイトのおかげで解決した....かと思われた。事実画像問題は解決したものの、新たな小さなエラーが出てきた。フォームの背景色が適用されなくなったり、ワンポイント画像が表示されなくなったりと、もう訳わかりません...。

これでもかというくらいIEの文書型宣言について探し回った結果、IE6.0のDOCTYPEはいい加減だということがわかった。スタイルシートでレイアウトする以上避けては通れない道、ということで正攻法（標準準拠モード）でいくことにしよう。

IEとOperaでの背景画像表示に僅かなズレが出る。

1pxではあるが、レイアウトする上で非常に厄介な問題。レイアウトは以下の図のように780pxの幅に900pxの背景画像を指定し、それを中央で揃える。ここで幅100％指定のHEADER部分に900pxの背景画像を指定するんだけど下のLAYOUTとの中央揃えが1pxズレる。しかもIEとOperaでのズレが互いに微妙で、ブラウザのウィンドウサイズを大きくすると、片方がズレ、小さくしても又同じ。CSSでもIE部分に合わせようとするとOperaがズレ、その逆もまた同じ羽目に。結局わからないので中央揃えをやめることになった。なんなんでしょうね、これ。

スタイルシートでのメニューを作成する場合、私はよく display : block を使用してメニューを作る。利点はテキストだけでなく、その周りに指定した大きさ全部にリンクを当てることが出来るからだ。その簡単な擬似ボタンをお手軽に作成する時に少し注意点がある。それは<a>というインライン要素に対してblock指定とwidthを指定する必要があるということだ。ここで<a>に対してwidthを指定していない場合はテキスト部分のみにしかリンクが当たらず、残りの余白はただの飾りになってしまう。（注）あくまでIEでのハナシです（OperaやNetscapeでは問題ない）

MyBlogListなどの外部からの読み込みJavaScriptは、基本的にはどういった内容のHTMLソースが流れてきているのかはわかりません。ウェブページでURLを入力してソースを表示させるサイトなどを利用すれば読めるようですが、簡単なものなので大体は推測できます。CSSでのBLOCKメニューが好きな私としては同じようにBLOCKメニューで表示したかったのですが、どうやらBR（改行タグ）と、BLOCKという二つのブロック要素がぶつかり合い、強制的に二回改行されることになっていました。

スタイルシート移行作業する際に一番手間取ったのがボックス中央配置。手間取ったというか、文字列についてはほぼ諦めモードに...。テーブルの場合は高さ・幅を指定してその中にテキスト・画像のいずれかを配置、でTDに align=center 、これだけでど真ん中配置は実現できる。しかしCSSの場合はボックス指定したなかに文字・画像を放り込むと、ボックス上部にデフォルトで指定されてしまう。画像についてはStykesheetStylebookに素晴らしいアイデアがあったので解決したが、文字列は依然未解決。

中央配置のサンプル

テーブルから移行の際に良くある複数行2列の表の記述にテーブルを使っていた。せっかくCSSでオールデザインするんだから、きっちりと定義リストを用いてテーブルっぽいものを書きたいものだ。標準の見栄えでも見れないこと無いけど何のためのCSSや！というわけでとりあえずテーブルに見えるようなDLタグを使用してのCSSを作ってみました。当然のごとく化石のようなブラウザは無視してます。

眠たい頭で何時間考えようが、同じ場所をぐるぐる回るだけになるということに気が付いた。今日の目覚めからすっきりした頭で考えたら少し前進、というわけで昨日の続き。基本的に考え方を間違えていたと思う。まず、大きさを固定していたので使い道は浅く、floatやpositionにこだわりすぎていた。今回はmarginとpaddingを使用して、全て相対指定でテーブルを作ってみた。あくまで完全ではないけどそこそこ使えそう。確認は全て最新ブラウザのWIN・IE/Opera/Netscape　Mac・IE/Safariなど。

ある程度抵抗なく組める様にはなってきたものの、どうにも納得いかないことが多いCSS。スタイルシートは静かに狂うでも書いたけどなんとなくおかしい...全く同じソースなのにページごとに違うなどの不可解なエラーが多いような気がする。注意したい点がいくつかあるので忘れないようにメモメモ...

ULタグ
おなじみのリストなわけだが使い方を間違えるとレイアウトを壊す原因になるかも。マージンや余白を０にして使用する場合はいいんだけど、なぜか指定した場合に変な場所に表示されることがある。

addressタグ
よくわからないがブロック要素のなかに入れると周りを壊してしまう場合あり。
インライン指定して使用しても場合によってはおかしな表示になることも...。

Pタグ
この中にブロック要素をぶち込むとaddressの場合とと同じくPが壊れる。

これはcssの勉強と言うよりも基本的なHTMLを勉強したほうがよさそうだなぁ。

よくあるネタですが、自分なりにCSSでの角丸ボックスを作ってみた。DIVタグを３つも使用しているので抵抗ある人は多いかも知れませんが、枠を作って「この中にはなんでも放り込める」という状態を作りたかったのでこういう形になってしまった。一応クリスマスイブということで丸各画像を含めたファイルセットをダウンロードできるようにしています。

乏しい読解力で海外サイトを廻って見つけた久しぶりのCSSネタ。おなじみのa:hoverはIEの場合 a 属性以外には効果が無い（ZSPC：hover対応表）これを有効にするスクリプト「csshover」というスクリプトを配布している「Peterned」というサイトがある。javascriptでのhoverもいいけど一括指定でhoverが使用できる点から、こちらのほうが便利かなと...。

最近CSSで気になるミスというか注意点。

• 言わずもがな数字から始まるIDやClassは禁止


• 背景画像の位置指定で、left/center/right/bottom などと px指定、%指定などを混ぜてはいけない。IEやFirefoxではOKでもOpera,Safariなどでは乱れる。


• よくある背景画像をタイトルにするテクニックでは、text-indent にて吹き飛ばすテキストがリンクの場合、text-decoration:none にしておかないと、Firefoxにてリンク下線が画面上に伸びることがある。というかなるべくなら飛ばさずに、spanで内側を囲ってdisplay:noneで消したほうがいい。使用場所によってはIEで変な表示になることも...


• 画像をhoverしたときにbackground-positionでずらす方法はIEでちらつく場合あり、どれもこれもIE７が出れば解決することなのだが....

CSSレイアウトで一番厄介なfloat。これの解除方法は基本的にclear="both"を使う方法と、ハックして解除する方法の２種類あるけどなるべくなら楽チンな方がいいですよね。最近はCSSで組むようになってすっかりテーブルレイアウトが面倒になった。で、回り込みを解除するときにはいつも空のdivタグにclearを効かせる方法をとってたけど、最近はh2とかh3などのブロック要素にclearを当てて回り込み解除しています、解除すべきところに意図的にそれを挿入したりして。

要は空タグは気に入らないとか、brにclearを当てるのは改行が入るので嫌だとか、そんなことはホームページのアクセス数などに一切関係なかったりするんだけど、こだわりたいところだとも思う。皆さんどうやってます？やはり定義したハックを使いまわすほうがいいのかな、とか思ったりもするけど見出しタグで事足りるなら、それはそれでオッケーだよね？

CSSファイルは書いていくたびに行数が増えて（当たり前だ）わけわからなくなることが多いので少しでも減らしたいところ。代表的なのは下のアスタリスクで最初に全てのマージン・余白を消してしまう方法だろう。

* {margin:0;padding:0;}

今回はロールオーバーに関してのCSS削減

背景画像をずらすCSSのロールオーバーは便利なので良く使う。きちんと作っておけばいろんなところにコピペで貼り付けられてすぐに使える。そんな最近よく使うCSSロールオーバーを使っていて気が付いたこと。いつもこんな感じでクラス指定したPタグの中にAを入れて、その中にSPANを入れるようにしているんだけど、

<p class="link_index"><a href="xxx"><span>リンク先</span></a></p>

p.link_index { margin:10px 0; }　←特に意味なし、その時々に応じて

p.link_index a {
display:block;
background: url(img/link_index.gif) no-repeat ;
height: 100px; ←（二つくっつけたボタン画像の半分の高さ)
width: 100px;
}

p.link_index a span { display:none; }
p.link_index a:hover { background-position: center bottom; }

この記述で１セット。しかしこの下二つの p.link_index a span と p.link_index a:hover はクラスごとにいちいち記述する必要があるので面倒。でもよく考えたら a span と a:hover の二つで一括してしまえばいいじゃぁないかと・・・なんで気付かなかったんでしょう。ただし当然のごとく a:hover に使用する場合はすべてのロールオーバー構造を同じ仕様にまとめる必要アリ。

a span { display:none; }
a:hover { background-position: center bottom; }

ということでこの二つを記述しておけばいちいち p.link_index a span と p.link_index a:hover のような個別の指定をせずに済むので少しCSSファイルの削減に役立つ。

a のなかに span が入ることは自分の中ではロールオーバーを使用する以外に無いので良し。a:hover も背景画像位置を数値で固定している場合はおかしなことになるのでその場合は !important でその部分の hover を固定すればオッケー。

自分の場合はよく ul li a に矢印などの背景画像を左隅微妙位置固定で使用することが多いのでそこ注意...と。以上久しぶりの長文、結構しんどいぞ。