menu
menu

CSS3について | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook2
  • はてなブックマーク3
  • Google+3
  • Pocket0
  • Twitter0

CSS3について

  • CSS
CSS3でページを装飾するときの基本

 現時点で正式に勧告されているCSSのバージョンはCSS2です。現在Webページを装飾する上で主流になっているCSS2.1はCSS3と同様未だ勧告候補の状態にありますがブラウザの多くはCSS2.1をサポートし事実上の標準仕様となっております。同様にCSS3も徐々にサポートされ始めメジャーブラウザでは使える機能が増えてきました。しかし、CSS3の仕様はまだ確定されていないためブラウザやブラウザのバージョンによっては動作が異なる場合があります。


 CSS3リファレンス

Vendor-Prefix

 CSS3を使ってみる上でまず知っておきたいことはモダンブラウザでは少しづつCSS3が使えるようになってきておりますが現時点ではいまだ草案段階なので先行実装という意味の「Vendor-Prefix」という識別子がCSS3を使う上で必要となります。Vendor-Prefixはブラウザごとに異なり現在4つのPrefixがあります。


ブラウザ Prefix
Firefox -moz-
Safari,Chrome -webkit-
Opera -o-
Internet Explorer -ms-

 書き方はVendor-Prefixごとに同じプロパティをそれぞれ記述します。Prefixは概ねプロパティに付けますが値に付けることもありますのでご注意ください。

IE対策

 IE9はCSS3対応ということですが、IE6、IE7、IE8では? IE9の正式版がCSS3対応でもIE6、IE7、IE8でCSS3が対応してないと困ります。そこでCSS3をIE6、IE7、IE8でも使用可能にしてくれるbehaviorスクリプトを利用します。

 CSS3のIE対策には「CSS3 PIE」、「ie-css3」などのbehaviorスクリプトがあります。behaviorスクリプトのダウンロードは下記より行ってください。


 CSS3 PIEダウンロード

 ie-css3ダウンロード


 ダウンロードしたbehaviorスクリプト(htc)ファイルを任意の場所に保存してください。その際パスは絶対パスで記述してください。

CSS3 PIEの使い方

 *スタイルシートに次の一行を追加するだけです。


.sample {
	behavior: url(PIE.htc);
}

CSS

.sample {
	-moz-border-radius: 5px;/*Firefox*/
	-webkit-border-radius: 5px;/*Safari,Chrome*/
	-o-border-radius: 5px;/*Opera*/
	-ms-border-radius: 5px;/*IE*/
	border-radius: 5px;
	behavior: url(PIE.htc);
}
ie-css3の使い方

 *スタイルシートに次の一行を追加するだけです。


.sample {
	behavior: url(ie-css3.htc);
}

CSS

.sample {
	-moz-border-radius: 5px;/*Firefox*/
	-webkit-border-radius: 5px;/*Safari,Chrome*/
	-o-border-radius: 5px;/*Opera*/
	-ms-border-radius: 5px;/*IE*/
	border-radius: 5px;
	behavior: url(ie-css3.htc);
}
  • カテゴリー:CSS
  • facebook2
  • はてなブックマーク3
  • Google+3
  • Pocket0
  • Twitter0