サイトマップなどによさそうな、1ピクセルの背景画像を使用してリストの構造をビジュアル化するスタイルシートをCSS-Tricksから紹介します。 Style a List with One Pixel demo 構造化は入れ子のリストにも対応しており、上記デモでは三階層分のリストとなっています。 構造化を明示する罫線は1x1ピクセルのグレーの画像で、横線と縦線は背景を繰り返して配置しています。

label のススメ 2008-07-29 0 0 XHTML/CSS CSS, label, XHTML label要素とその挙動 | Web標準Blog | ミツエーリンクス これを読んでいて，ぼくがやっていることをちょっと紹介しようと思いました。 label の働き お名前 <input type="text" name="name" id="name" size="20" /> このような場合，コントロール本体であるテキストボックス<input type="text" ... />とその説明である「お名前」というテキストは，隣同士に並んではいるけれど，対応していることがはっきりマークアップされているわけではありません。 label要素を使って，次のようにマークアップすることで，「お名前」というテキストとテキストボックスをはっきり関連づけることができます。label要素内のテキストが

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。 2013年1月のW3C: CORS勧告候補、Navigation Timing 2公開 CSSモジュールの2草案が更新 1月3日付で、CSS Text DecorationモジュールとCSS Cascading and Inheritanceモジュールの草案が公開されました。 CSS Text Decoration Module Level 3 CSS Cascading and Inheritance Level 3 Text DecorationモジュールはLast Callとなります。2011年11月版の草案から大きな変更はありせん。 Cascading and Inheritanceモジュ

長いです。スミマセン。 17日（土）、CSS Nite Begginersに行ってきました。 サブテキストとして「現場のプロから学ぶ XHTML+CSS」が出版されており、 それを読んできた方がより内容が理解できますよーとのことでした。 購入したものの、ほとんど読まないまま持参したのですが、 内容はだいたい本に書かれていることプラスα、という感じだったので、 まぁ問題はありませんでした。 でも、いろいろ知らなかったことも聞けたし、いろんなデモも見せてもらったので、 なかなか見る機会のない、"人のやり方"を目にすることができて、それは収穫でした。 以下、知らなかったこと・改めて「なるほど」と思ったこと・気になったことなどのまとめ。 自分用の覚え書き的なものなので、誰がどの話をしたのかなどは省略します。 「それ教えたわ！」ということがあるかもしれません。先生ごめんなさい。 ■

IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ

A Simple jQuery Stylesheet Switcher 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。 asahi.com の導入例 実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。 文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。 デモページ HTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。 <ul id="nav"> <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larg

上ノ郷谷氏のスタイルシートを書く時のガイドライン - 2xupというエントリーにコメントしたのですが連休中に時間が取れず... 有言不実行は最低... なので、追加コメントと今後のためのメモを残しておきます。 利用者インターフェイス (User Interface) ビジュアルフォーマットモデル (Visual Formatting model) ビジュアルエフェクト (Visual effects) : というような書き方がされており、こういう正式名称があったことを知ったわけですが、念のため関連ページをメモ。 Cascading Style Sheets, Level 2 Cascading Style Sheets, Level 2 (日本語訳) CSS のガイドラインに関しては以前から情報収集していて、こうした資料を公開していただけるのは非常にありがたい。と同

もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife class名やid名って付ける時悩みませんか？今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 class名やid名を付ける際の一般的な名前集を紹介されてます。 全体のラッパー wrap wrapper top-wrapper wrapperAll ヘッダー head header headerArea headline ナビゲーション部分 navi navigation navbar gnav メインコンテンツ部分 area main maincontent center フッター foot footer footnavi footerArea 他の名前一覧も読む場合はこちら なるほど、あらかじめCSS名を決めてメモっておくことで

Copyright © 2007-2018 With-D - http://with-d.net All Rights Reserved.

いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。 ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。 それと、取り上げた記事は順不同です。 書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。 Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp ガイドラインを作成お

バージョン情報(ナンバー,日付,編集者,編集したドキュメント) 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.