このページをクリップ


    CSSでロールオーバー風の表現をするための方法です。

    画像を使用してjavascriptでロールオーバーをさせるというのは古典的なサイトで多く見られる手法ですが、CSSを使ってもテキストにロールオーバーの表現をさせることができます。

    実際のソースの書き方

    xxxというクラスで、ロールオーバー風表現(背景画像を白から黒に変化)をさせる場合です。


    .xxx {
    margin:0px;
    padding:0px;
    }

    .xxx a {
    padding:5px;
    color:#FFFFFF;
    background-color:#000000;
    text-decoration:none;
    }

    .xxx a:hover {
    color:#000000;
    background-color:#FFFFFF;
    }

    「使用例」

    MacでWeb制作

    疑似クラスのhoverを使う事で、ロールオーバー風の表現にしています。

    基本は.xxx aで設定して、ロールオーバーをさせる時の表現を、hoverで設定しています。hoverでborderの設定を加えるとよりボタンぽくなります。

    当サイトでも左側のナビゲーションや各種リンクテキストに使用している手法です。

    • サイト
    • facebook
    • twitter

    PCからタブレット、スマホまで対応いたしました。ガラケーもとりあえず対応しております。

    Macに要求するものはどれ?


    * (1票)

    * (票)

    * (票)

    * (票)

    * (票)