読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

縦ナビゲーション

ナビゲーション

  • マウスクリック(ホバー)により、次の情報に遷移可能であることを認知させる仕組み
  • 文字以外の領域面ををクリック可能にするためには「display: block」が必須

縦ナビゲーション

  • 文字が並ぶだけの場合、「li」に文字サイズとリスト間の空きを指定する
  • 「li a」は、マウスの反応を受け取る「面」を指定する


《例》

<body>
<ul class="nav">
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
<li id="company"><a href="#">会社案内</a></li>
</ul>
</body>
/* reset
-------------------------------------------------*/
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }
ul { list-style: none; }

/* body
-------------------------------------------------*/
body {
  background: #FFF;
  font-size: 16px
}

/* #nav
-------------------------------------------------*/
.nav {
  width: 64px;
  margin: 50px auto;
}
.nav li{
  margin-bottom: 18px;
  line-height: 20px;
}
.nav li a:link { color: #2069C3; }
.nav li a:hover {
  color: #F90;
  text-decoration: underline;
}


要素間の上下マージンの相殺
  • どちらも正の値の場合、大きいほう
  • どちらも負の値の場合、小さいほう
  • 一方が正の値、他方が負の値の場合、足し引きした値を設定


「li」自体も要素間の上下マージンの相殺は発生します。


borderの設定
  • リストの幅・高さが指定された領域内に表示しなければ、レイアウトが崩れる(ボーバー幅の値分だけ増える)
  • 基本的に border は、「li a」に指定する
  • 「a(anchor)」は、マウスの反応を受け取ることを示す
  • 「href(hyper reference)」は、リンクの遷移先を表す


display: block
  • 本来「インラインレベル要素」である部分を「ブロックレベル要素」として扱うようにする設定
  • 「display: block」が設定されていない場合は、マウスの反応できる領域は文字の領域のみ
  • 幅は、自動的に親要素の幅まで広がる
  • 高さは、「line-height」か「padding」で指定する
  • 「li」に padding を指定しても「li a」に指定がなければ打ち消したことになるので領域が広がりません


課題(リストと擬似クラス)

  • フォルダー名「0706_name」
  • ファイル名「nav1_name.html」「nav2_name.html」「nav3_name.html」
  • 画像フォルダー名は「img」
  • 今回は、初期型の練習のため CSSは、embed
  • ただし、共通CSSは「style.css」としてすべてのページに外部リンクにする
手順のチェック

以下の手順は、必ず実行しましょう。

  1. DTDHTML5)の入力
  2. HTMLの基本構造の入力
  3. meta(文字コード)の入力
  4. title要素の入力
  5. 文書構造の設定(今回は ul のみ)
  6. ブラウザでプレビュー
  7. HTML文法チェックW3C公式サイト
  8. CSSは外部リンクで記述(今回は embed)
  9. 再度ブラウザでプレビュー
  10. CSS文法チェックW3C公式サイト
リストをナビゲーションに(縦)
<body>
<ul class="nav">
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
<li id="company"><a href="#">会社案内</a></li>
</ul>
</body>

共通設定

  • resetとbody


《style.css

/* reset
-------------------------------------------------*/
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }
ul { list-style: none; }

/* body
-------------------------------------------------*/
body {
  font-size: 16px;
  color: #333;
}
Nav01
  • マウスが乗った状態を設定しなさい
  • borderを使用してもhover時に幅の値が変化しないように設定する



Nav02
  • マウスが乗った状態を設定しなさい



Nav03
  • マウスが乗った状態を設定しなさい



解答例

Nav01
  • 「li a」で共通設定をし、#で個別性を設定します
