HTML作成の質問

上記のようなサイトを目指しています。独学で初学者なので一応リンクなどはできたのですが

メニュの整理
jqueryの導入などあまりうまくいかないです。

以下各コードとなります。
どなたか、教えていただけると本当に助かります。宜しくお願いします。

[base.html]

base.html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2<!DOCTYPE html>
3<html lang="ja">
4 <head>
5    <meta charset="utf-8">
6    <link rel="stylesheet" type="text/css" href="base.css">
7    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
8    <title>ページのタイトル</title>
9 </head>
10
11 <body>
12
13  <div class="wrapper"><!-- wrapper=ラップつまり背景？ -->
14    <header>
15     <div class="title">
16      <h1>TOUCH<br>ARCHITECTS</h1>
17       <nav>
18       <ul id="menu">
19         <th style="font-family: Georgia"><a href="base.html"><img src="" alt="home"></a></th>
20         <th style="font-family: Georgia"><a href="about.html"><img src="" alt="about"></a></th>
21         <th style="font-family: Georgia"><a href="index.html"><img src="" alt="works"></a></th>
22         <th style="font-family: Georgia"><a href="index.html"><img src="" alt="contact"></a></th>
23          <a href="https://www.instagram.com/curryman0055/">
24        <img src="images/Instagram-v051916_200.png" alt="instagram" ">
25         </a>
26       </ul>
27       </nav>
28    </header>
29  </div>
30
31    <div class="contents">
32    <img src="images/top001.jpg" alt="2016" width="100%" height="100%">
33    </div>
34
35
36    <footer>
37     <h2>© 2016 copyrights. TOUCH ARCHITECTS.</h2>
38    </footer>
39    </div>
40    <a href="http://jquery.com/">jQuery</a>
41  </body>
42</html>
43
44
45```ここに言語を入力 
46コード
47
48[base.css]
49```body, html {
50  height: 100%;
51  background-color: white;
52}
53h1{
54font-size: 30px;
55  color: #ff1493;
56  font-family: HoboStd;
57  margin: 0;
58  padding: 0;
59}
60h2, h3, h4, h5, h6, p, body {
61  font-size: 18px;
62  color: #ff1493;
63  font-family: MS PMincho;
64  margin: 0;
65  padding: 0;
66}
67
68th{
69  font-size: 18px;
70  font-family: Arial;
71  margin: 0;
72  padding: 50px;
73
74}
75
76.wrapper{
77  min-width: 960px
78  color: white;
79
80}
81
82
83header{
84 height: 150px;
85 background-color: #4f4f4f;
86 font-family: MS PMincho; sans-serif;
87
88}
89
90ul{
91  border-style: none;
92
93}
94
95
96
97.title{
98  font-size: 14px
99  color: #ff1493;
100  font-family: MS PMincho; sans-serif;
101  padding: 30px;
102}
103
104.class{
105  text-align: right;
106}
107
108.contents{
109  height: 700px;
110  width: 960px;
111  margin: 0 auto;
112  background-color: #ddd;
113}
114
115footer{
116  height: 80px;
117  background-color: #333;
118  text-align: center;
119}

[jquey-3.1.1.min.js]

     $('.wrapper header').hover(
        function(){
            // マウスオーバー時
            $(this).stop().animate({backgroundColor: '#ffaa00'},200);
        },
        function () {
            // マウスを外した時
            $(this).stop().animate({backgroundColor: '#FF3F00'},700);
        }
    );
});
コード

行動規範の内容に同意します

回答3件

ベストアンサー

ここに記載したコードが本当に今作っているファイルの内容と同じなのであれば、
HTML・CSSともに致命的な構文エラーが多数あります。
正しく表示されない・動かない、という以前に、まず初歩的な構文ミスを全て解決してから、
改めて取り組んだ方が早いと思います。

###【HTMLで気になる所】
・DOCTYPE宣言より前になぜかjQuery1.11.1を呼び出そうとしている
→head内でjquery3.1.1を読んでいるので不要
→DOCTYPEより前に何を書いてもHTMLとして無効。DOCTYPE宣言の前に何か書いてはダメ

・ul要素の子要素がなぜかth要素
→ul要素の直下の子要素はli要素のみです。th要素はtable要素の子要素としてしか使えません。
→基本的なHTMLタグの用途や文法が身についていないものと思われます。一度タグ辞典などに目を通してください。

・ul要素の直下にa要素（＋インスタグラム画像アイコン）が入っている
→ul要素の直下の子要素はli要素のみです。入れるならli要素の下に入れてください。

・インスタグラムのアイコン画像
→末尾に"（ダブルクォーテーション）がひとつ多い

