「Navigationのデザイン」の編集履歴（バックアップ）一覧はこちら

Navigationのデザイン - (2015/06/02 (火) 18:10:05) の１つ前との変更点

追加された行は緑色になります。

削除された行は赤色になります。

#content

まず最初に縦並び横並びの最もシンプルな形のナビゲーションを作っていきましょう。~
以下のものを作っていきます。~
縦並びのナビ(カーソルをのせるとトップの部分のように灰色になる)
#image(width=300,縦ナビゲーション.png)
横並びのナビ(カーソルをのせるとトップの部分のように灰色になる)
#image(width=300,横並びナビゲーション.png)

*横並びのナビゲーション
まずはulとlinkを使ってHTMLに記述していきます。~
HTML
 <div class="menu">
  <ul>
   <li><a href="#">トップ</a></li>
   <li><a href="#">製品</a></li>
   <li><a href="#">企業情報</a></li>
   <li><a href="#">コンタクト</a></li>
   <li><a href="#">アクセス</a></li>
  </ul>
 </div>


*縦並びのナビゲーション

#content

まず最初に縦並び横並びの最もシンプルな形のナビゲーションを作っていきましょう。~
以下のものを作っていきます。~
縦並びのナビ(カーソルをのせるとトップの部分のように灰色になる)
#image(width=300,縦ナビゲーション.png)
横並びのナビ(カーソルをのせるとトップの部分のように灰色になる)
#image(width=300,横並びナビゲーション.png)

*横並びのナビゲーション
まずはulとlinkを使ってHTMLに記述していきます。~
HTML
 <div class="menu">
  <ul>
   <li><a href="#">トップ</a></li>
   <li><a href="#">製品</a></li>
   <li><a href="#">企業情報</a></li>
   <li><a href="#">コンタクト</a></li>
   <li><a href="#">アクセス</a></li>
  </ul>
 </div>

#image(width=300,samplelink.png)
という風に表示されることはまず問題ないでしょう。

*縦並びのナビゲーション