質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML5

    4015questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML5の初心者です教えて頂けないでしょうか。

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 942

![イメージ説明説明](f6799f4f5d4e1b8e47f44fa372606c40.png)説明](0da62659beaf5cd1376cd021d7f07a4c.png)](818e58c027c6bc20c6a882f32429e64c.png)###前提・実現したいこと 
HTML5とCSSの入門書を読んでカフェの小さいサイトを作る課題をしています。

発生している問題・エラーメッセージ

ページに他のhtmlファイルに行くリンクと文字を作ったのですがブラウザで確認したところ短文と短文の間に隙間が出来ます。気にせず進めてある程度進めた段階でひとつのファイルのリンクのとことを打ち直した所そのファイルは直ったのですが、他のファイルと違いがよく分かりません教えて頂けないでしょうかお願いします。

エラーメッセージ

該当のソースコード

    <!-- ヘッダ―  -->
      <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>
    <!--ヘッダーここまで -->
     <!--メイン-->
    <div>
ここから上手くいったコードを書きます。
 <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>
うまくいったコードです。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>バナナとキャラメルのタルト|KUJRA cafe</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>&yen;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>&yen;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>&yen;400-
            </td>
            </tr>        
     </table>
        </div>
         <div class="menu_right">
           <img src="images/menu-photo1.jpg" width="600" height="400" alt="">
          <h3> バナナとキャラメルのタルト &yen;400-</h3>
          <p>バナナのソテーをキャラメルクリームでからめたフィリングがたっぷり。</p>
         </div>
        </div>
    <!-- メイン ここまで -->
    <!--フッター -->
    <div id="footer">
         <p>&copy;Copyright KUJIRA cafe. All rights reerved.</p>
    </div>
 <!--フッター ここまで--> 
</div></body>


</html>
うまくいかないコード1です
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>KUJRA cafeへようこそ</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>kUJRA cafeについて</h2>
           <p><img src="images/about-photo.jpg"width="259"height="269"alt="店舗写真">KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。立ち寄ってくださったお客様がゆったりとした時間を過ごせるような店作りを心がけています。おかげさまで開店以来多くのお客様をお迎えすることができました。地元の方が足繁く通ってくださることは、私たちにとって大きな励みになっています。また、中には遠方からはるばるいらっしゃるお客様も多く、皆様にはたいへん感謝しております。<br>
お食事は、気軽に楽しめる小ぶりの<strong>キッシュとタルト</strong>が自慢です。地元で採れた材料を中心に、できるだけ素材の味をそのまま引き出す方法で調理しています。地元産のイワシを使った自家製サーディンのキッシュ。アプリコットやリンゴをはじめ、旬の果物を使ったタルト。季節の味を楽しめるように、いつもメニューを見直し、入れ替えています。メニューの入れ替えは<a href="index.html#news">News</a>でお知らせします。<br>
店主は10年間イタリアのカフェ・バールで給仕したバリスタ。エスプレッソコーヒーを中心に、地元産の果物を使ったジュースからハーブティーまで、さまざまなバリエーションの飲み物をご用意しております。<br>
皆様のお越しを心よりお待ちしております。</p>
        <h2>店舗情報</h2>

</div>    <!--メイン ここまで-->
    <!--フッター -->
    <div id="footer">
         <p>&copy;Copyright KUJIRA cafe. All rights reerved.</p>
    </div>
 <!--フッター ここまで--> 
   </body>


</html>
うまくいかないコード2です
<!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>
    <!--ヘッダーここまで-->
     <!--メイン-->

    <!--メイン ここまで-->
    <!--フッター -->
    <div id="footer">
         <p>&copy;Copyright KUJIRA cafe. All rights reerved.</p>
    </div>
 <!--フッター ここまで--></body>


</html>
うまくいかないコード3です
<!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="acces.html">アクセス</a></li>
          <li><a href="menu.html">メニュー</a></li>
         <li><a href="contact.html">お問い合わせ</a></li>
    </ul>
    <!--ヘッダー ここまで -->
     <!--メイン-->
    <h2>アクセス</h2>
        <div><img src="images/map.png" width="586" height="383" alt="地図"></div>
        <p>九寺楽駅 東口 徒歩2分</p>
        <ol>           
                <li>駅東口を出ます。</li>  
        <li>駅前商店街を国道999号線方面へ向かいます。</li>
                <li>国道999号線を渡り直進します。</li>
                <li>銀行ATMの角を左に曲がり2軒目の1階です。</li>
        </ol>
    <!--メイン ここまで-->
    <!--フッター -->
    <div id="footer">
         <p>&copy;Copyright KUJIRA cafe. All rights reerved.</p>
    </div>
 <!--フッター ここまで--> 
    </div></body>