/* .nav
-------------------------------------------------*/
ul.nav {
  width:  100px;
  margin: 50px auto;
}
ul.nav li a  {
  display: block;
  padding: 23px 0px;
  text-align: center;
  border: solid 1px;
  font-weight: bold;
  color: white;
}
li#new a {
  background: red;
  border-color: red;
}
li#info a {
  background: orange;
  border-color: orange;
}
li#item a {
  background: yellowgreen;
  border-color: yellowgreen;
}
li#shop a {
  background: limegreen;
  border-color: limegreen;
}
li#company a {
  background: skyblue;
  border-color: skyblue;
}
li#new a:hover, li#info a:hover, li#item a:hover, li#shop a:hover, li#company a:hover  {
  background: white;
}
li#new a:hover { color: red; }
li#info a:hover { color: orange; }
li#item a:hover{ color: yellowgreen; }
li#shop a:hover { color: limegreen; }
li#company a:hover { color: skyblue; }
Nav02
  • background-position の値は、リストマーカーの画像の大きさによって変更します
  • 左から上からの順に位置指定をします
  • hover用の画像を用意すれば、「display: block」の面積の中に含まれるため、画像置換は可能です
/* .nav
-------------------------------------------------*/
ul.nav {
  width: 180px;
  margin: 50px auto;
  border-top: dotted 1px #73A1FF;
}
ul.nav li a  {
  display: block;
  padding: 10px 0 8px 16px;
  border-bottom:dotted 1px #73A1FF;
  background: url(img/tri.png) no-repeat left 14px;
  font-weight:bold;
  color:#73A1FF;
}
ul.nav li a:hover  {
  color:#FA0;
}


:first-child

  • 個別にクラス名をつけたり、ulにborder指定をせずに最初のliのみに指定できる
  • IE8は、「:last-child」は認識しませんが「:first-child」は認識します
/* .nav
-------------------------------------------------*/
ul.nav {
  width: 180px;
  margin: 50px auto;
}
ul.nav li a  {
  display: block;
  padding: 10px 0 8px 16px;
  border-bottom:dotted 1px #73A1FF;
  background: url(img/tri.png) no-repeat left 14px;
  font-weight:bold;
  color:#73A1FF;
}
ul.nav li:first-child a {
    border-top: dotted 1px #73A1FF;
}
ul.nav li a:hover  {
  color:#FA0;
}





Nav03
  • aのみの設定をすることにより、hover以外の擬似クラスは aと同じ設定ということになります
/* .nav
-------------------------------------------------*/
ul.nav {
  width: 180px;
  margin: 50px auto;
}
ul.nav li {
  margin-bottom: 8px;
  }
ul.nav li a  {
  display: block;
  padding: 10px 0 9px 16px;
  border: solid 2px #73A1FF;
  font-weight: bold;
  color: #73A1FF;
  }
ul.nav li a:hover  {
  background: #73A1FF;
  color: #FFF;
}


基礎演習


<body>
<div id="nav">
<ul>
<li><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
</ul>
</div><!-- /#nav -->
</body>
/* reset
-------------------------------------------------*/
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }

/* body
-------------------------------------------------*/
body {
  font-size: 16px;
  color: #333;
}

/* #nav
-------------------------------------------------*/
#nav {
  width: 250px;
  margin: 50px auto;
}
#nav li { margin-bottom: 8px; line-height: 1.5; }
#nav li a { color: #333; }
#nav li a:hover { color: #F80; }

/* reset
-------------------------------------------------*/
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }
ul { list-style: none; }

/* body
-------------------------------------------------*/
body {
  font-size: 16px;
  color: #333;
}

/* #nav
-------------------------------------------------*/
#nav {
  width: 250px;
  margin: 50px auto;
}
#nav li {
  margin-bottom: 8px;
  line-height: 1.5;
  background: url(arrow01.png) no-repeat left 10px;
  padding-left: 15px;
}
#nav li a { color: #333; }
#nav li a:hover { color: #F80; }

/* reset
-------------------------------------------------*/
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }
ul { list-style: none; }

/* body
-------------------------------------------------*/
body {
  font-size: 16px;
  color: #333;
}

/* #nav
-------------------------------------------------*/
#nav {
  width: 250px;
  margin: 50px auto;
}
#nav li {
  border-bottom: solid 1px #AAA;
  line-height: 2.5;
}
#nav li a {
  display: block;
  padding-left: 20px;
  color: #333;
}
#nav li a:hover {
  color: #F80;
}
#nav li:first-child a {
  border-top: solid 1px #AAA;
}

