基金訓練に行ってきました。(51日目)


基金訓練(Webデザイン・プログラミング科)の51日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。

本日の内容は下記のとおりです。

1.ネット上のサイトを見てまねてみよう。

ネット上のサイトから、よさそうなデザインのサイトを見ながら、ソースを見ずに、そっくり真似て見るという実習です。

で、とりあえずやってみたのですが、グローバルナビをイメージのみで作ってあり、マウスオーバーでイメージが変わるようになっていました。
これは、実習でやったことが無いので、ちょこっとソースを見つつやってみました。

グローバルナビの作成

↑こんな感じです。↑

  • CSSの例は下記のとおりです。
    #bloggnavi ul {
    width: 301px;
    height: 30px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size:0.1%;
    }
    #bloggnavi ul li a {
    float:left;
    display:block;
    height: 30px;
    background-repeat: no-repeat;
    }
    #bloggnavi ul li.bloggnavi1 a {
    width: 101px;
    background-image:url(images/gnavi_01.gif);
    }
    #bloggnavi ul li.bloggnavi1 a:hover {
    width: 101px;
    background-image:url(images/gnavi_h_01.gif);
    }
    #bloggnavi ul li.bloggnavi2 a {
    width: 101px;
    background-image:url(images/gnavi_02.gif);
    }
    #bloggnavi ul li.bloggnavi2 a:hover {
    width: 101px;
    background-image:url(images/gnavi_h_02.gif);
    }
    #bloggnavi ul li.bloggnavi3 a {
    width: 99px;
    background-image:url(images/gnavi_03.gif);
    }
    #bloggnavi ul li.bloggnavi3 a:hover {
    width: 99px;
    background-image:url(images/gnavi_h_03.gif);
    }
  • HTMLの例は、下記のとおりです。
    <div id=”bloggnavi”>
    <ul>
    <li class=”bloggnavi1″><a href=”index.html”>
    ナビ1</a></li>
    <li class=”bloggnavi2″><a href=”index.html”>
    ナビ2</a></li>
    <li class=”bloggnavi3″><a href=”index.html”>
    ナビ3</a></li>
    </ul>
    </div>

※この方法以外に、マウスオーバー時と、そうでない時の画像を縦に並べて、ひとつの画像にして、background-positionで切り替える方法もあるようです。





  • 人気ブログランキングへ
  • FC2ランキングへ
  • ブログランキング・にほんブログ村へ
  • おきてがみ

関連記事

カテゴリー:職業訓練
.

コメントを残す