3カラムのHTML
CSSで3カラムをやるにはどういうHTML構造が必要か。 とりあえずメインカラムとサイドバー1、2の3つのブロックが必須で、 問題となるのは、それらの出現順序とコンテナブロックの関係です。 ケース1 <div id="sub1"> サイドバー1 </div> <div id="main"> メインカラム </div> <div id="sub2"> サイドバー2 </div> 3つのブロックを順々にフロートさせる方法。幅固定も幅可変も比較的簡単。 ソース上での各ブロックの出現順序がテーブルレイアウトと同じなので、CSSでやる意義があまり感じられない。 ケース2 <div id="sub1"> サイドバー1 </div> <div id="sub2"> サイドバー2 </div> <div id="main"> メインカラム </div> 各サイドバーをfloatで左右に寄せて、メインカラム
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
floatとpositionの使い分け
てんぽ: floatとpositionの使い分け CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど CSSで段組をやるには普通floatかpositionを使いますが、どのように使い分けるのか。 これはいろいろと試行錯誤しているうちにわかってくるものなので、「そんなこと知ってる」という人も多いかと思いますが、まとめてみます。 条件としては以下のような感じ。 HTMLの記述順は「（ヘッダ→）記事→サイドバー（→フッタ）」を守る 記事領域とサイドバーの長さはページによって異なる（どちらが長くなるかわからない） サイドバーとフッタの文字が重なる、とかは駄目 floatとpositionの違いは、「floatは下方向に融通が利く」のに対し、「positionは上方向に融通が利く」といえます。 何のことかさっぱりわからないと思いますが、つまりこういうことです。 フロートはソース上で
HTMLかXHTMLか
共有テンプレに登録するには文書型はHTML4.01かそれともXHTML1.0か（ISOとかは置いといて）どちらがいいかと考えると、 自動改行が<br />（<br>ではなく）と出力される現状では、XHTMLのほうが都合が良さそう……。 と思っていました。でも多くの人はアクセス解析やらアフィリエイトリンクやらを貼るんです。そしてそれらのタグは大文字だったりする。すると、タグを小文字で書かなければならないXHTMLでは文法違反になってしまう。実際、『bbs』を使ってる人のブログをlintにかけてみると、何もいじっていなければ90点前後（場合によっては100点）が出るはずなのに、それらのせいでマイナス点になっていることがある。 また、WinIE6の「DOCTYPEスイッチ」には冒頭にDOCTYPE宣言以外のものがあると後方互換モード(Quirks mode)になるバグがあって、そのせいでXML宣
見出しレベル考
コンテストに向けてテンプレ制作中（今度のはネタじゃないです）。新ブロック変数が追加されたことで、ようやく文書構造で満足のいくものがつくれそう。 というのも、いままではこんな文書構造になっていた（このテンプレは違いますが）。 h1 ブログ名 h2 日付 h3 エントリータイトル h3 エントリータイトル h2 日付 h3 エントリータイトル h3 エントリータイトル h2 過去ログとか h2 リンクとか でも過去ログとかリンクとかと同じ階層に「日付（same_dayを使わないならエントリータイトル）」があるのは変じゃないかと。 例として他のサイトを見てみます。「表紙ページ」に記事（エントリー）とナビゲーションやその他のコンテンツがあるブログをさとみかんから適当に選び出します。 趣味のWebデザイン 日付の前に「備忘録」 Simple -憂鬱なプログラマによるオブジェクト指向な日々- 記事の見
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