/* reset
-------------------------------------------------*/
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }
ul { list-style: none; }

/* body
-------------------------------------------------*/
body {
  font-size: 16px;
  color: #333;
}

/* #nav
-------------------------------------------------*/
#nav {
  width: 250px;
  margin: 50px auto;
}
#nav li a {
  display: block;
  line-height: 40px;
  padding-left: 20px;
  background: #FFF;
  color: #333;
  border-bottom: 1px solid #AAA;
}
#nav li a:hover {
  background: #BEE6F3;
}
#nav li:first-child a {
  border-top: solid 1px #AAA;
}

/* reset
-------------------------------------------------*/
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }
ul { list-style: none; }

/* body
-------------------------------------------------*/
body {
  font-size: 16px;
  color: #333;
}

/* #nav
-------------------------------------------------*/
#nav {
  width: 250px;
  margin: 50px auto;
}
#nav li {
  border: solid 1px #AAA;
  border-top: 0;
}
#nav li a {
  display: block;
  line-height: 40px;
  padding-left: 24px;
  background: url(menu_gray.png) no-repeat left top;
  color: #000;
}
#nav li a:hover { background-position: 0 -50px; }
#nav li:first-child a { border-top: solid 1px #AAA; }

/* reset
-------------------------------------------------*/
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }
ul { list-style: none; }

/* body
-------------------------------------------------*/
body {
  font-size: 16px;
  color: #333;
}

/* #nav
-------------------------------------------------*/
#nav {
  width: 250px;
  margin: 50px auto;
}
#nav li {
  border: solid 1px #AAA;
  border-top: 0;
}
#nav li a {
  display: block;
  line-height: 40px;
  padding-left: 20px;
  color: #333;
  border-left: solid 10px #D7EAEF;
}
#nav li a:hover { border-left: solid 10px #00B7EF; }
#nav .current a { border-left: solid 10px #0B74A8; }
#nav li:first-child a { border-top: solid 1px #AAA; }

<body>
<div id="nav">
<ul>
<li><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
</ul>
</div><!-- /#nav -->
</body>
/* reset
-------------------------------------------------*/
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }
ul { list-style: none; }

/* body
-------------------------------------------------*/
body {
  font-size: 16px;
  color: #333;
}

/* #nav
-------------------------------------------------*/
#nav {
  margin: 50px;
}
#nav li {
  display: inline;
  border-right: solid 1px #AAA;
  padding: 0 15px;
}
#nav li a { color: #333; }
#nav li a:hover { color: #FA0; }
#nav li:first-child { border-left: solid 1px #AAA; }

<body>
<div id="nav">
<ul>
<li><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
</ul>
</div><!-- /#nav -->
</body>
/* reset
-------------------------------------------------*/
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }
ul { list-style: none; }

/* body
-------------------------------------------------*/
body {
  font-size: 16px;
  color: #333;
}

/* #nav
-------------------------------------------------*/
#nav {
  margin: 50px;
}
#nav ul {
  overflow: hidden;
}
#nav li {
  float: left;
  width: 160px;
}
#nav li a {
  display: block;
  line-height: 30px;
  border-right: solid 1px #AAA;
  color: #333;
  text-align: center;
}
#nav li a:hover {
  background: #E7F7FC;
}
#nav li:first-child a { border-left: solid 1px #AAA; }

<body>
<div id="nav">
<ul>
<li><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
</ul>
</div><!-- /#nav -->
</body>
/* reset
-------------------------------------------------*/
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }
ul { list-style: none; }

/* body
-------------------------------------------------*/
body {
  font-size: 16px;
  color: #333;
}

/* #nav
-------------------------------------------------*/
#nav {
  width: 800px;
  height: 40px;
  background-color: #0C907C;
  margin: 20px;
}
#nav ul { overflow: hidden; }

#nav li	{
  float: left;
  width: 160px;
}
#nav li a {
  display: block;
  line-height: 40px;
  border-left: solid 1px #FFF;
  color: #FFF;
  text-align: center;
}
#nav li a:hover { background: #0CE0C0; }
#nav li:first-child a { border-left: 0; }