Q&A
「短文と短文の間」とはどの部分のことでしょう。また、質問テンプレートの文章がそのまま残っているので、不要な部分は削除してください。
説明](0da62659beaf5cd1376cd021d7f07a4c.png)](818e58c027c6bc20c6a882f32429e64c.png)###前提・実現したいこと
ＨＴＭＬ５とＣＳＳの入門書を読んでカフェの小さいサイトを作る課題をしています。
###発生している問題・エラーメッセージ
ページに他のｈｔｍｌファイルに行くリンクと文字を作ったのですがブラウザで確認したところ短文と短文の間に隙間が出来ます。気にせず進めてある程度進めた段階でひとつのファイルのリンクのとことを打ち直した所そのファイルは直ったのですが、他のファイルと違いがよく分かりません教えて頂けないでしょうかお願いします。
エラーメッセージ
###該当のソースコード
<!-- ヘッダ― --> <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>¥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-photo1.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> <!--フッター ここまで--> </div></body> </html> うまくいかないコード１です <!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>©Copyright KUJIRA cafe. All rights reerved.</p> </div> <!--フッター ここまで--> </body> </html> うまくいかないコード２です <!doctype html> <html> <head> <meta charset="UTF-8"> <title>お問い合わせ｜ＫＵＪＩＲＡｃａｆｅ</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>©Copyright KUJIRA cafe. All rights reerved.</p> </div> <!--フッター ここまで--> ．</body> </html> うまくいかないコード３です <!doctype html> <html> <head> <meta charset="UTF-8"> <title>アクセス｜ＫＵＪＩＲＡｃａｆｅ</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>©Copyright KUJIRA cafe. All rights reerved.</p> </div> <!--フッター ここまで--> </div></body> </html>``` ###試したこと 課題に対してアプローチしたことを記載してください 別なファイルで打ち直し ###補足情報(言語/FW/ツール等のバージョンなど) より詳細な情報ＨＴＭＬ５ エディタＴｅｒａＰａｄ ###前提・実現したいこと ここに質問したいことを詳細に書いてください (例)PHP(CakePHP)で●●なシステムを作っています。 ■■な機能を実装中に以下のエラーメッセージが発生しました。 ###発生している問題・エラーメッセージ 文法をチェックするサイトによると「アクセス」 「メニュー」 「お問い合わせ」 の所で <#PCDATA>要素は<UL>要素の下位要素にはなれません と出ました。
エラーメッセージ
###該当のソースコード ```ここに言語を入力 ここにご自身が実行したソースコードを書いてください
###試したこと
課題に対してアプローチしたことを記載してください
入門書を読んで手本と読み比べました
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
「短文と短文の間」という表現がよくわかりませんし、「ひとつのファイルのリンクのとことを打ち直した」とありますが、「打ち直した」とは入力しなおしたということですか？「ファイルは直った」とありますが、ファイルではなくリンクですか？「他のファイルと違い」と言われても、どこがうまく行って、どこがうまく行かなかったのかわかりません。
短文と短文の間というのは「ホーム」や「店舗案内」の間ということでしょうか？ご提示のソースを見る限りだと「間に隙間」はあかないような感じですね。修正前のソースと修正（打ち直し）後のソースを提示できますか？
ホームや店舗案内ですＤｉｙさん 入力しなおしましたhikochangさま まだ初めてなのでこのサイトの使い方がわからないのですがうまくいったファイルも上げます。
うまくいったファイル、とは何ですか？質問している内容が解決できたファイルということですか？また、CSSを使っているならばCSSのコードも追記していただけるとうれしいです。
修正後のソース提示ありがとうございます。ただ、これだと表示上の差はないような感じがしますね…。とりあえず行頭をそろえる意味でも各liの前のスペースの数をそろえてみてください。後で自分が見たときにも見やすくなりますし
文法をチェックするサイトで調べたら他の箇所も間違いがあるみたいです取り合えずそこも直してまた質問します。
文法をチェックするサイトで他の箇所を直して 「アクセス」 「メニュー」 「お問い合わせ」に<#PCDATA>要素は<UL>要素の下位要素にはなれません とエラーが出てきました
質問者さんはCSSを利用しているのではないかと思うのですが、どうなのですか？
まだＣＳＳを使う前の段階で止まってます。
何が上手くいっていないのか分かるように記載しましょう。
こちらで質問者さんのコードをそれぞれ実行しましたが、どちらも同じ表示になります。質問者さんの手元では「うまくいった方」と「うまくいかなかった方」がどのように違うのか、画像を追記する、現在のコード全体を追記するなどをすると解決策が見つかりやすくなると思います。
わかりました画像の追記方法が分からないのでコードを追記します。
どんなにコードを載せても、「短文と短文の間」と言う表現が分からないので、何が起こっているか分かりません。何に困っているかを記載しましょう。
誰も言ってないようだから言うけど、最初の質問と大きく違わないか？根本的なことじゃなくてコードの量が。なんで途中報告もしないで進めてるんだ？いつになったら解決するんだ？言われたことができないなら無理。サイトの使い方じゃなく日本語の使い方だよ必要なのは。
申し訳ないですコミニュ―ションの仕方も勉強しようかと思います。
質問文のコードはそれぞれ個別にコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「短文と短文の間」は何と言うテキストの部分かをお書きください。
回答5件
0
ベストアンサー
<li>の前か、</li>の後ろに全角のスペースが入っているのではないでしょうか。
試したらそんな感じでした。
投稿2017/01/24 13:36
総合スコア2352
これだと思います。全角スペースの気がします。
やってみます
直りましたありがとうございます
0
うまくできたのがあるなら、そのテキストを比較しどこが違うかわかるサイトがありますので、それでみてみてください。
投稿2017/01/12 10:43
総合スコア2050
0
ye9vlOUyv0p18Wrさん、状況はどうですか？
まだ、回答がついていなくて、自分でも答えられそうな質問に答えていこうと考えている者です。
現状、ye9vlOUyv0p18Wrさんの質問では、実際に何ができていないかが、少なくとも私には読み取れませんでした。
ブラウザで確認したところ短文と短文の間に隙間が出来ます。
これがどこを指しているのかがわかりませんでした。
試に、該当のソースコードのみのhtmlファイルを作成して、ブラウザで表示させてみました。（イメージはWindowsにあった標準のクラゲの画像を利用しています）
つぎのような表示となりました。
特に問題なさそうに感じましたので、結局有効な回答をできず申し訳ございません。
もしまだお困りであれば、よろしければ、画像をアップしてどこがおかしいかなどを示していただけると、解決につながる回答ができるかもしれません。
最初のうちは質問もどのようにしてよいかもわからないかと思いますが、頑張ってください！
投稿2017/01/12 00:40
総合スコア146
アクセスの上とメニューの上とお問い合わせの上に隙間が出来ます。
文法をチェックするサイトで<#PCDAT>要素は<UL>の下位要素になれませんとエラーが出ます。
現状まだお困りで、差し支えなければ、htmlとcssをすべて貼り付けていただくと、有効な回答が出来るかと思います。
もし、個人情報等含んでいるようでしたら、該当部分を適当な内容に書き換えてください。
慣れていないサイトで質問することもままならない様子とお見受けいたしますので、出せれる情報はすべて出し切ってしまう方が、解決へと進むと思います。
もし、それすらどうしてよいのかわからずにお困りの場合でしたら、その旨書き込んでいただき、ひとつずつ解決して行くのがよいかと思います。少々時間がかかるかもしれませんが、今分かる範囲、出来る範囲で進めていくしかないのだと思います。
0
htmlのliタグにclass属性の値を入れてcssにliタグにclass属性の値の後にmargin要素に5px 0を入れた治ると思います。
投稿2017/01/25 04:31
総合スコア22
0
html
1<img src="images/logo.png"width="217"height="89"alt="KUJIRA cafe">
打ちなおす前、imgタグの属性記述部分が半角スペースで区切られてなかったからおかしかったんじゃないでしょうか？
投稿2017/01/18 15:28
総合スコア2092
あなたの回答
tips
プレビュー
