gotackのブックマーク / 2007年2月26日

gotack id:gotack

2007年2月26日のブックマーク (3件)

mixiをXHTML+CSSで組みなおす - 3ping.org
授業内で、既存サイトをXHTML+CSSで組み直す練習をするのですが、生徒が提出したのが「mixi」を書き直したもので、とてもよく出来てました。 mixiはテーブルレイアウトで組まれていて、基本は3カラムだけど、もとがテーブルなだけあって、ヘッダーのメニューが少し複雑だったり、セクションごとのビジュアル的なデザインや、細かい文字の余白のとり方が難しい。現在のCSSは「どんな見栄えも出来てしまう」とは言えない。本当は言いたいのだけど、実際にはブラウザーのバグを回避するためにバッドノウハウを駆使したり、CSSの限界から、見栄えとは切り離すべきXHTML部分を調整しなくては再現できない見栄えがある。けど、生徒の提出したものは、見栄えのためだけのdivも無ければ、ヴァリデーターだけを100点で通過するような機械騙しのXHTMLでもない。(一部、リストとしてマークアップできるところはある) もち
gotack 2007/02/26
リンク
tableを使用しない段組CSSによるマルチカラムデザインについての考察
HTML文書の記述。 <div id="original"> 〜 </div> <div id="critical"> 〜 </div> <div class="status"> 〜 </div> CSSの記述。 div#original { float:left; width:50%; } div#critical { float:left; width:50%; } div.status { clear:left; } http://members.jcom.home.ne.jp/w3c/MediaMix/tntstyle.css float ブロック要素を左に順次floatさせる事で、疑似的に「段組」を表現する。 Navigator 4.x Navigator 4.xでは#fooをfloatさせないとダメ。 float:left;するセレクタをdiv#fooとすると、Navigato
gotack 2007/02/26
横幅をピクセルで固定したいときにはwidthとpadding (left or right) を同時に指定しない。余白が欲しいときには、それよりも下位の要素にpaddingかmarginを指定する。どうしようもなければdivをもう一度かましてそれに指定する。
リンク
画像の下に謎の隙間ができるのを防ぐ方法 [ホームページ作成] All About
上記のHTMLは、ブロックレベル要素の中に、画像を1つ入れているだけです。このような記述は頻繁に使われるでしょう。このとき、文字サイズ(font-size)がとても小さかったり、行の高さ(line-height)が低かったり、表示に使われているフォントの種類によっては、あまり隙間が気にならない場合もあります。しかし、右図のように画像の下に隙間が見える場合もあります。画像の下に空く謎の隙間がハッキリ見える記述・装飾例以下のようにHTMLとCSSを記述すると、謎の隙間がハッキリ見えるでしょう。 <p> <img src="sea.jpg" alt="海"> quick doggy jump </p> 上記のHTMLでは、画像の隣に小文字のアルファベットを掲載しています。さらにCSSで、 p { font-size: 200%; line-height: 1.4; font-family:
gotack 2007/02/26
<style type="text/css">div img { vertical-align: text-bottom; }</style>
リンク
- 2007年3月1日
- 2007年2月26日
- 2007年2月8日