スタイルシートの class と id の使い分け
idとclassの違いと使い分け！スタイルシート(CSS)適用法(2ページ目)idとclassの違いと、使い分け方法をご紹介いたします。HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。 class属性とid属性の役割の違い 「class」と「id」の役割と、使用上の違いを簡単に言うと、次の通りです。 ■class： 「種別名を割り当てる」 → 同じclass名を、1ページ中に何度でも使える。 ■id： 「固有の名前を割り当てる」 → 同じid名は、1ページ中に1度しか使えない。 class属性が対象の「種類・部類」を表しているに過ぎないのに対して、id属性は対
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ
画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース
こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま
Dottoro Web Reference
The Dottoro Web Reference was created to promote the development of cross-browser web pages on all platforms. With this in view, Dottoro offers detailed language descriptions, browser support information, real life examples and where necessary, cross-browser solutions in CSS, HTML and JavaScript languages. We hope this will help you create modern and attractive websites. Complete HTML, CSS and Jav
高速な CSS セレクタエンジン「Sizzle」「Peppy」を試す - WebOS Goodies
最近のほとんどの JavaScript フレームワークには、 CSS セレクタによる DOM エレメントの取得機能が実装されています。複数の要素を柔軟な条件で取得できるので、 DOM ツリーの操作がシンプルに記述でき、とても便利です。しかし、単に CSS セレクタを使いたいだけなのに、フル機能のフレームワークを読み込むのはちょっと抵抗がありますよね。 そんな悩みを解決してくれるのが、本日ご紹介する Sizzle, Peppy という 2 つのライブラリです。これらは他のフレームワークに依存しない独立した CSS セレクタエンジンで、しかも jQuery 等の既存のエンジンより数倍高速に動作します。 unobtrusive な Web ウィジェットの開発や、独自フレームワークの開発に最適ですね。その他にも広範な用途に使えるでしょう。 以下でこれらのライブラリの使い方や動作速度等の検証結果を掲
やってはいけないコーディング
あのタグを使っていませんか 現場でよくある間違ったコーディング例として、非推奨（Deprecated）タグの使用があります。図1（上）に示したタグは非推奨タグや廃止タグと呼ばれるもので、現在はブラウザでサポートされていますが、将来的には使用できなくなる可能性があります。 なぜ、今使えるのに将来的に使えなくなるのでしょうか。 これまで、ブラウザメーカーはHTMLの見栄えをよくするために、無秩序にタグの拡張を行ってきました。結果としてHTMLは、その元であるSGML（Standard Generalized Markup Language）の「文書論理構造を記述する」という目的とは異なる独自の進化を遂げることになりました。 そのような中でHTML 4.0からは、文書論理構造を記述する本来の目的に立ち返ろうという動きがあり、見栄えを設定するタグはHTMLに直接記述せずにCSSなどを使用することを
擬似クラスと擬似要素
リンクのアクセス状態に応じて適用 a:link { プロパティ : 値 ; } a:visited { プロパティ : 値 ; } a要素がセレクタとなり、アンカー内容のリンクボタンをユーザのアクセス状態に応じて変化させます。セレクタとなる要素に続けてコロン（:）をつけて定義済みキーワードを指定します。"link", "visited"の2つがあります。 :link擬似クラスは未アクセスのリンクを表し、:visited擬似クラスはアクセス済みのリンクを表します。これらの擬似クラスをリンク擬似クラスと呼びます。 なお、アクセス済みのデータが取得できてしまうというセキュリティ上の理由から:visited擬似クラスに指定できるプロパティはUAによっては制限が加えられています（最新のUAではすべて制限されている）。制限されているUAでは:visited擬似クラスに指定しても、効果が反映されるCSS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.stylish-style.com/csstec/base/keisyou.html
CSS Dencitie