サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
セキュリティ
zero.css-happylife.com
CSS3で定義された:only-child疑似クラスは、ある要素内で子要素が唯一の場合に指定した要素にスタイルが適用されます。 ちなみに、:first-child:last-childと書くのと同じですが、:only-childの方が個別性が低くなります。 対応ブラウザ :only-child疑似クラスのサンプル .item { margin-bottom: 15px; padding: 10px; border: 1px solid #999; } .item p:only-child { color: red; } dl { margin-bottom: 20px; } dl dt:only-child { background: #dae0f5; } <div class="item"> <p>テキスト</p> <p>てきすと</p> </div> <div class="item"
CSS3で定義されたパターンE[foo^="bar"]の属性セレクタは、指定した属性の属性値が前方一致した場合、指定した要素にスタイルが適用されます。 対応ブラウザ 属性セレクタのサンプル a[href^="http://"] { padding-right: 15px; background: url(../img/item/icon_blank.gif) no-repeat right .5em; } a[href^="http://css-happylifezero.com/"] { padding-right: 0; background: none; } <ul> <li><a href="http://example.com/">外部リンク</a></li> <li><a href="http://example.com/">外部リンクのテキストが長い場合...(略)</a><
CSS3で定義された:last-child疑似クラスは、ある要素内で最後に書かれている子要素にスタイルが適用されます。リストの場合ul要素内の最後のli要素に適用されるといった具合です。 ちなみに、CSS3で定義された疑似クラスの、:nth-last-child(1)と同じ扱いになります。 この疑似クラスは後から数えるだけで、:first-child疑似クラスと同じです。 同じですが、定義されたのがCSS3のため、IE8までは対応していません。 サンプル付きの説明に関しては、最初を最後に脳内変換して「:first-child疑似クラス」を参照してください。 対応ブラウザ 関連性が深いページ セレクタのグループ化【CSSの基本】 優先順位・個別性・!important宣言【CSSの基本】 リンク擬似クラス(E:link, E:visited)【セレクタ】 ダイナミック擬似クラス(E:acti
CSS3で定義された、UI要素状態擬似クラスのパターンE:checkedは、ラジオボタンやチェックボックスがチェックされた時に適用されるセレクタです。 対応ブラウザ UI要素状態擬似クラスのサンプル input[type="checkbox"] { margin-right: 5px; } input[type="checkbox"]:checked { margin-right: 10px; } <p> <input type="checkbox" id="checkboxExample" name="hoge" value="1" /> <label for="checkboxExample"> チェックボックス</label> </p> チェックボックスにスタイルを指定しても殆ど適用されないので、こんなんですみません。 このサンプルを今見ているブラウザで表示すると以下のようになります
セレクタは、カンマ(,)で区切ることによってグループ化され、複数の要素に同じスタイルが適用できます。 #main table { margin-bottom: 1em; } #main ol { margin-bottom: 1em; } #main ul { margin-bottom: 1em; } #main dl { margin-bottom: 1em; } #main blockquote { margin-bottom: 1em; } #main pre { margin-bottom: 1em; } #main p { margin-bottom: 1em; } 上記のようにそれぞれの要素にmargin-bottom: 1em;の指定をしていたら手間もかかりますし、コードも長くなってしまいます。 そこで、同じスタイルを複数の要素に適用させる場合、グループ化をすることで見やす
CSS3で定義された:empty疑似クラスは、要素内がテキストや空白などを含め空の場合に適用されるセレクタです。 主な使いどころとしては、table要素内の空のtd要素などに使えるかと思います。 対応ブラウザ :empty疑似クラスのサンプル table { border: 1px solid #333; } table td { width: 50px; padding: 10px 20px; border: 1px solid #333; text-align: center; } table td:empty { background: #ecc; } <table> <tr> <td>text</td> <td> </td> </tr> <tr> <td></td> <td> </td> </tr> </table> テーブルは、左上「テキスト」、右上「半角スペース」、左
値をtrueにする事で、IE6, 7における大半のバグ対策ができます。 CSSを覚え始めの頃はIE6や7を基準に考えがちだと思いますが、その時に、IEだとサイドバーの背景が繰り返されるのにIE以外では繰り返されないと言った事は無かったでしょうか?(ボクが覚え始めの頃あっただけかも知れませんが) これは、このhasLayoutが関係していた事になります。 floatプロパティを使って2カラムレイアウトを組む場合など、親要素にwidthプロパティの指定のみだと仕様上は子要素にfloatが指定されたボックスが有ると高さを算出してくれませんが、IE6, 7の場合widthプロパティの値がauto以外でhasLayoutの値が「true」になるため、レイアウト情報が有るとみなされ高さが算出されます。 これにより、IE6, 7だけ背景が表示されるという訳です。 また、この他のバグでもhasLayout
CSS2で定義された:first-child疑似クラスは、ある要素内で最初に書かれている子要素にスタイルが適用されます。リストの場合ul要素内の最初のli要素に適用されるといった具合です。 ちなみに、CSS3で定義された疑似クラスの、:nth-child(1)と同じ扱いになります。 対応ブラウザ :first-child疑似クラスのサンプル ul { margin: 50px 20px; padding: 5px 0; text-align: center; border: 1px solid #999; } ul li { display: inline; margin-left: 5px; padding-left: 10px; border-left: 1px solid #666; } ul li:first-child { margin-left: 0; padding-left
CSS3で定義された:first-of-type疑似クラスは、ある要素の同じ子要素の最初の要素にスタイルを適用します。 これは、:nth-of-type()疑似クラスの:nth-of-type(1)と同じ扱いになります。 この疑似クラスを使う事で、例えば「定義リストの最初だけボーダーを消したい!」といった事が出来ちゃったりします。 対応ブラウザ :first-of-type疑似クラスのサンプル dl dt { padding-top: 10px; border-top: 3px double #95c810; } dl dt:first-of-type { padding-top: 0; border-top: 0; } dl dd { margin-bottom: 10px; } <dl> <dt>dt text</dt> <dd>dd text</dd> <dt>2009年11月03日
CSS2で定義された:after疑似要素は、contentプロパティとの組み合わせで、指定した要素の後に指定した内容を生成します。 また、:first-letter及び:first-line擬似要素を:beforfe疑似要素と組み合わせる場合は、生成された内容の最初の文字や一行目に適用する事ができます。 対応ブラウザ :after疑似要素 のサンプル ul li.new:after { content: " NEW!"; color: red; font-size: 85%; } <ul> <li><a href="http://css-happylife.com/">CSS HappyLife</a></li> <li><a href="http://cssnite.jp/">CSS Nite</a></li> <li class="new"><a href="http://www.yo
counter-resetプロパティは、counter-incrementプロパティでセットした<識別子>に該当するカウンタをリセットします。 このプロパティは、contentプロパティの値に<カウンタ>を指定した場合に使用できます。 対応ブラウザ プロパティの解説 値 [<識別子> <整数>?]+|none|inherit 初期値 none 適用される要素 全ての要素 継承 します パーセント値 N/A メディア all 値の解説 [<識別子> <整数>?]+ counter-incrementプロパティでセットしたカウンタ名(識別子)と同じカウンタ名を入れると、指定した要素が出現した場所でリセットされます。 リセットしたいカウンタが複数ある場合は、counter-reset: h2count ulcount;のように空白類文字で区切って書きます。 <整数>は、カウンタをいくつにリセット
このページではCSSに関する基本的な事を書いています。 CSS初心者の方は、まずは基本をしっかり身につける事で他のコンテンツでの理解も深まると思います。 CSSとは そもそもCSSって何?って方のための簡単な説明です。 CSSの記述の仕方 スタイルの書き方の説明です。 CSSの適用方法 CSSを適用させる方法に関しての説明です。 CSSファイルの準備 CSSファイルの準備の仕方の説明です。 コメントの書き方 CSSのコメントの書き方の説明です。 セレクタのグループ化 セレクタをグループ化する方法の説明です。 優先順位・個別性・!important宣言 セレクタには優先順位が決められており、その説明です。 メディアタイプ CSSメディアタイプに関する説明です。 識別子で扱える文字 ID名やクラス名などで扱える文字の説明です。 ショートハンド プロパティの簡略化表記であるショートハンドの説明で
CSSの適用方法は多種多様です。様々な指定を行うため、これらが競合した場合に備え、優先度が決められています。 スタイルのもっとも基本的な優先順位は、「後から読み込んだスタイルを優先的に適用」します。 読み込む順序は、上から読み込まれていきますので、以下のような場合は後から書いているスタイルが優先されます。 p { color: #000; } p { color: #333; } これで後から書いているcolor: #333;が優先されます。 また、次のように書いたとします。 p.note { color: red; } .note { color: orange; } <p class="note"> ちょっとした注意書きみたいな文書 </p> この場合は、後から書いているcolor: orange;が反映されずに、先に書かれているcolor: red;が優先されます。 これはセレクタに
ダイナミック擬似クラス (E:active, E:hover, E:focus) 最終更新:2009年6月28日 10:37 CSS1と2で定義された、ダイナミック疑似クラスは、ユーザーが特定のアクションをしている時に指定した要素に適用されます。 このダイナミック疑似クラスでは以下の三種類が定義されています。 :hover ユーザーが指定した要素にカーソルを重ねた時に適用されます。 :active ユーザーが指定した要素にカーソルを重ね、クリックしてから放すまでの間などに適用されます。また、キーボードでEnterキーを押している間などに適用される場合も有ります。 :focus ユーザーが特定の操作により適用対象の要素にフォーカスしている場合に適用されます。主にキーボードのTabキーなどで移動した場合になります。 尚、IE6, 7に関しては残念ながら対応していません。IE8は対応していますが
子セレクタ(子共セレクタ)は、親要素の直接の子要素に適用されるセレクタです。このため、孫要素以下は対象になりません。 この子セレクタは、各単純セレクタ(クラスセレクタやIDセレクタ、タイプセレクタなど)を大なり(>)で区切って書きます。なお、大なり(>)前後の空白類文字は、あってもなくても構いませんが、可読性を良くするために前後に半角スペースを入れている場合が多いです。 対応ブラウザ 子セレクタのサンプル #main > p { color: #f00; } <div id="main"> <p>文字が赤くなります。</p> <div class="section"> <p>孫に当たるため適用されません。</p> </div> <p>文字が赤くなります。</p> <!-- / #main --></div> この例の場合、div class="section"内のp要素は#mainからは孫
CSS3で定義された:nth-child()疑似クラスは、ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを適用します。 尚、n番目というのは隣接している要素を全て数えるので、間に別の要素が有るとその要素もカウントしてn番目にスタイルが適用されます。 この疑似クラスは、偶数と奇数で指定を変えしましまにするとか、何番目だけ指定を変えるといった事ができます。 対応ブラウザ :nth-child()疑似クラスのサンプル ol li:nth-child(2n) { color: green; } ol li:nth-child(5) { color: purple; font-weight: bold; } <ol> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト
zoomプロパティはIE独自のプロパティで、本来の機能は特定の要素の倍率を指定する為のプロパティですが、本来の機能として使う事は殆どなく、実際にはIEのバグを回避するために使われるケースが殆どです。 このzoomプロパティを使う事で、IE独自のhasLayoutプロパティの値がtrueになります。 尚、値をデフォルトのfalseに戻すには、zoom: normal;とする事で可能です。 IE8は、hasLayoutプロパティを廃止しているので、バグ対策としては使用できませんが、接頭辞を使う事で本来の機能としてのzoomを使う事ができます。 対応ブラウザ 対応ブラウザを見てもらうと、WebKit系のSafariとChromeも対応となっていますが、ちょっと困った事に実際対応しちゃってます。 そのため、バグ回避でzoomプロパティの指定が有る場合WebKit系で思わぬ動作をする可能性も0では無
CSS3で定義された否定疑似クラスは、特定のセレクタ以外のセレクタに適用されるセレクタです。 例えば、同じp要素でもこの指定がされたp要素には適用させたくない!といった場合に使っていけます。 対応ブラウザ 否定擬似クラスのサンプル ul:not([class]) li { margin: 0 0 5px; padding: 0 0 0 15px; background: url(../img/item/mark_basic.gif) no-repeat left center; list-style-type: none; } <ul> <li>テキスト</li> <li>テキスト</li> </ul> <ul class="menu"> <li>テキスト</li> <li>テキスト</li> </ul> class属性が付いていないul要素内のli要素に基本となる指定をして、何らかのcl
contentプロパティは、:before疑似要素または:after疑似要素と併せて使うことで、要素の前後に内容を生成します。 また、カウンタを生成して自動的に連番を振ったり、quotesプロパティと併せて使う事で指定した文字列の引用符を挿入したりする事もできます。 対応ブラウザ プロパティの解説 値 normal|none|[ <文字列>|<URI>|<カウンタ>|attr(<識別子>)|open-quote|close-quote|no-open-quote|no-close-quote ]+|inherit 初期値 normal 適用される要素 :before疑似要素、:after疑似要素 継承 しません パーセント値 N/A メディア all 値の解説 各値は、空白類文字で区切って何回でも組み合わせることができます。 normal CSS2.1では内容を生成しませんが、CSS3では
CSS3で定義された、間接セレクタは親要素が同じになる兄弟関係の弟に適用されるセレクタです。 隣接セレクタが直後の弟に対して、間接セレクタは兄弟関係に有れば、間に別の要素が入っても適用されます。また、隣接セレクタのように直後の弟にも適用されます。 この間接セレクタは、各単純セレクタをチルダ(~)で区切って書きます。隣接セレクタや間接セレクタ同様、チルダ(~)の前後に半角スペースなどの空白類文字を入れる事ができます。 対応ブラウザ 間接セレクタのサンプル h3 { margin-top: 15px; } h3 ~ h3 { margint-top: 50px; } <h3>間接セレクタとは</h3> <h4>とても簡易な説明</h4> <p>兄弟関係の弟の要素に適用されます。</p> <h3>リンク</h3> <p>各セレクタ説明へのリンクです。</p> <ul> <li><a href="
隣接セレクタは、要素と要素が直接隣接している場合(直後の弟)に適用されるセレクタです。このため、要素と要素の間に別の要素が有る場合は対象になりません。 親要素が同じになる要素の事を兄弟といい、先に書かれているのが兄になり後に書かれているのは弟になります。間に別の要素が入っている場合も弟である事に変わり有りませんがその場合は「直後の弟」にはなりません。このような兄弟関係から、隣接兄弟セレクタとも呼ばれます。 この隣接セレクタは、各単純セレクタをプラス(+)で区切って書きます。子セレクタ同様、プラス(+)の前後に半角スペースなどの空白類文字を入れる事ができます。 対応ブラウザ 隣接セレクタのサンプル p + ul { margin-top: 50px; } <p>テキスト</p> <ul> <li>p要素に隣接しているul要素</li> </ul> <p>テキスト</p> <h4>子見出し</
CSS3で定義されたターゲット疑似クラスは、アンカーリンクで飛んだ先の要素にスタイルが適用されます。 アンカーリンクとは、 http://css-happylifezero.com/selectors/target.shtml#targetExampleDetail こんな感じでシャープ(#)で始まりフラグメント識別子で終わるURLのことです。 対応ブラウザ ターゲット擬似クラスのサンプル :target { color: red; font-weight: bold; } :target::after { content: "←ココに飛んできたよ"; padding-left: 5px; color: #666; font-weight: normal; } <p> 詳しくは下記の「<a href="#targetExampleDetail">月の詳細</a>」をご覧ください。 </p>
border-radiusプロパティは、四つ角の半径を一括指定できるショートハンドプロパティです。 これにより、指定した要素の角を角丸にする事ができます。 角を丸くするだけなのにこのプロパティが使えるだけで、角丸なサイトのデザイン再現用のdiv要素が減り、コーディングもかなり楽になってきます。 とはいえ、角丸は情報を提供するだけなら有っても無くても変わりませんが、ユーザーに与える印象は大きく異なってきます。なので、IEユーザーが多い現状では、デザインとして重要な部分は従来通り背景画像にするなど、訪れるユーザーの事も考慮しながら使うと良いかと思います。 なお、border-radiusプロパティを含む、「CSS Backgrounds and Borders Module Level 3」は現在(2010/01/17) Candidate Recommendation(勧告候補)なので、まだ
webkit系独自のプロパティで、iPhoneやiPod Touch などで閲覧した際に、横向きにすると縦の時より自動的に文字サイズが大きくなります。 初期値は自動調整になっているので、止めたい場合などに使えます。 プロパティの解説 値 <auto>|<none>|<パーセント>|inherit 初期値 auto 値の解説 <パーセント> 親要素のフォントサイズに対しての割合を%で指定します。 auto OS側でフォントサイズを自動的に調整します。 none 自動調整をしません。 text-size-adjustのサンプル body { -webkit-text-size-adjust: none; }
ボクが使っているdefault.cssです。 新規サイト一式などに含まれているのと同じです。 基本的には、新規でサイトを作る場合などこのdefault.cssを読み込ませて、ブラウザのデフォルトスタイルをリセットしたり、body要素への基本的な宣言をしています。 このCSSファイルは、よっぽどの事が無い限り変更しません。 ダウンロード (2KB)
ID名やクラス名は、扱える文字さえ守れば任意の文字で付ける事ができます。 いくら任意だからといって、あまりにも適当なID、クラス名を付けてしまうと後々CSSを確認した時に何が何だか分からなくなってしまう可能性もあります。 そのため、どの様なID、クラス名を付けるかは悩める部分でもありますが、特別な理由が無い限り見た目や位置に関するID、クラス名は付けないようにする事が望ましいです。 見た目や位置に関するID、クラス名とは、#left、.rightBox、.red、.font16pxなどが考えられます。 ではなぜ、見た目や位置に関するID、クラス名は付けない方が良いかというのは、そもそも(X)HTMLは文章の構造を表すものでうんたらかんたらといった理由も有りますが、これらのID、クラス名はサイトの仕様が変更された場合に矛盾が生じてしまいます。 例えば、.redと付けたのは良いが、後から太字に
Internet Explorer (IE) 6 から、最新ブラウザへ移行を勧める理由はセキュリティによる問題が大きいです。 日本政府が情報セキュリティ政策を遂行するための機関である「内閣官房情報セキュリティセンター」からも、IE6からIE8への移行を推進しています。 平成 22 年6 月17 日 内閣官房情報セキュリティセンター(NISC) 旧型ブラウザから新型ブラウザへの移行に係る取組について 1.取組の背景 本年1月に報道された米国企業等を対象とするサイバー攻撃において、マイクロソフト社が提供するInternet Explorer(IE)6等の旧型ブラウザのセキュリティホールが悪用されたと言われています。IE6は、利用者が未知の脅威にさらされるおそれがあるため、マイクロソフト社においても、IE6からセキュリティ対策が強化されたIE8への移行を勧めているところです。 2.政府機関におけ
CSS3で定義された:nth-of-type()疑似クラスは、ある要素の同じ子要素を最初から数えて、n番目に当たる要素にスタイルを適用します。 :nth-child()疑似クラスが対象になる要素同士が隣接している必要が有ったのに対して、:nth-of-type()疑似クラスは間接していても適用されます。 これにより、例えば「定義リストをしましまにしたい!」なんて事が出来ちゃったりします。 対応ブラウザ :nth-of-type()疑似クラスのサンプル p:nth-of-type(3n+1) { background: #f5dada; } p:nth-of-type(3n+2) { background: #ddf5da; } p:nth-of-type(3n+3) { background: #dae0f5; } <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <
floatプロパティは、指定した要素を左か右にフロート(浮動)させるか、またはフロートさせないかを指定します。 これにより、後続する内容はフロートボックスの側面に可能な限り流し込まれます。この流し込みを制御するにはclearプロパティの指定をする事で可能です。 画像をフロートさせて、後続するテキストを画像の側面に流し込んだりする場合に活用したり、div要素などをフロートさせ2カラム、3カラムなどのマルチカラムレイアウトにも使用します。 仕様が複雑だったり、ブラウザのレンダリングの違いやバグに遭遇し易いため、CSS2.1のプロパティの中では最も厄介なプロパティの一つですが、自由なレイアウトを組むうえで必須のプロパティと言えます。 また、floatプロパティを扱う上で欠かせないのがclearプロパティですので、合わせて読んで頂ければと思います。 と、言う事でこのページでも頑張って書いてますが、
次のページ
このページを最初にブックマークしてみませんか?
『CSS HappyLife ZERO』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く