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

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, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: 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

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

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



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



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



解答例

Nav01
  • 「li a」で共通設定をし、#で個別性を設定します
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」の面積の中に含まれるため、画像置換は可能です
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」は認識します
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と同じ設定ということになります
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>
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 {
  font-size: 16px;
  color: #333;
}
#nav {
  margin: 20px;
}
#nav li {
  margin-bottom: 8px;
  line-height: 1.5;
}
#nav li a {
  color: #333;
}
#nav li a:hover {
  color: #F80;
}

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 {
  font-size: 16px;
  color: #333;
}
#nav {
  margin: 20px;
}
#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;
}

html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
body {
  font-size: 16px;
  color: #333;
}
#nav {
  width: 250px;
  margin: 20px;
}
#nav ul {
  border-top: solid 1px #AAA;
}
#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;
}

html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
body {
  font-size: 16px;
  color: #333;
}
#nav {
  width: 250px;
  margin: 20px;
}
#nav ul {
  border-top: solid 1px #AAA;
}
#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;
}

html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
body {
  font-size: 16px;
  color: #333;
}
#nav {
  width: 250px;
  overflow: hidden;
  margin: 20px;
}
#nav ul {
  border-top: solid 1px #AAA;
}
#nav li {
  border: solid 1px #AAA;
  border-top: none;
}
#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;
}

html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
body {
  font-size: 16px;
  color: #333;
}
#nav {
  width: 250px;
  overflow: hidden;
  margin: 20px;
}
#nav ul {
  border-top: solid 1px #AAA;
}
#nav li {
  border: solid 1px #AAA;
  border-top: none;
}
#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;
}

広告を非表示にする