CSS HP関連

CSSを使って、横並びメニューを作成する

投稿日:

説明

CSS(スタイルシート)で、メニューを作成することにより様々な利点があります。
たとえば、良く目にするのがリンクにマウスカーソルがある場合、背景画像等を変化させるなどです。

内容

■実際のサンプルメニューです。

まず、HTMLから解説していきます。

<DIV id="samplemenu">
   <ul>
      <li class="sen1"><A href="http://sasuke.main.jp">TOP</A></li>
      <li class="sen1"><A href="sql.html">SQL</A></li>
      <li class="sen1"><A href="java.html">Java</A></li>
   </ul>
</DIV>

メニュー全体を「samplemenu」で囲み、各メニューのliを「sen1」で定義しています。
各メニューをclassで定義することにより、一部メニューだけ背景を変えたいたりすることが
出来ます。

以下はCSSの記述方法です。

<!-- サイズ、背景を定義-->
#samplemenu .sen1{
    <!-- 1メニューのサイズ-->
    width: 85px;
    height: 30px;

    <!-- 背景色(画像読みこみまでのつなぎ)、背景画像-->
    background-color:#c4c5fd;
    background-image : url(senca.gif);

    <!-- 背景画像間の境界線-->    
    border-top:solid 0px #1e1b8d;
    border-bottom:solid 0px #1e1b8d;
    border-left:solid 1px #1e1b8d;
    border-right:solid 1px #1e1b8d;
}
<!-- リンク色、クリック可能範囲定義-->
.sen1 a:link, .sen1  a:visited{
    color: #000000;
    text-decoration: none;
    text-align: center;
    padding-top: 2px;
    height: 30px;
    display: block;
    font-size: 15px;
}

<!-- マウスが上にあるときの定義、
背景画像を指定して変更などをするのもあり
以下は、文字色を赤に
-->
.sen1 a:hover, .sen1 a:active{
   color:#ff0000;
}

-CSS, HP関連
-,

Copyright© さすけのプログラミング入門 , 2018 All Rights Reserved.