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

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

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

リストをナビボタン

リストとは

  • 一覧
  • Webにおける一覧とは何か?
  • Webサイト全体を目次的に俯瞰する役割
  • ページの役割を明示し、その項目またはページに誘導する役割
  • unordered listを記述した場合、項目「li」には、優先順位を持たせない等価であることを明示する

縦に並ぶボタン

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストをナビゲーション:縦</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="globalNav">
<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>
</body>
</html>

横に並ぶボタン

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストをナビゲーション:横</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="globalNav">
<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>
</body>
</html>