BOOKS
by Sukeharu Kano / 狩野祐東 著書

P113のやり方

このトピックには10件の返信が含まれ、2人の参加者がいます。2 週間、 1 日前 高野岳洋 さんが最後の更新を行いました。

11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • 投稿者
    投稿
  • #2807 返信

    高野岳洋

    初めましてよろしくお願いします。メニューの紹介写真を掲載するの作業でアプリコットのタルトまでリンクと写真が出るんですが焼きりんごのタルトの写真が出ません。また下の大きな写真でバナナとキャラメルのタルトが出ません。一回本の手本のとうりになりましたが記録を忘れてしまいました。一応P115 までコードを書いたのですがどこが間違っていますか教えて下さい <!doctype html>
    <html>
    <head>
    <meta charset=<“UTF-8″>
    <title>バナナとキャラメルのタルト|KUJIRAcafe</title>
    </head>
    <body>
    <div class=”wrapper”>
    <!– ヘッダ―–>
    <h1 id=”logo”><a href=”index.html”><img src=”images/logo.png”width=”217″height=”89″alt=”KUJIRA cafe”></a></h1>
    <ul id=”nav”>
    <li><a href=”index.html”>ホーム</a></li>
    <li><a href=”about.html”>店舗案内</a></li>
       <li><a href=”access.html”>アクセス</a></li>
         <li><a href=”menu.html”>メニュー</a></li>
       <li><a href=”contact.html”>お問い合わせ</a></li>
    </ul>
    <!–ヘッダーここまで–>
      <!–メイン–>
    <h2>メニュー</h2>
    <div class=”menu_block”>
    <div class=”menu_left”>
    <table class=”menu_all”>
    <tr>
    <td class=”photo”>
    <a href=”menu.html”><img src=”images/menu-thumbnail1.jpg”width=”130″height=”130″alt=””></a>

    </td>
    <td>
    <a href=”menu.html”> バナナとキャラメルのタルト</a><br>¥400-
    </td>
    </tr>
    <tr>
    <td class=”photo”>
    <a href=”menu2.html”><img src=”images/menu-thumbnail2.jpg”width=”130″height=”130″alt=””></a>
    </td>
    <td>
    <a href=”menu2.html”>アプリコットのタルト</a><br>¥400-
    </td>
    </tr>
    <tr>
    <td class=”photo”>
    <a href=”menu3.html”> <img src=”images/menu-thumbnail3.jpg”width=”130″height=”130″alt=””></a>
    </td>
    <td>
    <a href=”menu3.html>焼きりんごのタルト</a><br>¥400-
    </td>
    </tr>
         </table>
      </div>
    <div class=”menu_right”>
    <img src=”images/menu-photol.jpg”width=”600″height=”400″alt=””>
    <h3> バナナとキャラメルのタルト ¥400-</h3>
    <p>バナナのソテーをキャラメルクリームでからめたフィリングがたっぷり。</p>
    </div>
    </div>
    <!–メイン ここまで–>
    <!–フッター –>
    <div id=”footer”>
          <p>©Copyright KUJIRA cafe. All rights reerved.</p>
        </div>
    <!–フッター ここまで–>
        .</body>

    </html>

    #2817 返信

    狩野 祐東
    キーマスター

    このBBSは、セキュリティ上の都合で、HTMLなどのソースコードをコピー&ペーストすると一部が変更されるため、100%確実なことは言えませんが、おそらく、3行目を書き間違えています。「UTF-8」の前の<は不要です。

    そのほかに、コメント文の書き方などがおそらく間違っていると思います。
    直接的にはどこが原因なのかはよくわからないのですが、まずは、次のURLでお書きになったHTMLが正しいかどうか、チェックしてみることをおすすめします。英語のサイトですがなんとなくわかると思います。

    https://validator.w3.org

    HTMLの文法を直して、それでもまだ解決しなければ、もう一度ご連絡ください。

    #2826 返信

    高野岳洋

    教えて頂いたサイトでチェックをするとエラーが出ます。 ある程度戻りその状態でエラーを確認してからコードを書いたらいいでしょうか?

    #2829 返信

    狩野 祐東
    キーマスター

    いま作業しているHTMLの、エラーが出ている部分を1つずつ直して、またチェックします。まずは、エラーが出なくなるまで直してみてください。

    #2830 返信

    高野岳洋

    今日は、狩野さんが教えて下さったサイトとは別のサイトで文法チェックをして
    エラーが5個までに減らせましたエラーの種類は3個同じでものと2個同じもので
    実質的に2個です。ひとつはよくわかりません。もう一つは何か入力してくれと書いてあるのですが、
    狩野さんの著書では入力されて無いのでページが進めば入力を指示されるのかと思ってます。
    よろしければアドバイスをお願いします。

    #2834 返信

    狩野 祐東
    キーマスター

    直接答えをお教えするのは学習になりませんので避けますが、解決のためのアドバイスをします。

    まず、「先に進めばエラーが解決する」ことはありません。現時点でエラーが起きているなら、いまの段階で直さないといけません。

    具体的なエラーの内容ですが、高野さんの最初の投稿を見る限り、以下の点を重点的にチェックするとよいでしょう。参考になる本書のページ数も一緒に挙げておきます。

    1文字でも間違えているとエラーになったり、うまく動かなかったりする可能性があるので、まずは本に書かれているとおり、一言一句間違わないように入力を確認してみてください。

    • <img>タグのsrc属性に指定しているパスやファイル名が、本当に正しく入力されているか、1つひとつよく確認してみてください
    • 上から4行目、<meta charset=<"UTF=8">は書き間違いです(p.41)
    • すべてのコメント文の書き方が違います(p.82)
    • タグ名や、タグの属性は、半角スペースで区切る必要があります(p.24)
    #2855 返信

    高野岳洋

    写真の問題と文字化けの問題は解決しました。ホームや店舗案内などのリンクの文字の間に隙間が出来る問題は入力しなおしたら直りましたが他のページは直ってませんヒントの様な物は頂けないでしょうかお願いします。

    #2858 返信

    狩野 祐東
    キーマスター

    具体的にどのページのなにがうまくいっていないのかわかりませんので、ここではより一般的な「間違いを探す方法」をお伝えしたいと思います。

    サンプルデータ(ダウンロード方法はp.viに記載)の「Site」フォルダに、完成品のHTMLとCSSのデータがあります。
    うまくいっていない作業中のファイルと、完成品のファイルの両方をテキストエディタで開き、見比べて、ひたすら違うところを探します。心得としては「自分が書いたソースのどこかが絶対に間違っている」と思いながら探すことです。これをすれば、ほぼ100%間違いが見つかるはずです(ただし、新規ファイルの作成時に「UTF-8」にしたかどうかだけは、この方法ではわからないかもしれません)。

    #2893 返信

    高野岳洋

    今晩は何とか修正をして文法チェックでエラーが出なくなりましたCSSに進みました。
    有難うございました。また質問なのですが、テキストだとクジラカフェのロゴに四角い枠線があるのですが
    自分には枠線の様な物が出ませんCSSの最初のコードを始めたので見え辛くなったのが原因でしょうか
    アドバイスお願いします。

    #2896 返信

    狩野 祐東
    キーマスター

    p.120や、p.141、p.159などに出てくる、ロゴ画像の周囲の青い枠線のことですか? この枠線はブラウザによって出るものと出ないものがあります。

    ちょっと正確には記憶していませんが、IEバージョン10以前は枠線が出ていました(本に掲載している画像はIE10のものです)。IE11と、EdgeやChromeなど最近のブラウザではもともと枠線は出ないので、心配はいりません。いずれにせよ、p.160で紹介するCSSでこの枠線は消します。

    #2909 返信

    高野岳洋

    わかりました有り難うございます。

11件の投稿を表示中 - 1 - 11件目 (全11件中)
返信先: P113のやり方
あなたの情報:





BOOKS by 狩野祐東