CSS3/jQueryのnth-child()を利用したカラムレイアウト | A Day in the Life
December 15, 2010 商品リストなんかを掲載する場合、ボックスを3カラム/4カラムにレイアウトするケースが多々あると思います。今は3商品しか掲載しないけれど、そのうち4、5、6...と増えていってもレイアウトを維持するためには少々工夫する必要があると思います。 当然のごとくボックス間にはマージンが存在していて、カラムの最後のボックスのマージンが邪魔...とは言えマージンを0にしたクラスを付加するのもメンテナンス性が落ちるため出来れば避けたい。 ul/li要素でマークアップしてpositionを利用する方法やネガティブマージンを利用する方法があると思います。今回はul/li要素を利用せずにシンプルにdivのみを利用した方法を紹介します。マークアップは次の通り。 <div class="item-box pkg"> <h2>Items Box</h2> <div> <div cl
(x)html css ガイドライン beta
バージョン情報(ナンバー,日付,編集者,編集したドキュメント) ver0.4.1 2008/10/9 azuma Add Cardinal rule。 ver0.4 2008/8/11 azuma default.cssをreset.cssに名称変更。 ver0.4 2008/8/11 azuma Templateを廃止。DesignModuleに統一。 ver0.4 2008/8/11 azuma cssの設計を変更(common.cssとpages_layout.cssをskin.cssに統合) ver0.4 2008/8/11 azuma Add Microformats reference(Micorformatsの記述に合わせてid class名を大文字区切りから“-”区切りに変更) ver0.3 2008/5/2 azuma Add XSLT reference ver0.2.
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
フッターとかの区切り『｜』のサンプル1種
ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。 コレに限らず、昔のエントリーを見てると、自分で無いな～使えねー！って突っ込みたくなるエントリーが多いっす・・・うぅ。 念じたら全部最近の書き方になおらないかな。 ・・・ 残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。 何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。 というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。 最近フッターで区切りが有る場合は、:first-child疑似クラスを使って対応するケースが殆どです。 実際のサンプルも用意しました。 サンプルサイトを見る XHTMLはこんな感じ。 <div id="f
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
mozilla.org Markup Reference
fantasai The purpose of this document is to define a rich vocabulary of semantic classes whose presentation can be specified in site-wide style sheets—enough to be able to write a long, involved, well-styled document without once writing a CSS rule. These classes take the place of the old presentation templates; the presentation is now defined in the site style sheets, allowing the markup to remai
(X)HTML+CSSのマークアップガイドライン - フリーフォーム フリークアウト
移転しました http://please-sleep.cou929.nu/20090223.html
SimpleBoxes | CSSとHTMLのコーディングガイドライン
当ページでは、他の多くのウェブページと同様、CSSならびにHTMLを利用しています。 私はperlでスクリプトを作成しますが、その際、perlのコーディングルールは、明文化していて、できるだけ分かりやすいコードを記述するように心がけています。 今回、perlと同様にCSSならびにHTMLについてガイドラインを作成してみました。 HTMLコーディングガイドライン ver 0.00 [日本語] HTML coding guideline ver 0.00 [English] CSSコーディングガイドライン ver 0.00 [日本語] CSS coding guideline ver 0.00 [English] HTMLに関しては、属性に対しての出現順序がメインのルールになります。XHTML 1.0 Strict DTDが一番の参考文献でしょうか。 我的春秋: 論理構造を文脈に読み換えながら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
worldending.jp
HTML 5の仕様が一覧できるクィックリファレンス