ＣＳＳ、難しい！
MovableTypeのサイトデザインは、ＣＳＳに基づいています。
文字の修飾程度なら、ＣＳＳはとても便利で扱いやすいんですが、ことレイアウトとなると、そうとうに厄介な代物。
今日はこのことを身にしみて感じました。いやー、ほんと大変ですよね。初心者の私は、要素を中央そろえするだけで、なきそうになりましたよ。
表立ったレイアウトは、ちょっとしか変わってないですが、自分としては大きな前進。
せっかくDreamweaverでテーブル使ってちょいちょいとレイアウトできるようになってたのに、それもつかの間の淡い夢。ＣＳＳの登場は、前から不吉な予感がありましたが、やっぱり継母からのいじめに会う小公女のような気持ちにさせるものあり
今日は春一番が吹いて、ベランダのすだれが崩壊。それがカラムの段組み崩壊と重なって見え。ＣＳＳがどこかおかしいんだ。まちがいない（病
とはいえ、現在の、レイアウトには向かないＣＳＳも早晩、新しい規格にバージョンアップするそうで、それが今よりも簡単になっていることを、祈ってますが、どうなんですかねえ。それに、そんなことになればまた、Dreamweaverもバージョンアップするじゃないか。迷惑な。。
Movable Typeで今すぐできるウェブログ入門
平田 大治 (著)
＋
ＣＳＳによるカラム多段組みのメモ
これまでよく使われてきたテーブルは、本当は表を組むもので、レイアウトのためのものではなかった。
ＣＳＳはpositionなどでレイアウトの実現を行うが、これが相当扱いづらい。本来は、ＣＳＳは、部品ごとの装飾を決めるもので、全体の配置に関するものではないからだ。
また、テーブルにせよＣＳＳにせよ、四角いカラムを配置するだけしかできない。丸や多角形など自在なカタチ、また斜めなどのレイアウトを自由に行えるものではない。レイヤーというものもあるけど、ブラウザによる表示の違いの問題が大きい。フォトショップで絵を描くようには、ＨＴＭＬはレイアウトできない。
新しいＣＳＳでは、レイアウト用の規格も標準装備されるらしいが、なかなか意見を統一できないでいるらしい。♪う〜う、う〜う。。
�＿�に３列並べる。
それぞれの要素をfloat:leftに。width:33%とでもすれば、同じ幅で３列、画面いっぱいに並ぶ。
なお、三つ目のカラムをclear:leftにすれば、横並び二列の下にフッターができる形になる。
��横に並んだカラムのセンタリング
横並びのカラム列の全体を包むような要素を作る。その要素をセンタリング。
センタリングの方法は、margin-left:auto;margin-right:aotoとする。そして、width:720pxとでもしてやれば、一定幅のセンタリングができる。
包み込んだ中の子要素は、二列ならそれぞれをfloat:leftとfloat:rightにし、widthを親の７２０ｐｘを分割するように指定。％で指定すると、極端に幅の狭い画面で見た場合、右カラムが、右ではなく、下に表示されてしまうので、ピクセルなど数値幅で指定。３列なら、全部float:leftでいいのか。
なお、ＩＥ６の一部バージョンでは、margin左右autoによるセンタリングが使えないらしい。この場合、text-align:centerという方法もある。これは本当は要素をセンタリングする方法ではなく、ＩＥのバグだそうだ。ただ、これだと、要素内の文字もセンタリングされてしまうので、これを解除したい時は、さらに子要素にtext-align:leftまたはjustfyをかける。
div-align="center"という手もある。ただ、これはＨＴＭＬ4.01のtransitionalにはあるが、strictにはdiv-align属性がない、という問題あり。
もうわけわかんないよ。
��上にバナーを置いて、その下に２列、センタリング。一番下にはフッター。
バナー要素を�△諒�法でセンタリング。
その下に並べる２列の要素を包み込むように要素をつくり、これを�△諒�法でセンタリング。
中に包んだ二つのwidthを指定。500px,200pxとか。
*1
そして、下にフッターを配置。�△諒�法でセンタリング。
関連リンク
はじめは何が書いてあるかさっぱりわからなかったこれらのサイト。でも今はほぼすらすら読めるようになってきた。前進前進。いちばん下の「趣味のウェブデザイン」は特にグレートなサイト。デザインをＣＳＳに任せ、コンテンツと明確に分離するという考え方。
CSSを用いた段組の作成のコツ
CSS段組レイアウトデザ委員会
スタイルシートでマルチカラムデザインの実現
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
趣味のWebデザイン
http://www.overcube.com/cgi/mt/mt-tb.cgi/31
このリストは、次のエントリーを参照しています: 'ＣＳＳ、難しい！' , AZ::Blog はんなりと、あずき色☆.
関連エントリー
「技術系」の記事
- 新ブログへ移転します！
- 新AZ::Blogへの道
- Firefox3がまもなく登場！ そして、ギネスに挑戦。
- お引越しの準備
- del.icio.us extension for Firefox 3 が登場！
- Ubuntu: Rosegardenをソフトシンセ（＋サウンドフォント）で使う
- Ubuntu: Hardy Heron
- Google Earth で遊ぼう
- Ubuntu: VMwareでWindowsしてヤフー動画を見るであります
- Ubuntu: Nautilusの右クリックメニューを拡張
- gOSをUbuntuに入れてみた
- Ubuntu: Nautilusの右クリックから音楽ファイルを変換する
- Ubuntu: 「Gjiten 日本語辞典」を使う