</html>```  

###試したこと  
課題に対してアプローチしたことを記載してください  
別なファイルで打ち直し  
###補足情報(言語/FW/ツール等のバージョンなど)  
より詳細な情報HTML5 エディタTeraPad  
###前提・実現したいこと  
ここに質問したいことを詳細に書いてください  
(例)PHP(CakePHP)で●●なシステムを作っています。  
■■な機能を実装中に以下のエラーメッセージが発生しました。  

###発生している問題・エラーメッセージ  
文法をチェックするサイトによると「アクセス」 「メニュー」 「お問い合わせ」  
の所で <#PCDATA>要素は<UL>要素の下位要素にはなれません と出ました。  

エラーメッセージ

###該当のソースコード  

ここに言語を入力 ここにご自身が実行したソースコードを書いてください ```

試したこと

課題に対してアプローチしたことを記載してください
入門書を読んで手本と読み比べました

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • toutou

    2017/01/25 14:31

    誰も言ってないようだから言うけど、最初の質問と大きく違わないか?根本的なことじゃなくてコードの量が。なんで途中報告もしないで進めてるんだ?いつになったら解決するんだ?言われたことができないなら無理。サイトの使い方じゃなく日本語の使い方だよ必要なのは。

    キャンセル

  • ye9vlOUyv0p18Wr

    2017/01/26 22:46

    申し訳ないですコミニュ―ションの仕方も勉強しようかと思います。

    キャンセル

  • kei344

    2017/01/26 23:16

    質問文のコードはそれぞれ個別にコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「短文と短文の間」は何と言うテキストの部分かをお書きください。

    キャンセル

回答 5

checkベストアンサー

+4

<li>の前か、</li>の後ろに全角のスペースが入っているのではないでしょうか。

試したらそんな感じでした。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/25 08:27

    これだと思います。全角スペースの気がします。

    キャンセル

  • 2017/01/26 22:44

    やってみます

    キャンセル

  • 2017/01/26 23:13

    直りましたありがとうございます

    キャンセル

+1

ye9vlOUyv0p18Wrさん、状況はどうですか?
まだ、回答がついていなくて、自分でも答えられそうな質問に答えていこうと考えている者です。
現状、ye9vlOUyv0p18Wrさんの質問では、実際に何ができていないかが、少なくとも私には読み取れませんでした。

ブラウザで確認したところ短文と短文の間に隙間が出来ます。

これがどこを指しているのかがわかりませんでした。
試に、該当のソースコードのみのhtmlファイルを作成して、ブラウザで表示させてみました。(イメージはWindowsにあった標準のクラゲの画像を利用しています)
つぎのような表示となりました。

![イメージ説明
特に問題なさそうに感じましたので、結局有効な回答をできず申し訳ございません。
もしまだお困りであれば、よろしければ、画像をアップしてどこがおかしいかなどを示していただけると、解決につながる回答ができるかもしれません。

最初のうちは質問もどのようにしてよいかもわからないかと思いますが、頑張ってください!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/18 21:06

    アクセスの上とメニューの上とお問い合わせの上に隙間が出来ます。
    文法をチェックするサイトで<#PCDAT>要素は<UL>の下位要素になれませんとエラーが出ます。

    キャンセル

  • 2017/01/18 21:30

    現状まだお困りで、差し支えなければ、htmlとcssをすべて貼り付けていただくと、有効な回答が出来るかと思います。
    もし、個人情報等含んでいるようでしたら、該当部分を適当な内容に書き換えてください。

    慣れていないサイトで質問することもままならない様子とお見受けいたしますので、出せれる情報はすべて出し切ってしまう方が、解決へと進むと思います。
    もし、それすらどうしてよいのかわからずにお困りの場合でしたら、その旨書き込んでいただき、ひとつずつ解決して行くのがよいかと思います。少々時間がかかるかもしれませんが、今分かる範囲、出来る範囲で進めていくしかないのだと思います。

    キャンセル

+1

うまくできたのがあるなら、そのテキストを比較しどこが違うかわかるサイトがありますので、それでみてみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

<img src="images/logo.png"width="217"height="89"alt="KUJIRA cafe">

打ちなおす前、imgタグの属性記述部分が半角スペースで区切られてなかったからおかしかったんじゃないでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

htmlのliタグにclass属性の値を入れてcssにliタグにclass属性の値の後にmargin要素に5px 0を入れた治るとおも

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML5

    4015questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。