[B! HTML][css] appakumaturiのブックマーク

IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎

IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、「IE6がー！」とか「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含

appakumaturi 2011/06/05

リンク

[HTML] パンくずリンクについてのまとめと考察

パンくずリンク|パンくずリスト（breadcrumb navigation）はどうコーディングするのが今風なんだろう。ふとそんなことを思い立ってしまったので、名を知られたサイトのソースを覗き見して考えることにした。パンくずリンクのデザインについてまとめられたBreadcrumbs In Web Design: Examples And Best Practicesという記事によれば、よくあるデザインパターンは次の通りである。 1行テキストテキストを横並びにしただけの伝統的なパンくず。各ページリンクの間に区切り文字が入る。ページタイトルを　>　で繋いだものページタイトルを　>　以外の文字で繋いだものシンプルなリンクの羅列区切り文字を入れずに画像やCSSで階層を表現する。マルチステップ開始から完了までの行程を表示する。サブナビゲーションつき各ページリンクに属するページを

appakumaturi 2011/01/01

リンク

複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT

なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。整ったデザインが簡単に手に入るのはすばらしい！ Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基本として、グリッド化されてページの幅に応