2003/05/06
スタイルシートに関するメモ
今回のリニューアル作業をしていた時、スタイルシートに関していろいろ気付いたことがあったのでメモ。
■マルチカラム
今回、上2カラム＋下2カラムをスタイルシートで作ってみました。マルチカラムを下方向に複数並べていくというレイアウトは、横方向の各カラムの高さを「height」で限定すれば（こういう時は行数から換算できるemが便利?）実現できるかも。ただ、このページのトップの右上のような食い込みは、TABLEのようにはうまくいかなさげ。
マルチカラムは「width xx% ;position : absolute ; left : xx%;」をやめて、「width : xx% ;float : left ; inset」を使いました。MovableTypeのデフォルトのスタイルシートはこっちなんですが、borderの装飾などをいれたら、うまくいかなかったので、positionを使っていました。でも、絶対位置指定だと、ブラウズサイズが変わっても、うまく反映されないことが多いので、floatのほうがいいみたい。positionでかつpx指定していると、640x480などでは崩れると思われます。
追記：「position : absolute ;」をすべてのレイヤーに使うとうまくテキスト選択ができなくなるみたいです。リンクを張らずにURLだけ表記した時など大変不便なので、なるべく片側だけに使うのをお勧めします。
■横スクロールバーが出てしまう
NetscapeやMacintoshなどで横スクロールバーが出てしまい、悩んでいたんですが、なんでこれが出るのかやっと理解。IEとNetscapeではBOXの解釈が違うんですね。
IEとNNのBOXの計測方法の違いについて ［from DFJ indexより］
違いはすごく面倒なので上のサイトを読んでもらうとして、カラムを構成する基本レイヤー（MovableTypeならCLASS「links」「content」）は、margin、paddingともに0pxを指定しておくほうが良いみたい。MovableTypeの基本スタイルシートはその辺の違いをあんまり意識していなので気付かなかったですよ。
でも、0pxを指定しても、横にborderを追加したりすると、また解釈が違ってしまい、横にはみ出てしまいます。
それとwidthは必ず指定しましょう。widthを指定しなくても自動的に幅を決めてくれるのはWindowsのIEのみで、NNやOperaでは横に伸びてしまいます。
■Opera対策
マウスカーソルをリンクの上に置いた時、2px/dashedのBorderによる下線をつけていたんですが、このせいでOperaでひどいことになっていたそうです。Doodleで書かれなかったら、気付かなかったですよ。Opera6で確認していたんですが、再度過去のフォーマットでみてみたら、コメント部分のリンクにカーソルを乗せると思いっきり崩れました…。
IEとOperaで「Border : dashed ; 」の表示が結構違っていて、2px以上だとずれが目立つのが原因みたい。それと、Operaではコメント部分のタイトルの幅が文字量のみになって、右側がでこぼこになっていたんですが、これはwidthを指定してなかったためでした。この両方のためにあのひどいレイアウト崩れが発生したと考えられます。
Operaユーザーの方、今まで申し訳ありませんでした。Operaで個別記事の左肩に使っているJavaスクリプトのエラーも解決させましたんで許してください。OperaがJAVAスクリプトの解釈に厳密だったので動かなかったというオチ。
スタイルシートは複雑なので何か勘違いしている可能性もなきにしもあらずなので、間違っていたらすいません。
関連：情報がよくまとまっているサイトを。
FAQ@CSSスレ - Web制作板@2ch テンプレWiki
CSSのQ&A
−この記事に関連しているかもしれない書籍−
TrackBackは一言メッセージみたいにも使えるんですね。サイトは面白ニュース系みたいで面白かったです。
こちらにもサイトがあるんですけど、使い分けされているのかな?
http://www.x51.org/index.cgi
>こちらにもサイトがあるんですけど、使い分けされて
るのかな？
いえ、そちらはMT導入前の旧サイトでして、ただ消すの忘れてただけでした（笑）
MacIEだと豪快にレイアウト崩れるに悩んでたところでこのアーカイブを見させてもらって参考になりました。Paddingは奥が深いですね。。。
サイトはいつも見させてもらってますので、
またよろしくです。
はじめまして。いつも楽しい話題で良く読ませてもらってましたが、この記事は未チェックでした。マルチカラムの件ですが、floatはfloatで崩れ方が激しいブラウザが多いと思いますよ。現状のスタイルだと、IE5.5、横800pxで既にカラムが崩れます（5.5ももうすぐサポートが終わってしまいますが）。ちなみに、position: abslute;では、カラム幅の合計を100%にしないことです。３０％＋６５％くらいです。また、leftではなくright: 0px；を使えば、右端を固定できますし、640px以下の相当小さなウィンドウでも、横スクロール無しにできますよ。うちのstyles-site.cssは参考になると思います。もうちょっと楽できると思いますよ。もっとも、tableや画像などの置換要素があると、崩れるのはどうしても避けられないでしょう。画像はできるだけbackgroundにしてしまうとか（画像が切れますが、そのほかの部分は収まりやすくなります）。ところで、position:absoluteで、文字選択ができなくなるというのはどういう場合でしょうか？ ちょっと知りたいところです。
あいはらさんのサイトへのリンクが入ってなかったので、修正させていただきました。
IE6でも横800px以下だと崩れるのは気付いていたんですが、対処方法が思いつかなくて放置してました。
position:absoluteを使って、下のカラムはVGAでも崩れないようになりましたが、上のカラムは写真のせいで800pxが限界のようです。合計100%にしているのは隙間を作りたくないもので。
「position:absoluteを使ったレイヤーで文字選択ができない」はIEのみの現象みたいです。このサイトをIEで確認してみてください。
http://x51.org/
以前自分のサイトも同じ現象が起きていたんで、position:absoluteのせいだと思ったんですが、今回は再発しませんでした。片側のレイヤーのみに使ったので、全レイヤーにposition:absoluteを使うとダメなのかも?
MTでは、xhtmlのソース上の順では、メニュー部分が後に記述されてますよね。でもって、コンテンツが先になってます。
で、コンテンツのある部分をマウスドラッグの起点にして、メニューボックスのところにマウスを持っていくとメニューだけが選択されたりする（つまりソース上の後ろの部分だけ）ってことでしょうか、ほんとはコンテンツを選択したいのに、できないってかんじでしょうか。
再現しにくいのは、最初のマウスの位置や、ページのスクロール位置などが違っているせいかな、と思われます（自信なし）。
ボックスが重なって配置されていたり。隙間があって、bodyがそのまま見えてたり。という状態ではよく再現するかも知れません。両サイドにメニューがあると、ボックスが微妙に重なってしまう事がありそうです。
不具合といえば不具合ですが、MSに修正は期待できないかも知れませんね。ctrl+aでテキスト全選択などはできますよね？ とか言われそうな…。
＃えと、使い始めたばかりなので、トラックバックってどうすればいいのかよくわかってなかったりします。MT系のリンクはボチボチ整備しようかとおもっとります。
＃うちなぞ、ありきたりのネタばかりなので放置しておいていただいても。ともあれ今後ともよろしくおねがいいたします。
追試してみました。
カラムの全レイヤーにposition: absolute;をつけたら、選択不可。
contentsのみにつけたら問題ないかと思ったんですが、linksの一番下から下のcontentsのレイヤー部分で選択不可。
最終的にlinksのみつけて解決しました。
下の左のカラム（links）にposition: absolute;をつけたら、Geckoエンジンのブラウザで崩れることが判明したのではずしました。
妙なレイアウトするほうが悪いんでしょうが、position: absolute;は使いどころが難しいです。
結局floatに戻しているというオチ。
なんか、かえって混乱させてしまったようで申し訳ないです。DIVのネストが多かったり、そうとうカスタマイズされた状態だと、なかなかこれだとOKってのは、難しいかも知れません。
一つ提案ですが、過程のCSSファイルが残ってたら、「これどうなのよ」的に検討できる状態にしておくと、ほかのMTユーザーさんにとっても有益で面白いと思うんですけど、いかがでしょう？まあ、あまりCSSばかりに手間かけられないとは思いますけど。
スタイルシートスイッチャーがつけられると、そういうチェック用のもできるんでしょうね。
次にサイトデザインを変える時に考えてみます。
Excerpt: 参考にさせていただきました。
Excerpt: IEのあやしい挙動の解決方法が、c.g.i.のこちら.とnetwork styly *のこちら書かれています。早くも対応されたようです。うらやまです。うちも今朝、全部で１１個（！）もあった「position: abusolute;」を、コメントアウトしてみたのですが、「あﾞー」という感じだった...
Excerpt: 加野瀬さんが指摘していたcssのバグにようやく対応。しかし…。
Excerpt: これは、発見でした。 私のサイトももれなく、この現象になっていました。 一部だけを選択しようとすると、メニュー部分などを含めた大きな範囲が選択されてしまって、うまくその部分だけを選択できないのです。 ARTIFACT 〓人工事実〓 | スタイルシートに関するメモ追記�...
Excerpt: MovableTypeは標準テンプレートを用いると、IE6で文字選択をできないことがあったらしい。そんなことはつゆ知らずにページを構築していたことを思い出す。今後の資料としてリンクする。
Excerpt: 「ちゃんと見えてますでしょうか・・・？」 MONO（管理人） このサイトをご覧の方から、レイアウトが崩れている旨をご指摘いただき、それ以来、スタイルシートの深みにはまっております。OSまでを替えることはできませんが、手当たり次第に様々なブラウザをインストール�...
Excerpt: この２〜３時間の間にアクセスされた方には、「なんだなんだ？ゆき坊は一体何をやろうとしてんだ？」と思われた事でしょう。 まず、せっかく構成した３段組をやめたのは、トラックバック先からデータをコピってくる時に、本文をコピーできないサイトが結構あったことで、�...
−この記事に関連しているかもしれないサイトを自動でリンク−
※コメント欄で初めて書き込まれる場合でも、挨拶は必要ありません。
※その他、コメントを書き込む際はこちらの注意をご覧ください。
この記事へのTrackBack URL
※TrackBackを送った記事からのお礼としてのTrackBackは送らないでください。新しい記事を書いたので送るというのは問題ありません。
※その他、TrackBackについてはこちらの注意をご覧ください