中途半端を極める

web関連で役に立ちそうなものを紹介いたします

css

【CSS】IEでCSS3を使うようにする方法

投稿日:2012年4月2日 更新日:

角丸が多用されているようなサイトにはCSS3で対応した方が楽です。
しかし、Internet Explorer6,7,8がCSS3非対応などであきらめている人が多いのではないでしょうか?

そういった人には「PIE.htc」をお勧めします。導入方法は下記のリンクより

step1 「PIE.htc」をダウンロード

こちらのページより「PIE.htc」をダウンロードしてください。

step2 ダウンロードした「PIE.htc」を適当な箇所に配置

どこに配置しても大丈夫です。(自身が管理しやすい箇所に配置してください。)

step3 cssを以下のように記載

例:h1を角丸にしたい場合


h1{
-moz-border-radius: 5px; /* Firefox css3 */
-webkit-border-radius: 5px; /* Safari Chrome css3 */
border-radius: 5px; /* IE css3 */
border: #CCCCCC solid 1px;
position: relative;
behavior: url(/PIE.htc);
}

behaviorのURLは絶対パスで指定してください。また、
サーバーによってはhtcファイルを認識しない場合があるそうです。

結構楽に実装できます。CSS3に慣れていない人はこちらのCSS3ジェネレータを使用しましょう。

-css

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

【CSS】よく使うCSSハック一覧

ブラウザごとにページを確認すると、レイアウトが崩れていることが多いかと思われます。それを直すためにCSSハックを仕方なく利用します。 ※個人的な性格なのか、あまりCSSハックを使用してレイアウトを整え …

ヘッダ固定時のページ内リンクのずれを解消する方法

position:fixedを使ってヘッダを固定した場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。どのように調整すればいいか紹介いたします。

【IE6】CSSでリストの隙間を消す方法

IE6で出る症状です。リストでナビゲーション作ってるときによく出くわします。 今でもIE6かよって話もありますが、一応自分用メモって事で記しておきます。

【CSS】CSS3を生成してくれるサイト

これからCSS3を使う機会が増えると思います。まだまだCSS3にはなれていないので、使う時は今回紹介するサイトを使用しています。 日進月歩とはいいますが、あまりにも早すぎる・・・せっかくCSSを覚えた …

【CSS】スクロールバーをスクロールすると背景画像が切れる現象を解消する

ウィンドウ幅が狭い場合(スクロールバーが出ている時)、ウェブサイトの背景が切れてしまう場合があります。 最近まであまり気にしないようにしていたのですが、解消方法があるとの事ですのでこちらに記しておきま …