・コピーライトのマークアップがh2
→h1〜h6要素は、HTML文書の情報構造の骨格を表す「見出し要素」を表す要素です。
フッター内のコピーライト表記は明らかにコンテンツの見出しではないので正しくありません。

###【CSSで気になる所】
・1行目
→セレクタが無い。いきなり構文が壊れている。

・プロパティ末尾に「;（セミコロン）」が抜けている箇所がある
→記載内容のうち2箇所抜けがあります。こういう構文ミスがあるとCSSは正しく反映されません。

・リセットCSSを読み込んでいない
→ブラウザの初期スタイルシートをリセットするための「リセットCSS」と呼ばれるスタイルを最初に読み込んでおき、
ブラウザごとの初期値の違いやバグを正してから必要なスタイルを追記する方法をとった方がトラブルも少なく効率的です。
「リセットCSS」で検索すればいくらでも情報は出てきます。

###【jQueryで気になる所】
・ $(function(){}); の記載が見当たらない
→jQueryのコードはDOMの構築が終わった後で実行するようにしないと動きません。
jQuery利用の基本中の基本です。

・実行コードをどこに記載しているのか不明
→HTMLを見る限り、このjQeury実行コードをどこに記載しているのか分かりません。
実行コードはjQuery本体を読み込んだ後に記載しないと動きません。

他にもいろいろ気になるところはありますが、最低限これらの項目については見直し・修正をすることをお勧めします。
独学だとなかなか最初は大変だと思いますが、まずエラーのないHTML・CSSを書くことが先決です。
分からないところは調べたり、またここで質問したりしてひとつずつ解決しながら進めましょう。

投稿2016/12/13 08:07

aKusano

総合スコア3763

kei344

2016/12/13 09:02

> 実行コードをどこに記載しているのか不明多分ですが、「jquey-3.1.1.min.js」にコードを書いているのだと思います。

行動規範の内容に同意します

１つの投稿内に質問の数が多すぎて「丸投げ」に近いので、みなさん回答しにくいのではないでしょうか。
一気に解決したい気持ちはわかりますが、一つ一つ解決していったほうがいいと思います。

まず、下の部分で

HTML
1<ul id="menu">
2  <th style="font-family: Georgia"><a href="base.html"><img src="" alt="home"></a></th>
3  <th style="font-family: Georgia"><a href="about.html"><img src="" alt="about"></a></th>
4  <th style="font-family: Georgia"><a href="index.html"><img src="" alt="works"></a></th>
5  <th style="font-family: Georgia"><a href="index.html"><img src="" alt="contact"></a></th>
6  <a href="https://www.instagram.com/curryman0055/">
7  <img src="images/Instagram-v051916_200.png" alt="instagram" ">
8  </a>
9</ul>
10```<th> は <table></table> の中に入れるのが通常ですので、<ul></ul>を使うのであれば、下のように <li> にすればいいと思います。
11```HTML
12<ul id="menu">
13  <li><a href="base.html"><img src="" alt="home"></a></li>
14  <li><a href="about.html"><img src="" alt="about"></a></li>
15  <li><a href="index.html"><img src="" alt="works"></a></li>
16  <li><a href="index.html"><img src="" alt="contact"></a></li>
17  <li><a href="https://www.instagram.com/curryman0055/"><img src="images/Instagram-v051916_200.png" alt="instagram"></a></li>
18</ul>
19```ただし、最初から４つの項目の src が ""（空白）なので何も表示されていませんね。画像を表示したいなら、例えば、src="images/sample1.png" などと入れる必要がありますね。
20li (リスト)は通常タテに並びますが、例えばCSSで下のように、li に display:inline-block; を付けるとヨコに並べられます。
21```CSS
22ul#menu { height:60px; list-style-type:none; padding:0; }
23ul#menu li { height:60px; display:inline-block; }
24```また、おなじ <li> でも、最後の <li> だけは違う形状にしたい場合などは、
25```CSS
26ul#menu li:not(:last-child) { font-family:Georgia; }
27```とすれば、最後以外に形状（この場合フォント）をしていできます。
28
29質問のすべてを網羅するには、あまりに長文になりますので、とりあえずここまででご勘弁を。

投稿2016/12/13 08:11

ippya

総合スコア31

サンプルなどをまねてjQueryの標準的な書き方をまず勉強するといいでしょう。

は先頭に書けない文ですし、

な通常、自分が書いたプログラムを格納するものではありません。
googleが提供しているjqueryを毎回googleにとりに行くか、自分のサイトにコピーして置くかを選ぶんですが、そのへんからですね。
参考：http://semooh.jp/jquery/ref/cont/tutorial/ <-情報が古いのでもっといい参考サイトがあるはずですが

投稿2016/12/13 07:55