CSS Hack Labは現在、製作段階のWEBサイトです。製作途中のページやリンク切れ等が多数存在します。 また、テスト等をしっかりと行っていない部分もまだ存在します。 なお、ページ移動も頻繁にしていますので、URLは何度も変わる可能性があります。 以上のことを理解の上でサイトを観覧してください。 CSS Hack ライブラリー登録済みハック一覧 CSS Hack Labで解説しているCSS Hackの一覧です。種類別、順不同。2つ以上の種類に属するCSSハックもあるため一部が重複しています。 [種類別一覧表] [ハック名五十音順] [CSSハック一覧表 - 通常|Pass Filter|@import] スターハック系 スターハック* html selector{ スター7ハックhtml*selector{ 2スターハック* html*selector{ スター＋ハック*+html s

Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます

ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ

YUI Reset CSS The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions. Note: YUI Base CSS (introduced in version 2.3.0) can compliment Reset by applying a style foundation for common HTML elements that i

ブロックレベル要素 ブロックレベル要素とは昔風の解説で言うなら、改行を伴う要素です。 上記の例では青いボーダーの要素です。 HTML4.01 Strictでは次の要素がこれにあたります。 p div table dl ul ol form address blockquote h1 h2 h3 h4 h5 h6 fieldset hr pre ブロックレベル要素の特徴は、親要素の内容幅全体に広がって配置されます(上記の例では黒い二重のボーダーが親要素のボーダーです)。 つまり、ブロックレベル要素の横に他の要素は(通常フローなら)並べることができません。 このような特徴からボーダーが(見えて)ない時の様子から「改行を伴う」と言われています。 CSS2ではブロックレベル要素は矩形(四角形)で表現されると考えると簡単に理解できるかと思います。 インライン要素 ブロックレベル要素に対し、文中の一部

ここでは、CSSの基本が分かった上で、どのような書き方のスタイルがあるのか、それぞれのメリット、デメリットを挙げて説明していきます。 一つの規則集合は、1行に？それとも複数行？ 1行で書くやり方は、以下のようになります。 h2{ padding-left: 5%;} div.loud{ margin: 2% 1%; border-width: 0 1px 1px; border-style: solid; border-color: #999;} 複数行で書く場合は、例えば以下のようになります。 div#main { color: #000; background-color: transparent; border-style: ridge; border-width: 0 0 0 10px; border-color: #666; } 前者ではウィンドウに多くの声明が収まりますが、一つ

文字コード宣言は行いましょう(CSS) 注意:文字コード宣言を何故行うべきなのか、 ということについては「文字コード宣言は行いましょう(HTML)」を参照してください。 CSSファイルで日本語というとピンと来ない人もいるかと思いますが、font-familyや、content等、 日本語を用いる可能性のあるプロパティも存在しています。 また、CSSファイル内にコメントを記述する場合は多くの人が日本語を使用すると思います。 日本語のプロパティ値を使う場合には文字コード宣言が無いとMozillaはそのプロパティの値を誤って解釈し、思い通りの表示にならないかもしれません。 また、コメント中の日本語が原因で最悪、そのCSSファイル内の指定が全て無効になってしまうかもしれません。 CSSファイルでもできる限り文字コードを宣言するようにしましょう。 CSSファイルでの文字コード宣言の仕方 CSSファイ

clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;