CSS3のweb fontとRGBaをie6に対応させる

0

    最近、CSS4が登場するという噂を聞いて焦っています。

    CSS3でさえもろくに使ってないのに、もう4?

    という感は否めませんが、どうしようもないです。

    とりあえずCSS3を使いこなせるように、web fontとRGBaの簡単な使い方からie6の対応までをやってみました。



    google web fontの使い方

    使い方といっても、ちょっと調べれば分かる事なんですが、とっても簡単な方法がありました。


    ここから好きなフォントを選んでAdd to Collectionをクリック。

    右下にあるuseをクリックしてコードを書き出すだけです。

    英語のサイトなので、ちょっとわかりにくいですけど、カタカタしてればすぐできると思います。


    しかも、これie6にも対応してます。

    ieでの表示はちょっと汚いですけど、問題なく使えます。


    日本語が使いたい時はここのサイトから。(ただし会員登録必要です。)



    ただ、web fontはフォントファイルをダウンロードすることになるので、特に日本語ではサイズが膨大になります。

    使いどころを考えれば、ステキなサイトにできそうです。


    RGBaで背景色を透明にする

    透明度を変えるプロパティは、OpacityとRGBaの2つあります。

    今回は背景色の透明度を変えたかったので、RGBaの方を使いました。


    .hoge{background-color: rgba(51,51,51,0.6);}
    

    上に書いたように指定すると、背景色を透明にしてくれます。

    かっこの中の数字は、(赤、緑、青、透明度)になっています。

    カラーコードはググれば出てきます。


    css filterを使う

    ただし、RGBaはie6,7に対応していません。

    対応法として、css filterを使う方法があります。

    css filterのグラデーション機能を適用して、始まりと終わりの透明度を一緒にします。

    #hoge{
    filter:progid:DXimageTransform.Microsoft.gradient
    (startColorstr=#30C0A2C7,endClorstr=#30C0A2C7);}
    

    みたいにすれば、問題ないはずなんですけど私のサイトではie6で表示されませんでした。


    RGBを使う

    CSSのRGBを使って透明ではないけど、いい感じにすることができます。


    background:rgb(200,54,54); /* ie6,7 */
    background:rgba(200,54,54,0.5);
    

    という風に、ie6,7向けにcssを書いてやると表示されないという事態は防げます。

    書く順番は超大事です。

    上と下の数字が違っても大丈夫です。

    backgroundの後の-colorはどっちにも付けてはいけません。

    この3つに注意して、試してみて下さい。


    まとめ

    やっぱりCSS3めちゃくちゃ便利ですけど、仕事で使うのはまだまだめんどくさいです。

    他にも使ってみたいものがいっぱいあるので、また勉強しときます。



    ++++++++++++++++++++++++++++++++++++++++++++++++++

    有限会社アンブレラ STUDIO TEMPO
    〒530-0056 大阪市北区兎我野町5-6 栄ビル201
    TEL/FAX:06-6367-4413/06-6367-4414

    ++++++++++++++++++++++++++++++++++++++++++++++++++
           
    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    カレンダー

    S M T W T F S
     123456
    78910111213
    14151617181920
    21222324252627
    28293031   
    << October 2018 >>

    エントリー

    カテゴリー

    アーカイブ

    recent comment

    リンク

    プロフィール

    検索

    その他

    モバイル

    qrcode