タグ

CSSとCSS3に関するgraySpaceのブックマーク (3)

  • [CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例

    CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。

  • リスト・テーブルを極めるためのプロパティ、13連発!

    contentプロパティ contentプロパティは、:before疑似要素および:after疑似要素が適用された要素の直前・直後に、文字列や画像といったコンテンツを挿入する場合に使います。 詳しくはコチラ→ content 文字列や画像などを挿入する際に使うcontentプロパティ quotesプロパティ quotesプロパティは、contentプロパティにより挿入される引用符を設定する場合に使います。 詳しくはコチラ→ quotes 引用符を設定するquotesプロパティ counter-resetプロパティ counter-resetは、要素の連番の値をリセットする場合に使います。 適用された要素が現れるたびに、指定した名前のカウンタの値が0にリセットされます。 詳しくはコチラ→ counter-reset 要素の連番の値をリセットするcounter-resetプロパティ count

    リスト・テーブルを極めるためのプロパティ、13連発!
  • CSS3の@font-faceでWebfontを利用する。 - ぬぺら!

    今回はCSS3で新たに導入された@font-faceと、 Webfontについての説明をします。 なお、管理人はOpera 10.0 Betaで作成していますので、その他のブラウザでは多少挙動が違うかもしれません。 Webfontというのは、 ユーザーの環境に用意されてないフォントでもWebサーバーにそのフォントが用意されていれば、そのユーザーの環境でもそのフォントが表示できるシステムです。 例えば、CSSでこの様な表記をするとします。 body { font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif; } Windowsユーザーでヒラギノをインストールしている人は少ないと思います。 ですので、こう指定したところで観覧するユーザーにヒラギノがインストールされていなければ、ヒラギノでは表示されませんので無意味です

  • 1