Web作成 html

右にサイドバー(メインメニュー)を作りたいのですが、学校で配布されたhtmlに書き込まなければいけません。
色んなところで検索して、貼り付けてみたりしたのですが、うまく行きません。
bxsliderを必ず入れなければなりません。
今は、こんな感じです。どこが間違っているのでしょうか？
<head>
<title>index</title>
<link rel="stylesheet" media="all" href="jquery.bxslider.css">
<script src="js/script.js"></script>
<!--
body { color: #ffffff; }
a:link { color: #009900; }
a:visited { color: #006600; }
a:active { color: #ff0000; }
a:hover { color: #ff0000; }
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<html>
<title>index</title>
<script src="jquery.bxslider.min.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
  $(document).ready(function(){
$('.slider').bxSlider({
 minSlides: 2,
  maxSlides: 3,
  slideWidth: 400,
  slideMargin: 5,
  captions: false,
  infineteLoop: true,
  pager: false,
  controls: true,
  auto: true,
  speed: 1000
});
  });
</script>
</head>
<body id="top">
<div id="wrapper">
<div id="sidebar">
<div id="sidebarWrap">
<h1><img src="images/logox4.png" width="5000" height="800" alt="logo"></h1>
<nav id="mainnav">
<p id="menuWrap"><a id="menu"><span id="menuBtn"></span></a></p>
<div class="panel">
<ul>
<li><a href="#top">TOP</a></li>
<li><a href="#sec01">MESSAGE</a></li>
<li><a href="#sec02">GALLERY</a></li>
<li><a href="#sec03">BRAND</a></li>
<li><a href="#sec04">PROJECT</a></li>
<li><a href="#sec05">COMPANY</a></li>
</ul>

こんな感じにしたいです

退会済みユーザー

2017/02/19 14:56

https://teratail.com/help/avoid-asking https://teratail.com/help/question-tips

kei344

2017/02/19 15:01

ご自身で書かれたコードを質問文に追記し、「何」が「どのように」わからないのか、どのコードのどの部分がわからなくて詰まっているのかなどを追記されたほうが回答が望めると思います。

kei344

2017/02/19 15:31

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、記述されているのに無い要素が多く見られます。もう少し不明点を整理することからされてはいかがでしょうか。

Lhankor_Mhy

2017/02/20 00:21

『うまく行きません』とは具体的にはなにが起きてますか。「こうなると思ったが、実際にはこうなった」のように記述していただけると助かります。

回答3件

HTML文書を記述するときは原則ドキュメントタイプを宣言しなくてはなりません。ドキュメントタイプ宣言はHTML文書の先頭で行い、HTML5でのドキュメントタイプ宣言は以下のように記述できます。

HTML
1<!DOCTYPE html>

また、ドキュメントタイプ宣言の下には原則、HTMLタグを記述する必要があり、そこに色々なタグを入れてウェブサイトを作成します。通常、タグは開始する場所を示すための開始タグと、終了する場所を示すための終了タグを持っています。
そのため、HTMLタグは以下のようにかけます。

HTML
1<!DOCTYPE html>
2<html>
3</html>

このような基本的なことはHTML 入門と検索エンジンで検索したり、書籍を読むとわかりやすく載っているので、まずはHTML文書について学習してみてはいかがでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" media="all" href="jquery.bxslider.css">
6    <link rel="stylesheet" href="jquery.bxslider.css">
7    <style type="text/css">
8        body {
9            color: #ffffff;
10        }
11
12        a:link {
13            color: #009900;
14        }
15
16        a:visited {
17            color: #006600;
18        }
19
20        a:active {
21            color: #ff0000;
22        }
23
24        a:hover {
25            color: #ff0000;
26        }
27    </style>
28    <title>index</title>
29</head>
30<body id="top">
31<div id="wrapper">
32    <div id="sidebar">
33        <div id="sidebarWrap">
34            <h1><img src="images/logox4.png" width="5000" height="800" alt="logo"></h1>
35            <nav id="mainnav">
36                <p id="menuWrap"><a id="menu"><span id="menuBtn"></span></a></p>
37                <div class="panel">
38                    <ul>
39                        <li><a href="#top">TOP</a></li>
40                        <li><a href="#sec01">MESSAGE</a></li>
41                        <li><a href="#sec02">GALLERY</a></li>
42                        <li><a href="#sec03">BRAND</a></li>
43                        <li><a href="#sec04">PROJECT</a></li>
44                        <li><a href="#sec05">COMPANY</a></li>
45                    </ul>
46                </div>
47            </nav>
48        </div>
49    </div>
50</div>
51<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
52<script src="jquery.bxslider.min.js"></script>
53<script src="js/script.js"></script>
54<script type="text/javascript">
55    $(document).ready(function () {
56        $('.slider').bxSlider({
57            minSlides: 2,
58            maxSlides: 3,
59            slideWidth: 400,
60            slideMargin: 5,
61            captions: false,
62            infineteLoop: true,
63            pager: false,
64            controls: true,
65            auto: true,
66            speed: 1000
67        });
68    });
69</script>
70</body>
71</html>

投稿2017/02/20 06:44

s8_chu

総合スコア14727

本当にこの通りに記述しているのだとしたら、HTMLの基本構文からして全然ダメです。
HTML文書の構造は、

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4 〜ここにタイトル要素、メタ要素、外部ファイルの読み込み等〜
5</head>
6<body>
7 〜ここにブラウザ上に表示されるコンテンツ〜
8</body>
9</html>

です。
DOCTYPE宣言は書いてないし、いきなり<head>から始まってる上に<head>の中に<html>があり、
かつ</html>が存在しない等、致命的な構文エラーが多発しています。
これではおそらくまともなHTML文書として解析できないので、スクリプトやCSSの適用以前の問題ですね。
まずは正しい文法でHTMLを書くことを優先してください。CSSやJSはその次です。