このページをクリップ


    最近では、珍しくもなくなりましたが、サイドやヘッダー部分のナビゲーションを、ulタグを使って表現する手法です。

    SEO的にもulタグのリストでナビゲーションを書くと、非常に効果的だということがわかってから、広まってきました。

    当サイトでもこの手法を用いて、左サイドのナビゲーションを構築しています。

    実際のソースの書き方

    ulタグというのは、やや特殊でcssで設定をせずに使うとmargin,paddingが予期しない形で現れて苦労します。

    で、最初にul,liのmargin,paddingの設定をゼロにしてしまってから、クラスで各種の表示の設定をしています。今回は例としてyyyというクラスを使用。


    ul {
    margin:0px;
    padding:0px;
    width:120px;
    }

    li {
    margin:0px;
    padding:0px;
    list-style:none;
    }

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

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

    .yyy a:hover {
    color:#FFFFFF;
    background-color:#0000FF;
    }

    「使用例」



    .yyy aでdisplay:block;の設定をする事でテキスト上だけでなくliのエリアにカーソルがオーバーした時もロールオーバーすることになります。

    この設定をしないとテキスト上にカーソルが来た時だけしかロールオーバーしません。

    liタグでのlist-style:none;で通常のliタグで表示される左隅の丸いマークが表示されなくなります。背景画像を設定する事で実際の画像のロールオーバーの表現も可能になります。(.yyy aでのbackgroune-imageと.yyy a:hoverのbackgroune-imageを変える。)

    • サイト
    • facebook
    • twitter

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

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


    * (1票)

    * (票)

    * (票)

    * (票)

    * (票)