CSS Layouts - Code-Sucks.com
Coming SoonGet ready, something cool is coming!
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ
毎日考ブログ -Web屋のウェブログ- | Web標準に進路を取れ 第5回「テーブルレイアウトは罪なのか」
テーブルレイアウトとはテーブルタグを、左のようにセルを切ってレイアウトするもの。そもそもはテーブルタグは表に使われるものであって、レイアウト目的で使うべきではないという意見はごもっともなものの、きっちり幅指定や余白指定ができてブラウザ依存しにくいことから、企業サイトはもとよりいろいろなサイトに使われておりました。いや、今でも立派に使われています。 対してCSSレイアウトは、上と同じレイアウトをHTML（XHTML）＋CSSで表現するもの。こんな感じです。記述は一例として適当に書いてるんで、アテにしたり突っ込みいれたりしないでくださいね(笑)。 【HTML】 <div id="header"> <h1>毎日考ブログ（ヘッダ部分）</h1> </div> <div id="main"> <div class="menu">メニュー部分</div> <div class="contents">本
Collection & Copy - 上下左右中央の件、改善、補足
Collection & Copy - 上下左右の中央にボックスを配置する id:inception9さんから、より簡単な方法をコメントで教えて頂きました！ありがとうございます。 これだ！これが正解だから、前回のが「バッドノウハウ(?)」なんですね。余分な空間用divもなくなり、ほんますっきりやわぁ。 ただ、どうも前回の元記事は「画面をコンテンツのボックスより小さくしても、ボックスの左上が欠けない」というところがポイントだったようです。たしかにウィンドウサイズを小さくすると、左上隅にボックスがきっちり収まります。ここにこだわらない場合は、短縮版がよさそうですね。 HTML、CSS、共に勉強不足ですので、直接指摘頂けるのは大変助かります。コメントを書く時間を頂けたことを、感謝しております。ではでは。 雑記軽い気持ちでHTML/CSSのことを書くと、なぜか反響が大きく、戸惑う。なんとなくプロ
Collection & Copy - 上下左右の中央にボックスを配置する
(via Subtech Watchlist - typester) Collection & Copy - 上下左右中央の件、改善、補足コメント頂き、改善、補足を書きました。 CSS vertical center using float and clear 上記、CSSで上下左右の中央にボックスを配置するページを読みました。要約すると以下のHTMLになるようです(必要なものも削っちゃったかも)。ポイントとなるスタイルシート設定にコメントを入れました。 CSS、きっと分かってる人には、あったりまえなんだろうなぁ。「float:left」と「clear:left」がペアで対応してるんですね。あと、marginのautoはIEで、うまく動かないのか。余白用のブロック(distance)は、まず画面の縦半分の長さで空間を確保し、本文のブロックの半分のサイズだけマージンを減らして、ちょうどよい
CSSのレイアウト40種類を集めた「Layout Gala」 - GIGAZINE
サイトのコンテンツのレイアウトを考える場合、コンテンツをどのようなレイアウトでは位置すればいいのか悩む場合が多々あります。2コラムにするのか3コラムにするのか、それぞれのコラムの下にさらに子コラムを入れるのか否か、右サイドに置くのか左サイドに置くのか、などなど。 そんな場合に参考になるのがこの「Layout Gala」。CSSによるレイアウトの例が40種類あるので、自分の作りたいサイトのスタイルに近いレイアウトを実際に見てから、CSSファイルをダウンロードできます。Layout Gala http://blog.html.it/layoutgala/ 全部のレイアウトのファイルを詰め込んだファイルのダウンロードは以下から。 http://blog.html.it/layoutgala/allLayouts.zip また、「Yahoo! UI Library」にも単一のCSSファイルで100
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dynamic Drive CSS Layouts- Tableless, CSS based templates